html5 – 另一个:强制Chrome完全缓冲mp4视频

前端之家收集整理的这篇文章主要介绍了html5 – 另一个:强制Chrome完全缓冲mp4视频前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_404_1@我已经看到了一些关于这个的线索,但没有答案,所以我想我会添加另一个到污染的YouTube相关页面的严重的院子里。

我有一个100MB的mp4视频,需要被浏览器完全下载,

然而,没有任何事件在完全下载时触发​​,Chrome似乎停止缓冲任何更多的视频,直到当前的视频时间几乎达到缓冲区的结尾,然后它需要更多。

如何让浏览器完全下载视频并将其缓冲100%?

谢谢

解决方法

令人遗憾的是,像其他HTML5浏览器一样,Chrome试图明白下载内容,避免不必要的带宽使用情况,这意味着有时候我们会有一个次优的体验(讽刺的是,YouTube遭受了这么多的扩展,强制更多预缓冲!)

也就是说,我没有发现这是一个很好的服务器和良好的连接需要太多的时间 – 但如果你需要的东西,我发现唯一的解决方案是一个大锤…使用Ajax来下载文件您要播放,然后将其加载到视频元素的源中。

下面的示例假设您的浏览器支持m4v / mp4 – 如果您不能保证(例如)Chrome,则可能需要使用canPlayType测试为用户选择最合适的视频格式。你还要测试看看它能处理你想要的大小的视频(我已经尝试了一些相当大的视频,但不知道这个可以处理的上限)

该示例也很简单,它启动请求,并且在加载时不会向用户传达任何内容 – 通过您的大小视频,您可能会想要显示一个进度条,以保持他们的兴趣。 。

这个过程的另一个缺点是在完全下载文件之前不会开始播放 – 如果要更深入地从缓冲区动态显示视频,那么您需要开始深入到流行边缘(目前)媒体资源世界如http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/这样的帖子所述

<!DOCTYPE html>
<html>
<head>
<title>Preload video via AJAX</title>
</head>
<body>
<script>
console.log("Downloading video...hellip;Please wait...")
var xhr = new XMLHttpRequest();
xhr.open('GET','BigBuck.m4v',true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log("got it");
    var myBlob = this.response;
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
    // myBlob is now the blob that the object URL pointed to.
    var video = document.getElementById("video");
    console.log("Loading video into element");
    video.src = vid;
    // not needed if autoplay is set for the video element
    // video.play()
   }
  }

xhr.send();
</script>

<video id="video" controls autoplay></video>

</body>
</html>
原文链接:https://www.f2er.com/html5/168947.html

猜你在找的HTML5相关文章