2

ページの上部にビデオ要素があります。残りの DOM がロードされた後にそれをロードする方法があるかどうか疑問に思っていました。動画を最後にロードしたい。

4

2 に答える 2

3

これはあなたが望むことをするようです。私のサンプルでは、​​mp4 ソースのみを含めましたが、サポートしているブラウザーに応じて、WebM および Ogg 用に他のソースを追加できます。3 つの属性すべてを入力するか、canPlayType テストを使用して、ユーザーのブラウザーに最適な属性を判断することができます。

video 要素はデフォルトで autoplay になっています (ただし、その属性を<video...>タグから削除して、スクリプトから直接制御することもできます。また、デフォルトpreload="auto"でブラウザがプリロードする量を制御できるようになっています。これが最適でない場合は、これをオフにすることもできます)。あなたのシナリオのために（そして異なるブラウザは非常に異なる動作をします）

コンテンツをロードする準備が整うまで、ビデオ要素を非表示にすることもできます (ただし、ページが少し揺れて、ユーザーにとって奇妙に見えるかもしれません)。

<!DOCTYPE html>
<html>
<head>
<title>Initialize video when doc is ready</title>

<script>
document.onreadystatechange = function () {
  console.log("readyState = " + document.readyState);
  if (document.readyState == "interactive") { // can also wait for "complete" here
    init();
  }
}
function init() {
    console.log("load the source for the video element")
    vid = document.getElementById("video")
    // can use the vid.canPlayType test to only load supported video
    // or have tags for MP4, WebM and Ogg to cover your bases
    vidMP4 = document.getElementById("videoMP4")
    vidMP4.setAttribute("src","video.mp4")
//  vid.play();
}
</script>

</head>
<body>

<p>Something before the video</p>
<video id="video" controls autoplay preload="auto" width=480 height=320>
<source id="videoMP4"></source></video>
<p>Something after the video</p>

</body>
</html>
于 2013-08-17T23:44:04.887 に答える
1

Google には、これに関する適切なガイダンスがいくつかあります。

要約すると、src属性を属性に変更し、ターゲティング用data-srcのクラスを追加します。次に例を示します。lazy

<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>

次に、次の JavaScript を使用してdata-src属性をsrc属性に切り替え、ビデオの読み込みをトリガーします。

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);
    });
  }
});
于 2020-05-11T12:37:39.210 に答える