vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)

vimeoの動画URL(https://vimeo.com/xxxxx)からサムネイル用URLを取得したい。youtubeだと「http://img.youtube.com/vi/【動画ID】/maxresdefault.jpg」のような形で取得できるがvimeoはAPIにリクエストする必要あり。以下に対応方法をメモ。

対応方法

ソースコード

const url = new URL(`https://vimeo.com/153868821`);
const id = url.pathname.replace(/\/+$/, '').split('/').pop();

fetch(`https://vimeo.com/api/oembed.json?url=https://vimeo.com/${id}`)
    .then((data) => data.json())
    .then((res) => {
        console.log(res.thumbnail_url); // 「https://i.vimeocdn.com/video/554273402-2eaa3354550c611ed8266f0112421ee75cf085ba477e86684690a1914695d1bf-d_640」が出力
    })
    .catch(e => {
        console.error(e.message)
    }
);

APIのレスポンス(戻り値)について

レスポンス全容は以下となり、サムネイル画像用URL以外に様々なデータを取得可能。

{
  "type": "video",
  "version": "1.0",
  "provider_name": "Vimeo",
  "provider_url": "https://vimeo.com/",
  "title": "著作権フリー",
  "author_name": "Usepip sample",
  "author_url": "https://vimeo.com/user39951058",
  "is_plus": "0",
  "account_type": "free",
  "html": "<iframe src=\"https://player.vimeo.com/video/153868821?app_id=122963\" width=\"640\" height=\"360\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media\" title=\"著作権フリー\"></iframe>",
  "width": 640,
  "height": 360,
  "duration": 72,
  "description": "",
  "thumbnail_url": "https://i.vimeocdn.com/video/554273402-2eaa3354550c611ed8266f0112421ee75cf085ba477e86684690a1914695d1bf-d_640",
  "thumbnail_width": 640,
  "thumbnail_height": 360,
  "thumbnail_url_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F554273402-2eaa3354550c611ed8266f0112421ee75cf085ba477e86684690a1914695d1bf-d_640&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png",
  "upload_date": "2016-02-02 00:14:48",
  "video_id": 153868821,
  "uri": "/videos/153868821"
}

その他

毎回APIにリクエストするとページ表示速度が遅くなりそうなため、CookieやlocalStorageに有効期限付きで保存した方が良さそう。

リファレンス

oEmbed API

https://developer.vimeo.com/api/oembed/videos