ネイティブの怠惰なローディング-ビデオ要素はなぜそれを持っていないのですか?

怠惰なローディングは、初期ページ負荷のために重要でないリソースを特定するための戦略であり、必要なときだけそれらをロードする.それは、長さを短くする方法ですcritical rendering path , これはページ負荷時間の削減に変換されます.それは、より速いウェブサイトにつながります.
我々は能力を怠惰な負荷の画像とiframeをブラウザで今すぐに loading attribute .

<img src="cat.jpg" alt="felix the cat" loading="lazy">

<iframe src="video-player.html" title=".." loading="lazy"></iframe>

Support for lazy-loading is good . 画像の怠惰な読み込みは、現在すべての主要なブラウザによってサポートされています.しかし、それはまだiframeのためのビットパッチです.Firefoxはiframeの怠惰な読み込みをサポートしていません、そして、それは現在サファリで実験的な旗の下にあります.そこで、我々はそこにgettingです!

それは、ちょうど私になぜ私を不思議にしましたかvideo 要素が見落とされました.ほとんどのビデオがYouTubeで今住んでいるとiframe経由でウェブサイトに埋め込まれているためですか?
私は知らないが、確かに希望!😕🤞
最近記事を書くとき、私はいくつかの機能をデモに短い画面録画をしました.私は自動再生ビデオとしてそれを含めたかったです、あなたがアニメーションGIFを使うかもしれないところに類似しています.それは私がビデオのためのネイティブ怠惰なローディングがあると気づいた時です.
閉じるこの動画はお気に入りから削除されていますWebP 代わりに.WebPはGIFと同じアニメーションをサポートしていますが、より良い圧縮をサポートしていますか?
あなたはonline video to WEBP converter この仕事のために.
私は、このトピックに深くそれを掘っていなかったので、私がやっていたから少しの正接でした!しかし、私はこの話題に関してGoogle DEVSによって最近の十分な記事(後半2019)を読みました"Lazy-loading video" . 彼らは、異なって扱われるビデオを埋め込む2つの異なったユースケースを記述します.話題をよりよく理解するためにこれらを見てみましょう.

ユースケース1：ユーザーが再生を開始するビデオ

あなたはビデオ上のコントロールを持っているし、ビデオを再生するユーザー.
あなたは preload attribute でvideo ロードを制御する要素.提供することでpreload="none" , ブラウザはビデオデータを読み込むのを防ぐべきです.

<!-- disable preloading -->
<video controls preload="none" width="300" poster="img/cover.jpg">
    <source src="files/sample.mp4" type="video/mp4">
</video>

を含まないautoplay ここで属性は、ビデオをロードすることができますpreload="none" !
ブラウザのデフォルト動作preload 石に設定されていないので、明示的にこれはおそらく良いアイデアです.
いくつかのブラウザでは、ビデオの背景があります.あなたはそれを使用してよりよく見えるようにすることができますposter 属性はプレビュー画像を表示します.
ユーザーがビデオの再生ボタンをクリックすると、ビデオが読み込まれます.

ユースケース2：アニメーションGIF置換としてのビデオ

これは私のユースケースでした.
このような怠惰な読み込みライブラリを使用してvanilla-lazyload , または、独自のJavaScriptコードを書くことができます.
独自のコードを書くには長すぎません.
HTMLではsrc 属性source 代わりに、ビデオのURLを隠してくださいdata-src 属性.マークvideo 「怠惰な」クラスで.

<video class="lazy" autoplay muted loop playsinline width="600" height="300" poster="cover.jpg">
  <source data-src="screen-recording.webm" type="video/webm">
  <source data-src="screen-recording.mp4" type="video/mp4">
</video>

JavaScriptコードは IntersectionObserver API を検出するvideo “lazy”クラスを持つ要素が表示され、src 属性をそれぞれsource ビデオURLを持つ要素.

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);
    });
  }
});

閉じるこの動画はお気に入りから削除されています.
この機能の追加のように私に見える.追加できますpreload="lazy" ; またはloading 属性は他の2要素にマッチします.
提案箱はどこですか.😄