Vimeoの埋め込み動画に関する備忘録

サイト高速化の案件で、vimeoのiframeについて色々調べたので備忘録に残しておきます。

ネイティブLazyLoad

iframeコードを編集して、lazyloadを利用するのが最も賢明な判断です。（が、なぜか今回の場合はlazyload指定した方が遅くなるという不可思議な現象が起きたので中止）

loading属性で指定するネイティブlazyloadはほとんどのモダンブラウザで実装されていますが、safariとiOS_safariは未実装なので、以下のコードで対応します。

<iframe data-src="{VimeoURL}" (略) class="lazyload" loading="lazy"></iframe>

<script>
if ('loading' in HTMLImageElement.prototype) {
  // loading属性がサポートされているとき
  const iframes = document.querySelectorAll('iframe[loading="lazy"]');
  iframes.forEach(iframe => {
    // data-srcの値をsrcに
    iframe.src = img.dataset.src;
  });
} 
else {
  // loading属性がサポートされていないときはlazysizeで遅延させる
  const script = document.createElement('script');
  script.src = '//cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js';
  document.body.appendChild(script);
}
</script>

lazysizeではなくlazyloadを使っても問題ありません。 両者の一番の違いは、lazysizeはjqueryなしで動くということ。

iframeのURLからJSONデータを読み込む

vimeoは様々なapiを公開していますが、その中のoEmbedAPIを使うと様々な情報をjson形式で取得できます。

リクエストの送信先は以下。

https://vimeo.com/api/oembed.json?url={video_url} 

{video_url}は通常の動画なら[　https://vimeo.com/{video_id} ]の形式です。iframe srcとは違いますので、変換しておく必要があります。

vimeoの埋め込み動画をサムネイル表示にしてみる

テストとして、oEmbedAPIからサムネイルソースを引っ張ってきてiframe srcをサムネイルのURLに置き換えてみます。

<iframe src="https://player.vimeo.com/video/92060047?h=0deb924392" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

<script>
const vimeo = document.getElementsByTagName('iframe')[0],
      vsrc = vimeo.getAttribute('src') ,
      // video_id を抜き出す
      vid = vsrc.split('?')[0].replace('https://player.vimeo.com/video/', ''),
      // api用のURLに変換
      apiURL = 'https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/' + vid;

$.get(apiURL)
	.then(function (data) {
          const thumbUrl = data.thumbnail_url;
	  vimeo.setAttribute('src', thumbUrl );
	})
</script>

結果↓

これは完全に画像に置き換えてしまっていますが、実際はサムネクリックで動画再生などの動作をさせることになります。

サムネイル画像だけでなく、以下の内容がJSONで出力されています。

{
  'type': 'video',
  'version': '1.0',
  'provider_name': 'Vimeo',
  'provider_url': 'https://vimeo.com/',
  'title': 'Learning Vimeo - Basic Uploading',
  'author_name': 'Vimeo Staff',
  'author_url': 'https://vimeo.com/staff',
  'is_plus': '0',
  'account_type': 'enterprise',
  'html': '<iframe src=\'https://player.vimeo.com/video/92060047?app_id=122963&amp;h=0deb924392\' width=\'480\' height=\'270\' frameborder=\'0\' allow=\'autoplay; fullscreen; picture-in-picture\' allowfullscreen title=\'Learning Vimeo - Basic Uploading\'></iframe>',
  'width': 480,
  'height': 270,
  'duration': 266,
  'description': 'Unleash the power of Vimeo(中略) vimeo.com/help',
  'thumbnail_url': 'https://i.vimeocdn.com/video/473463779_295x166',
  'thumbnail_width': 295,
  'thumbnail_height': 166,
  'thumbnail_url_with_play_button': 'https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F473463779_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png',
  'upload_date': '2014-04-15 13:36:20',
  'video_id': 92060047,
  'uri': '/videos/92060047'
}