画像要素と同様に、動画を遅延読み込みすることもできます。動画の読み込みは通常 <video> 要素で行われます（ただし、<img> を使用する別の方法は実装が制限されています）。ただし、<video> を遅延読み込みする方法は、ユースケースによって異なります。それぞれが異なるソリューションを必要とするいくつかのシナリオについて説明します。
自動再生されない動画の場合
ユーザーによって再生が開始された動画（つまり、自動再生されない動画）の場合は、<video> 要素に preload 属性を指定することをおすすめします。
<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 属性を使用して、ブラウザが動画データをプリロードできないようにしています。poster 属性は、動画の読み込み中にスペースを占有するプレースホルダを <video> 要素に渡します。これは、動画を読み込む際のデフォルトの動作がブラウザによって異なるためです。
- Chrome では、
preloadのデフォルトはautoでしたが、Chrome 64 からデフォルトでmetadataになりました。ただし、PC 版の Chrome では、動画の一部がContent-Rangeヘッダーを使用してプリロードされることがあります。他の Chromium ベースのブラウザと Firefox でも同様に動作します。 - パソコン版の Chrome と同様に、Safari のパソコン版 11.0 でも一定の範囲の動画がプリロードされます。バージョン 11.2 以降では、動画のメタデータのみがプリロードされます。iOS の Safari では、動画はプリロードされません。
- データセーバー モードが有効になっている場合、
preloadはデフォルトでnoneに設定されます。
preload に関するブラウザのデフォルトの動作は不変ではないので、明示的に指定することをおすすめします。ユーザーが再生を開始した場合、すべてのプラットフォームで動画の読み込みを遅らせる最も簡単な方法は、preload="none" を使用する方法です。動画コンテンツの読み込みを遅らせる方法は preload 属性だけではありません。JavaScript での動画再生の操作に関するヒントや参考になる場合は、動画プリロードによる高速再生をご覧ください。
残念ながら、アニメーション GIF の代わりに動画を使用する場合には有用ではありません。これについては次に説明します。
アニメーション GIF の代わりとなる動画の場合
アニメーション GIF は広く使用されていますが、特にファイルサイズなどのさまざまな点で、動画と同等です。アニメーション GIF は数 MB のデータにまで 拡大する可能性があります画質が同程度の動画ははるかに小さい傾向があります
アニメーション GIF の代わりとして <video> 要素を使用するのは、<img> 要素ほど簡単ではありません。アニメーション GIF には次の 3 つの特徴があります。
- 読み込まれたら自動的に再生されます。
- これらは継続的にループします（ただし、常にそうとは限りません）。
- 音声トラックがありません。
これを <video> 要素で実現すると、次のようになります。
<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>
autoplay、muted、loop の各属性は、その名のとおりです。iOS で自動再生を行うには、playsinline が必要です。これで、プラットフォームをまたいで機能する、GIF の代替動画を用意できました。遅延読み込みはどうやって行うでしょうかまず、必要に応じて <video> マークアップを変更します。
<video class="lazy" 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>
poster 属性が追加されています。これにより、動画が遅延読み込みされるまで <video> 要素のスペースを占有するプレースホルダを指定できます。<img> 遅延読み込みの例と同様に、動画の URL を各 <source> 要素の data-src 属性内に隠します。そこから、Intersection Observer ベースの画像遅延読み込みの例と同様の JavaScript コードを使用します。
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);
});
}
});
<video> 要素を遅延読み込みする場合は、すべての <source> 子要素を反復処理し、その data-src 属性を src 属性に切り替える必要があります。その後、要素の load メソッドを呼び出して動画の読み込みをトリガーする必要があります。その後、autoplay 属性に従ってメディアが自動的に再生を開始します。
この方法を使用すると、アニメーション GIF の動作をエミュレートする動画ソリューションを作成できますが、アニメーション GIF のような集中的なデータ使用量は発生せず、そのコンテンツを遅延読み込みできます。
ライブラリの遅延読み込み
動画を遅延読み込みするには、次のライブラリが役立ちます。
- vanilla-lazyload と lozad.js は、Intersection Observer のみを使用する非常に軽量なオプションです。そのため、パフォーマンスは優れていますが、古いブラウザで使用するには、ポリフィルする必要があります。
- yall.js は、Intersection Observer を使用するライブラリであり、イベント ハンドラにフォールバックします。また、
data-poster属性を使用して、動画のposter画像を遅延読み込みすることもできます。 - React 固有の遅延読み込みライブラリが必要な場合は、react-lazyload の使用を検討してください。Intersection Observer は使用しませんが、React を使用したアプリケーション開発に慣れているユーザーにとっては、画像の遅延読み込みを行う一般的な方法が用意されています。
これらの遅延読み込みライブラリはそれぞれ詳細にドキュメント化されており、さまざまな遅延読み込み作業に対応する多くのマークアップ パターンが用意されています。