有没有人遇到过这个奇怪的 html5 视频播放问题？黑色元素，无法加载

Posted 2023-05-07

【中文标题】有没有人遇到过这个奇怪的 html5 视频播放问题？黑色元素，无法加载

【英文标题】：Has anyone met this weird html5 video playback issue? Black element, with no possibility to load

【发布时间】：2014-12-02 07:17:42

【问题描述】：

场景

我有一个视频元素：

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

我使用 jQuery 在 DOM 中移动它（附加和分离它）。

有时在新的附件（使用$.appendTo）之后，视频会变黑，无法以编程方式播放它。 即：我可以执行以下操作但没有成功：

var video = $('video')[0]; // using jQuery I get the reference to the DOM element
video.load(); // nothing happens
video.play(); // nothing happens
video.pause(); // nothing happens

我也有一个监听器

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

永远不会被触发。

我已尝试将网址更改为：

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

但什么也没发生。

注意事项

页面上有多个 4-5 个视频元素，我以类似的方式四处移动 我总是使用$.appendTo 将video 元素附加到可见区域，然后尝试播放它们 服务器设置为支持 Range 请求和缓存。

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

在失败的情况下，请求如下所示：

Chrome 显示 pending 并且服务器从不报告传入请求。 `

问题

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

发现（更新）

因为我一直在深入挖掘。我意识到这可能是 chrome/ium 问题。因此，我找到了以下页面：

html5 video request stay pending (forever) Byte range cache is locked when attempting to open the same video twice 可能被HTML5 video element request stay pending forever (on chrome)欺骗了

所有这些都显示已开放 1.5 - 4 年的错误。这看起来不太有希望。因此，我将潜入寻找替代品，尝试：

禁用视频缓存 在每个视频隐藏中使用 video.src = null; video.load(); 禁用byte ranges

【问题讨论】：

你的控制台说什么？并尝试向您的.load 函数添加某种回调，例如.load(function() console.log(1))。顺便说一句，localhost:3000，这是 RoR 应用程序吗？

控制台不报告任何错误并且加载永远不会完成，并且video.readyState保持为0（HAVE_NOTHING）。这是一个meteor 应用程序。服务支持缓存和范围请求。现在我正在禁用视频缓存，看看问题是否仍然存在。主要问题是也很难重现该问题，因为它只是不时发生。

@Matyas 嘿，我遇到了类似的问题，你能看看我的问题吗？ ***.com/questions/29093473/… 和 ***.com/questions/29115886/…

【参考方案1】：

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

可以在 Linux 下使用名为 qt-fast start 的小而强大的工具来完成更正。这个小程序已经很方便地默认在 FFmpeg 安装的 tools 子目录中了。

【讨论】：

视频为 mp4 格式。第一次加载文件时，我可以看到 chrome 使范围请求读取第一部分然后读取最后一位，以获取其元信息。此外，问题似乎发生在启用缓存的情况下。我仍然需要做更多的测试，尝试更多的解决方法。正如问题中提到的，我已经发现更多的人在使用 mp4 格式的缓存视频数据时遇到了同样的问题。但不幸的是，我还没有确定确切的问题。如果是缓存/基于硬件的解码/视频格式问题。

我不认为这是一个缓存问题。对于我们的一位客户，我们使用 html5 实现了一个视频门户。我们遇到了与您在下面描述的相同的错误。解决方案是交换视频文件的索引。看看这里link。

好的，谢谢你的建议。我正在创建转码脚本。将尝试qt-faststart 和转码到webm。感谢您的建议。顺便说一句：1.你使用范围请求和缓存吗？ 2. 您是否曾多次移动视频元素/在同一页面上多次显示相同的视频？

我为视频门户使用了一个视频播放器。为了加载其他视频，我更改了 video 元素的 src 属性。我不确定您对范围请求的含义。当您的意思是在视频中向前或向后跳过时，可以。对于另一个项目，我用 html 5 和 flash 后备构建了一个视频轮播。有很多视频播放器在转圈。视频播放没有问题

【参考方案2】：

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

问题似乎主要发生在回放视频时。 您将在其他线程中找到更多信息： HTML5 video will not loop

【讨论】：

对解决方案有任何提示吗？