我的测试页上有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动态创建标记,结果相同。我也尝试过添加编解码器属性,但是没有运气。
为了争辩,可以说重组页面,以使没有视频可以在同一父级中进行。这是一个无法修复的错误吗?有任何可行的解决方法,但是很麻烦?
最佳答案
解决了-显然是在同一时间从同一台服务器请求相同文件名的请求使Google感到惊讶。更改文件名或域可以正常工作。 FWIW,我复制了测试视频,并在文件名的末尾添加了1、2、3等,然后从同一服务器运行它们。可以正常工作。使用来自不同领域的测试视频使我着手解决方案。