Chrome - 不播放多个视频 - 网络卡在待处理答案

【问题标题】：Chrome - not playing multiple videos - network stuck in pendingChrome - 不播放多个视频 - 网络卡在待处理
【发布时间】：2013-04-10 16:26:43
【问题描述】：

我的测试页上有 2 个视频元素，如下所示：

<div id="parent">
    <video id="foo" autoplay>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
    </video>
    <video id="bar" autoplay>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
    </video>
</div>

在最新的 FF 中，一切正常。但是，在 Chrome 中，这些视频都不会播放；查看 net 选项卡可以发现，他们陷入“待定”状态的时间从几秒到无限长不等。如果我注释掉/删除一个视频元素，另一个会播放。

我看到多个 Chromium 错误报告讨论了类似的问题，但似乎没有一个与父容器直接相关。我尝试通过 JS 动态构建标记，结果相同。我也尝试过添加编解码器属性，但没有成功。

为了争论，可以说重组页面，使没有视频存在于同一个父级中不是一种选择。这只是一个无法修复的错误吗？有任何可能的解决方法，但很老套？

【问题讨论】：

因此，从我的测试环境中进一步简化这个示例，即使是一个没有父容器且没有其他任何东西的单独视频标签也将在相当长的一段时间内停滞不前。我平均需要 40 秒。
这很奇怪。设法通过在视频 URL 的末尾添加一个随机参数来修复它，例如“？09489023549”。在这种情况下，它似乎又可以工作了。

标签： javascript html google-chrome video html5-video

【解决方案1】：

已解决 - 显然同时从同一服务器请求相同的文件名让 Google 吓坏了。更改文件名或域可以正常工作。 FWIW，我复制了测试视频并将 1、2、3 等添加到文件名的末尾，并从同一服务器运行它们。按预期工作。使用来自不同领域的测试视频让我找到了解决方案。

【讨论】：