javascript - Chrome - 不播放多个视频 - 网络卡在待定状态

Question

我的测试页上有 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 动态构建标记，结果相同。我也试过添加编解码器属性，但没有成功。

为了争论起见，我们假设重组页面，这样就没有视频存在于同一个父页面中。这只是一个无法修复的错误吗？任何可能的解决方法，无论多么 hacky？

Answer 1

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