Javascript 有人遇到过这种奇怪的html5视频播放问题吗？黑色元素，无法加载 脚本

我有一个视频元素：

<video class=​"media video" src=​"http:​/​/​localhost:​3000/​uploads/​medias/​2014/​08/​11/​nahNYjjysJBuwSsxj_2" loop>​</video>​

我也有一个听众

$('video').on('canplay', function () {/*...*/});

永远不会被触发

我已尝试将url更改为：

v.src = v.src + '?cache_bust=true'; 
// then
v.load(); v.play();

但什么也没发生

笔记

• 页面上有多个4-5个视频元素，我以类似的方式移动它们
• 我总是使用

  $将
  视频
  元素附加到可见区域，然后尝试播放它们

• 服务器设置为支持范围请求和缓存

在健康情况下，它们看起来像：

在失败场景中，请求如下所示：

Chrome显示

挂起

，服务器从不报告传入的请求。 `

问题:

• 有人遇到过这个/类似的问题吗
• 是否存在解决方案
• 如果没有：是否存在可靠的解决方案

调查结果（更新） 因为我一直在深入挖掘。我意识到这可能是一个chrome/ium问题。因此，我找到了以下几页：

• 可能被愚弄了

这些都显示了已经开放了1.5-4年的bug。这看起来不太有希望。因此，我将深入寻找替代方案，尝试：

• 禁用视频缓存
• 使用

  video.src=null；video.load（）在每个视频上隐藏

• 禁用

  字节范围

---

您的视频采用哪种格式？许多编码器，包括FFmpeg和MEncoder，将mp4元数据写得非常不干净。在大多数情况下，索引将写在视频文件的末尾，而不是像文件开头所预期的那样。因此，必须先下载整个视频才能播放

---

可以在Linux下使用名为

qt-fast-start

的小型但功能强大的工具进行校正。默认情况下，这个小程序已经方便地放在FFmpeg安装的工具子目录中。

如果您确实在使用Chrome，这可能与Chrome的视频行为有关，即使用字节服务获取视频流，然后在接收到200 HTTP代码时出错，而不是206更适合字节服务

问题似乎主要发生在重放视频时。 您将在另一个线程中找到更多信息：

---

您的主机上说什么？并尝试向

.load

函数添加某种回调，类似于

.load（function（）{console.log（1）}）

。顺便说一句，

localhost:3000

，这是RoR应用程序吗？控制台不会报告任何错误，加载永远不会完成，并且video.readyState保持在0上（

HAVE\u NOTHING

）。这是一个应用程序。服务支持缓存和范围请求。现在我正在禁用视频缓存，以查看问题是否仍然存在。主要的问题是很难重现问题，因为它只是偶尔发生。@Matyas嘿，我有类似的问题，你能看看我的问题吗。视频是mp4格式的。当我第一次加载文件时，我可以看到chrome发出范围请求，先读取第一部分，然后读取最后一位，以获取其元信息。此外，启用缓存时似乎会出现问题。我仍然需要做更多的测试，尝试更多的解决方法。正如问题中提到的，我已经发现越来越多的人在使用mp4格式的缓存视频数据时遇到同样的问题。但不幸的是，我还没有解决确切的问题。如果是缓存/基于硬件的解码/视频格式问题，我不认为这是缓存问题。对于我们的一个客户，我们已经使用html5实现了一个视频门户。我们面临的错误与您在下面描述的相同。解决方案是交换视频文件的索引。看看这里。好的，谢谢你的建议。我正在创建代码转换脚本。将尝试

qt快速启动

和转换到

webm

。谢谢你的建议。顺便说一下：1。是否使用范围请求和缓存？2.您是否曾多次在同一页面上移动/显示同一视频元素？我在视频门户中使用了一个视频播放器。要加载其他视频，我已经更改了视频元素的

src

属性。我不知道你的射程要求是什么意思。当你想在视频中向前或向后跳过时，那么是的。对于另一个项目，我用HTML5和flash回退构建了一个视频转盘。有许多视频播放器在循环中移动。视频播放没有问题任何解决方案的提示？

v.src = v.src + '?cache_bust=true'; 
// then
v.load(); v.play();