1

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

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

4

1 回答 1

5

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

于 2013-04-17T19:56:52.050 回答