【初心者向け】Vimeo動画サムネイルの取得方法！HTML、JavaScript、API 3選

2024-05-19

Vimeo動画のサムネイル画像を取得する方法（HTML、JavaScript、Vimeo API活用）

Vimeo公式サムネイル画像URLの利用

最も簡単な方法は、Vimeoが提供する公式なサムネイル画像URLを利用する方法です。方法は以下の通りです。

上記URLフォーマットに、取得した動画ID ({VIDEO_ID}) を含めれば、対応サイズのサムネイル画像が表示されます。

例:

<img src="https://i.vimeocdn.com/video/123456789.jpg" alt="Vimeo動画サムネイル">

Vimeo APIを利用したサムネイル画像取得

より柔軟なサムネイル画像取得には、Vimeo APIを利用する方法があります。Vimeo APIを用いることで、以下のことが可能になります。

さまざまなサイズのサムネイル画像を取得
サムネイル画像の転送先を指定

手順:

アプリケーションを作成: 作成したアカウントで、Vimeo APIを利用するアプリケーションを作成します。
クライアントIDとクライアントシークレットを取得: 作成したアプリケーションのクライアントIDとクライアントシークレットを取得します。
レスポンスからサムネイル画像URLを取得: レスポンスの pictures プロパティから、必要なサイズのサムネイル画像URLを取得します。

const videoId = 123456789;
const clientId = 'YOUR_CLIENT_ID';
const clientSecret = 'YOUR_CLIENT_SECRET';

fetch(`https://api.vimeo.com/videos/${videoId}?fields=pictures`, {
  headers: {
    Authorization: `Bearer ${clientSecret}`,
    Client-ID: clientId,
  },
})
.then((response) => response.json())
.then((data) => {
  const thumbnailUrl = data.pictures.sizes[0].link;
  console.log(thumbnailUrl); // サムネイル画像URLが出力されます
});

注意事項

Vimeo API利用には、Vimeo Developerアカウントの作成と、アプリケーションの作成が必要となります。
APIリクエストには、適切な認証情報を含める必要があります。

Vimeo動画のサムネイル画像を取得するには、Vimeo公式サムネイル画像URLを利用する方法と、Vimeo APIを利用する方法があります。それぞれの特徴と利点を理解し、目的に合った方法を選択してください。

Vimeo動画サムネイル取得サンプルコード（HTML、JavaScript、Vimeo API利用）

Vimeo公式サムネイル画像URLを利用する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vimeoサムネイル表示</title>
</head>
<body>
  <h1>Vimeo動画サムネイル</h1>

  <img src="https://i.vimeocdn.com/video/123456789.jpg" alt="Vimeo動画サムネイル">

  <img src="https://i.vimeocdn.com/video/123456789_640.jpg" alt="Vimeo動画サムネイル（中サイズ）">

</body>
</html>

説明:

上記コードでは、動画ID 123456789 のVimeo動画のサムネイル画像を取得しています。
https://i.vimeocdn.com/video/{VIDEO_ID}.jpg で小サイズサムネイル、
https://i.vimeocdn.com/video/{VIDEO_ID}_{SIZE}.jpg で、{SIZE} を任意のサイズ値に置き換えることで、特定サイズのサムネイル画像を取得できます。

Vimeo APIを利用する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vimeoサムネイル表示</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      const videoId = 123456789; // 動画ID
      const clientId = 'YOUR_CLIENT_ID'; // Vimeo Developerアカウントで取得したクライアントID
      const clientSecret = 'YOUR_CLIENT_SECRET'; // Vimeo Developerアカウントで取得したクライアントシークレット

      // Vimeo APIにリクエストを送信
      $.ajax({
        url: `https://api.vimeo.com/videos/${videoId}?fields=pictures`,
        headers: {
          Authorization: `Bearer ${clientSecret}`,
          Client-ID: clientId
        },
        dataType: 'json',
        success: function(data) {
          const thumbnailUrl = data.pictures.sizes[0].link; // サムネイル画像URL
          // サムネイル画像をHTMLに挿入
          $('body').append('<img src="' + thumbnailUrl + '" alt="Vimeo動画サムネイル">');
        }
      });
    });
  </script>
</head>
<body>
  <h1>Vimeo動画サムネイル</h1>
</body>
</html>

上記コードでは、jQueryを使用してVimeo APIにリクエストを送信しています。
videoId, clientId, clientSecret を、Vimeo Developerアカウントで取得した情報に置き換えてください。
取得したサムネイル画像は、$('body').append('<img src="' + thumbnailUrl + '" alt="Vimeo動画サムネイル">'); の部分でHTMLに挿入されます。

上記コードはあくまで一例であり、必要に応じて修正・追加してください。

補足

実際に利用する場合は、エラー処理やオプション設定などを追加する必要があります。
より高度なサムネイル画像の取得・処理には、Vimeo APIの公式ドキュメントを参照してください。

Vimeo動画のサムネイル画像を取得する方法（その他の方法）

ウェブスクレイピング

Vimeo動画ページからサムネイル画像のURLを直接スクレイピングする方法です。ただし、この方法はVimeoの利用規約に違反する可能性があるため、非推奨です。

第三者製ライブラリ・ツール利用

Vimeo動画のサムネイル画像取得を容易にする、ライブラリやツールがいくつか存在します。

これらのライブラリを使用することで、Vimeo APIとの複雑なやり取りをせずに、簡単にサムネイル画像を取得することができます。

スクリーンショット

動画を再生して、その画面をスクリーンショットとして保存する方法です。この方法は、特定のフレームのサムネイル画像を取得したい場合に有効です。

手動アップロード

動画のサムネイル画像を自分で作成し、Vimeo動画設定ページから手動でアップロードする方法です。

それぞれの方法のメリットとデメリット

方法	メリット	デメリット
Vimeo公式サムネイル画像URL	簡単	サイズ変更が制限される
Vimeo API	柔軟性が高い	セットアップが複雑
ウェブスクレイピング	コードがシンプル	非推奨、規約違反の可能性
第三者製ライブラリ・ツール	簡単	ライブラリのバージョンや機能に依存
スクリーンショット	特定のフレームを取得可能	手間がかかる、画質が劣化する可能性
手動アップロード	高い自由度	手間がかかる