强制使用 Javascript 完全预加载 HTML5 视频？

Posted 2023-05-07

【中文标题】强制使用 Javascript 完全预加载 HTML5 视频？

【英文标题】：Force a full preload HTML5 video with Javascript?

【发布时间】：2013-05-11 00:19:53

【问题描述】：

我即将尝试完全预加载 html5 中的视频。我使用属性preload=auto，但它不会预加载整个视频...在 Chrome 中，视频仅预加载了 2%，而在 Safari 中则为 50%...

是否可以使用 javascript 强制完整预加载视频？

【问题讨论】：

这里有同样的问题：我需要在 chrome 中预加载完整的视频。不幸的是我还没有找到解决方案，我也尝试使用 XMLHttpRequest 方式，但我有不允许的错误...我希望有一个解决方案..

【参考方案1】：

function addSourceToVideo(element, src, type)     
    var source = document.createElement('source');    
    source.src = src;    
    source.type = type;    
    element.appendChild(source);    


var video;       
$(document).ready(function()    
    video = document.getElementsByTagName('video')[0];    
    addSourceToVideo( video, "http://your-server.com/clip.ogv", "video/ogv");    
    addSourceToVideo( video, "http://your-server.com/clip.mp4", "video/mp4");    
    video.addEventListener("progress", progressHandler,false);       
);

progressHandler = function(e)     
    if( video.duration )     
        var percent = (video.buffered.end(0)/video.duration) * 100;    
        console.log( percent );    
        if( percent >= 100 )     
            console.log("loaded!");    
            
        video.currentTime++;    
        

【讨论】：

这是一个很好的解决方案。对于后台加载，只需在 video 标签上调用 createElement。另外，为 Chin-Chan +1！

bindKeys 函数有什么作用？或者这只是复制粘贴留下的东西？现在我注意到了索引变量。

@DBS 是的，它是从复制粘贴中留下的，答案已更新。谢谢！！

这在 chrome 中对我不起作用（在 60% 左右停止触发“进度”事件）。但如果我使用video.currentTime+=2，它似乎确实可以可靠地工作，这很奇怪。

经过更彻底的测试，这对我来说实际上并不可靠。此解决方案在 chrome 中可靠运行：***.com/a/23299806/1417856 -- 完整电影下载并以 blob 形式加载到 src。