当前位置: 首页 > 面试题库 >

另一个:强制Chrome浏览器完全缓冲mp4视频

陆翰藻
2023-03-14
问题内容

我已经看到了一些与此相关的主题,但是没有答案,所以我想在受污染的youtube相关页面的坟墓中添加另一个主题。

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

但是,完全下载完之后不会触发任何事件,Chrome似乎会停止缓冲更多的视频,直到当前视频时间快要达到缓冲的末尾为止,然后它会请求更多。

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

谢谢


问题答案:

遗憾的是,Chrome与其他HTML5浏览器一样,试图对下载的内容保持明智,并避免了不必要的带宽使用…这意味着有时我们会遇到次优的体验(具有讽刺意味的是,YouTube遭受了如此多的扩展影响强制进行更多的预缓冲!)

就是说,我并没有发现良好的服务器和良好的连接经常需要这样做-
但是,如果您需要某些东西,我发现的唯一解决方案就是大锤……使用Ajax下载该文件您要播放,然后将其加载到视频元素的源中。

下面的示例假定您的浏览器支持m4v /
mp4-如果您不能保证(例如)Chrome,则可能要使用canPlayType测试为用户选择最合适的视频格式。您还需要进行测试,以查看其对所需大小的视频的处理效果如何(我尝试了一些较大的视频,但不确定该上限可以可靠处理的上限)

该示例也非常简单…它启动了请求,并且在加载时不与用户进行任何通信-对于您的尺寸视频,您可能想要显示进度条只是为了让他们感兴趣。 。

此过程的另一个缺点是,直到您完全下载了文件,它才开始播放-
如果您想更深入地从缓冲区动态显示视频,则需要开始研究最新的内容(目前),MediaSource

<!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 || window.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>


 类似资料:
  • 问题内容: 有什么办法可以在页面上放置一些代码,以便当有人访问网站时,它会清除浏览器缓存,以便他们可以查看更改? 使用的语言:ASP.NET,VB.NET,当然还有HTML,CSS和jQuery。 问题答案: 如果这是关于和变化,一种方法是到“缓存无效”是通过附加像“ ”为每个版本的文件名。例如: 或者,在文件名之后执行此操作:

  • 问题内容: 这些天,我的应用程序一直在变化,因为我们的团队现在正在运行快速更新。 由于缓存,我们的客户并不总是拥有最新版本的代码。 那么有没有办法强制浏览器清除缓存? 问题答案: 您可以使用一种非常简单的解决方案,其中包括将哈希值附加到脚本文件中。每次部署App时,您都会通过gulp /grunt任务自动为文件提供不同的哈希值。例如,您可以使用gulp-rev。我在所有项目中都使用了这种技术,并且

  • 问题内容: 如何在HTML5视频上强制中止事件?我有一个叠加层,当我关闭它时,视频应该暂停播放,然后 停止缓冲 。但是,我的互联网连接仍然发疯。哦,我在Mac OS X 10.6上使用Chrome 7.0.5。 我已经尝试了几件事-没有一个起作用: (对于那些不熟悉XUI的人,x $就像jQuery的包装函数一样) 首先,调度中止HTML事件: 接下来,更改src,然后强制加载: 编辑:我的视频元

  • 问题内容: 背景 我正在为两个公益网站编写和使用一个非常简单的基于CGI的(Perl)内容管理工具。它为网站管理员提供事件的HTML表单,这些表单将填写字段(日期,位置,标题,描述,链接等)并保存。在该表格上,我允许管理员上传与事件相关的图像。在显示表单的HTML页面上,我还显示了上传图片的预览(HTML img标签)。 问题 当管理员想要更改图片时,会发生此问题。他只需要点击“浏览”按钮,选择一

  • 问题内容: 我想确保通过AJAX调用请求的数据是新鲜的,而不是被缓存的。为此,我发送标题 但是如果用户按下F5键,我的Chrome版本33会覆盖此标头。 例。将内容与您的网络服务器放在一起 在网络标签上的Chrome调试器中,我看到了test.html AJAX调用。状态代码200。现在按F5重新加载页面。最长寿命:0,状态码304未修改。 Firefox表现出类似的行为。只是覆盖了请求标头,它会

  • 我可以强制浏览器缓存WPS 6.1响应的页面吗? 强制浏览器缓存页面是满足要求的一种方式吗? 我尝试创建一个过滤器并在wps中配置它。 它正在工作,但HTTP标头仍然是: 缓存控制无缓存 内容语言en US 内容类型文本/html;charset=UTF-8 日期2012年5月11日星期五07:50:19 GMT 到期时间1970年1月1日星期四00:00:00 GMT IBM-Web2-Loca