跨浏览器视频预加载

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 内资源 获取算法

User agents may decide to not download more content at any time, e.g. after buffering five minutes of a one hour media resource, while waiting for the user to decide whether to play the resource or not, or while waiting for user input in an interactive resource.

因此，不幸的是，由于您设置了 preload=auto，因此您无法控制。 如果您想要交叉浏览，我会使用属性

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

关于 preloading on html5 的一些信息。

--更新---

我 post 这里是 Chrome 的最终解决方案，由他通过 pastebin 提供的问题的所有者提供。感谢 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();  
               }
            }
       })();
     };
});

跨浏览器视频预加载

Cross-browser video preload

javascript

html5-video