Clever Geek Handbook

レイジーローディングビデオ

画像



通常、ビデオはビデオタグを使用してロードされます（ただし、imgを使用する別の方法が登場しましたが、その機能は制限されています）。ビデオのレイジーロードを実装する方法は、その使用例によって異なります。それぞれが異なるソリューションを必要とするいくつかのシナリオについて説明しましょう。



自動自動再生のないビデオの場合



ユーザーが開始したビデオ（つまり、自動的に再生されないビデオ）の場合、ビデオタグで適切な属性を指定する必要があります。 



<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>


上記の例では、値がnoneの属性preloadを使用して、ブラウザがビデオデータをダウンロードすることを禁止しています。ポスター属性は、ビデオをプレビューイメージに設定します。プレビューイメージは、ロードされるまでページ上のビデオの代わりになります。プレビューが必要なのは、ブラウザによってビデオの読み込みが異なるためです。



  • Chromeでは、preload属性のデフォルト値はautoでしたが、バージョン64以降、デフォルト値はmetadataです。それでも、デスクトップバージョンのChromeでは、Content-Rangeヘッダーを使用してビデオの一部をプリロードできます。Firefox、Edge、およびInternet Explorer11は同様に動作します。
  • Chrome, Safari 11.0 . 11.2, , Safari iOS .
  • , preload none.


自動読み込みに関しては、デフォルトの動作はブラウザごとに異なるため、この動作を明示的に設定することをお勧めします。ユーザーが自分で再生を開始する場合、preload = "none"を使用するのが、すべてのプラットフォームでビデオの読み込みを遅らせる最も簡単な方法です。プリロード属性は、ビデオコンテンツのロードを遅らせる唯一の方法ではありません。ビデオプリロードを使用した高速再生により、JavaScriptでのビデオ再生の操作に関するアイデアと洞察を得ることができます。



残念ながら、GIFの代わりにビデオを使用したい場合、これは役に立ちません。これについては以下で説明します。



アニメーションGIFの代替として機能するビデオの場合



アニメーションGIFは広く使用されていますが、多くの点で、特にファイルサイズの点で、同等のビデオには達していません。アニメーションGIFは、数メガバイトのデータを使用する可能性があります。同様の視覚的品質のビデオは通常、はるかに小さいです。アニメーションGIFの代わりにビデオ



要素を使用するのは簡単ではありません。アニメーションGIFには、次の3つの特徴があります。



  1. ダウンロード後に自動的に再生されます。
  2. それらは継続的にループされます（これは常にそうであるとは限りませんが）。
  3. オーディオトラックはありません。


ビデオ タグを使用してこれを実現すると、次のようになります。 



<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>


自動再生、ミュート、およびループの 属性は一目瞭然です。iOSでの自動再生にはplaysinlineが必要です。これで、使用可能なビデオアニメーションの代替品ができました。しかし、どのようにしてレイジーローディングをビデオに追加しますか？Chromeはレイジーロードビデオのロードに問題はありませんが、この最適化された動作を提供するためにすべてのブラウザを信頼できるわけではありません。オーディエンスとアプリケーションの要件によっては、問題を自分の手で処理する必要がある場合があります。まず、ビデオ接続を変更しましょう。 



<video autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>


あなたはのほかに気づくかもしれポスターの属性ページの代わりに位置プレビュー画像を指定することができ、ビデオタグ映像が遅延ロードされるまでに。ビデオURLは、各ソース要素のdata-src属性に配置されます。 JavaScriptを使用して、IntersectionObserverを使用して「遅延」ロードを整理します。 







document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});


sourceの すべての子要素をループし、それらのdata-src属性をsrc属性に変換します。これを行ったら、loadメソッドを呼び出してビデオのロードを開始する必要があります。その後、メディアはautoplay属性に従って自動的に再生を開始します。



この方法を使用すると、アニメーションGIFの動作を模倣する既製のビデオソリューションが得られますが、同じデータを大量に使用する必要はなく、このコンテンツを遅延ロードできます。



レイジーローディングライブラリ



次のライブラリは、遅延ビデオの読み込みに役立ちます。



  • lozad.jsは、交差点オブザーバーのみを使用した超軽量バージョンです。そのため、非常に効率的ですが、古いブラウザーで使用する前に、ポリフィルする必要があります。
  • yall.jsは、Intersection Observerを使用し、イベントハンドラーにアクセスするライブラリです。IE11および主要なブラウザと互換性があります。
  • React用のlazyloadライブラリが必要な場合は、react-lazyloadを検討してください。このライブラリはIntersectionObserverを使用しませんが、React開発者が精通している画像を遅延ロードする方法を提供します。


これらの各ライブラリは文書化されており、さまざまな遅延読み込みタスク用の多くのマークアップテンプレートが含まれています。


More articles:


All Articles