画像要素と同様に、動画を遅延読み込みすることもできます。動画は通常 <video> 要素で読み込まれます（ただし、
別の方法を使用できます。
<img>:
限られた実装で顕在化していました）。<video> の遅延読み込みの方法は、
おすすめしますいくつかのシナリオを見ていきましょう。それぞれに
異なります
自動再生されない動画の場合
ユーザーによって再生が開始された動画（つまり、
autoplay）、preload
属性
<video> 要素に指定するとよいかもしれません:
<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 の代わりとして <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 の各属性は、その名のとおりです。
自動再生を行うには、playsinline が必要です。
iOS。これで
複数のプラットフォームで機能する、サービス可能な 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> 遅延読み込みの例と同様に、
各 <source> の data-src 属性に動画の URL を隠す
要素です。続けて、次のような JavaScript コードを使用します。
Intersection Observer ベースの画像遅延読み込みの例:
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 属性に切り替えます。1 回
呼び出すことで、動画の読み込みをトリガーする必要があります。
要素の load メソッドを呼び出した後にメディアが自動的に再生されるようになります。
autoplay 属性で定義できます。
この方法を使用すると、アニメーション GIF の動作をエミュレートする動画ソリューションが完成します。 アニメーション GIF のような集中的なデータ使用量は発生せず、 コンテンツを遅延読み込みできます
ライブラリの遅延読み込み
動画を遅延読み込みするには、次のライブラリが役立ちます。
- vanilla-lazyload と lozad.js: 非常に軽量なオプション Intersection Observer のみを使用するこのようにパフォーマンスは優れていますが、 をポリフィルする必要があります。
- yall.js は、
Intersection Observer とイベント ハンドラにフォールバックします。また、
data-poster属性を使用して、動画のposter画像を遅延読み込みすることもできます。 - React 固有の遅延読み込みライブラリが必要な場合は、 react-lazyload。この間、 Intersection Observer は使用しませんが、一般的な遅延手法を使用できます。 React でアプリケーションを開発するのに慣れている人のために、画像を読み込むことをおすすめします。
これらの遅延読み込みライブラリは、それぞれドキュメントとマークアップが豊富に記述されています。 パターンをいくつか見ていきましょう。