Question

我找到了一种方法，可以在播放之前将视频部分预加载到20％，这似乎在Firefox上运行得很好：

            window.addEventListener("load", function() {

            var video = document.createElement("video");
            video.setAttribute("preload", "auto");
            video.setAttribute("controls", "true");
            var mp4 = document.createElement("source");
            mp4.setAttribute("src", "https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4");
            mp4.setAttribute("type", "video/mp4");
            var webm = document.createElement("source");
            webm.setAttribute("src", "https://archive.org/download/ElephantsDream/ed_1024.ogv");
            webm.setAttribute("type", "video/ogv");
            video.appendChild(mp4);
            video.appendChild(webm);
            document.body.appendChild(video);

            var v = document.querySelector("video");
            v.addEventListener("progress", function() {
                (function() {
                    if(v.readyState == 4) {
                       var buffer = v.buffered; 
                       var loaded = (buffer.end(0) / v.duration) * 100;
                       console.log(loaded);
                         if (buffer.length === 1) {
                            if (loaded >= 20) {
                                console.log("Vidéo chargée");
                                v.play();                                }
                            }
                       } 
                })();
            }); 
        });

不幸的是，在Chrome上，视频必须播放才能进行缓冲。

有一个跨浏览器代码可以预加载视频吗？

Answer 1

除非您设置

，否则视频将始终预加载

video.setAttribute("preload", "none");

浏览器之间的差异取决于实现。根据资源获取算法

中的spec

用户代理可能决定不会随时下载更多内容，例如在缓冲五分钟的一小时媒体资源之后，等待用户决定是否播放资源，或者在等待交互式资源中的用户输入时。

所以，遗憾的是，由于您设置了 preload = auto。，因此您无法完全控制。如果您想要进行交叉浏览，我会使用该属性

video.setAttribute("autoplay", "true|false")
video.setAttribute("preload", "metadata|auto")

有关preloading on html5的信息。

- 更新---

我在这里发布了他通过pastebin提供的问题所有者提供的Chrome的最终解决方案。感谢 jadw

window.addEventListener("load", function() {
   var video = document.createElement("video");
       video.setAttribute("preload", "auto");
       video.setAttribute("controls", "true");
       video.setAttribute("webkit-playsinline", "true");
       video.setAttribute("playsinline", "true");
       video.setAttribute("autoplay", "true");
       var mp4 = document.createElement("source");
       mp4.setAttribute("src",
       "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4");
       mp4.setAttribute("type", "video/mp4");
       video.appendChild(mp4);
        video.onloadstart  = function() {
          video.volume = 0;
          video.addEventListener("progress", progressLoad);
          video.pause();
        };
        var progressLoad = function(){
            console.log(video.readyState);
           (function() {
             if (video.readyState === 4) {
               var buffer = video.buffered;                        
               var loaded = (buffer.end(0) / video.duration) * 100;
               console.log(loaded);
               video.currentTime = loaded;
               if ((buffer.length === 2) || (loaded >= 20)) {
                 video.currentTime = 0;
                 video.removeEventListener("progress", progressLoad);
                 console.log("Video loaded");
                 document.body.appendChild(video);
                 video.play();  
               }
            }
       })();
     };
});

跨浏览器视频预加载

1 个答案: