使用相同的源创建两个 HTML5 视频元素不起作用答案

【问题标题】：Creating two HTML5 video elements with the same source not working使用相同的源创建两个 HTML5 视频元素不起作用
【发布时间】：2013-12-04 03:22:30
【问题描述】：

我正在尝试做一件简单的事情，但到目前为止我还没有成功，我不明白为什么它不起作用。

我需要两个（或多个）HTML5 视频元素来播放相同的视频，但它不起作用。这是我一直在尝试的代码：http://jsfiddle.net/4K8DZ/

关于为什么会这样的任何想法？

谢谢

【问题讨论】：

它现在正在播放相同的视频。更具体的是您的实际问题。
我忘了指出我正在使用 Chrome
在你的小提琴演示中没有问题，它玩得很好，而且做得很好，你说它在 chrome 中不起作用。我已经在 chrome 中测试了它，它玩得很好。您在运行时是否遇到任何特定错误您是否在 chrome 控制台中检查过？
您的视频正在同时播放。给他们一些时间让他们开始
我可以确认，使用 chrome build 26.0.1450.1 (191000) 时，视频不会一起播放，只有一个开始播放，当完全缓冲时，另一个会播放。

【解决方案1】：

我自己也遇到了这个问题。我通过在第二个视频元素的源文件中添加一个查询参数来解决这个问题：

video1.setAttribute("src", "whatever.mp4");
video2.setAttribute("src", "whatever.mp4?random=1");

【讨论】：

【解决方案2】：

虽然我仍然无法发表评论，但我必须将其作为答案提交。

只要其中一个正在缓冲，这个错误对于大于 10mb 的文件就会持续存在，而另一个则不会工作。如果你按下暂停，另一个就会起作用。

我更新了示例以演示该错误：http://jsfiddle.net/4K8DZ/23/

【讨论】：

【解决方案3】：

实际上，我只能在 Windows7 上使用 iPad + Safari 和 Chrome 播放一个视频。使用 Safari，如果我开始播放一个视频，那么另一个会停止。使用 Chrome，我得到了几乎相同的结果。

【讨论】：