【问题标题】:Force a full preload HTML5 video with Javascript?强制使用 Javascript 完全预加载 HTML5 视频?
【发布时间】:2013-05-11 00:19:53
【问题描述】:

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

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

【问题讨论】:

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

标签: google-chrome html5-video preload


【解决方案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 中可靠运行:stackoverflow.com/a/23299806/1417856 -- 完整电影下载并以 blob 形式加载到 src
猜你喜欢
  • 2014-09-01
  • 1970-01-01
  • 2012-03-25
  • 2015-08-27
  • 2019-12-02
  • 1970-01-01
  • 2016-04-22
  • 2013-08-23
  • 2011-08-16
相关资源
最近更新 更多