Javascript 使用html5实现从视频到视频的无缝过渡

我正在尝试创建一个功能，用户可以在多个视频之间进行更改（来回），同时保持单个一致的音频。想象一下，可以从多个角度观看音乐会，但只听一个音频。这个功能的问题是，视频中的更改之间不能有延迟，或者音频将不再与视频同步（尤其是多次更改后）

我尝试过两种方法，都只使用html5（我宁愿不使用flash，尽管我最终会有一个后备方案），但它们都无法无缝工作，尽管取决于浏览器和硬件，它们可能非常接近

基本方法：

方法1：使用javascript预加载所有视频并在每次单击时更改视频src路径

方法2：再次预加载视频，使用多个标记，并在每次单击时使用javascript在它们之间进行更改

无论如何，有没有办法让这两种方法中的任何一种能够无缝地工作而不产生任何间隙？我应该使用一个轻微的手把戏，比如同时播放两个视频一秒钟，然后显示第二个视频并停止第一个视频？html5播放器不能做到这一点吗？可以用闪光灯吗

---

我已经在视频和音频中多次看到这种问题，但都没有明确的解决方案，但它们已经出现了几个月，我希望现在有一个解决方案。谢谢你的帮助。

这是可能的。你可以看看：这一切都是用html5完成的。他们在开始时预装所有视频，并同时启动它们。还没来得及检查他们到底是怎么做的，但如果你通过firebug检查他们的脚本，也许会有所帮助。更改SRC标记是快速的，但不是无间隙的。我正在尝试为我正在创建的媒体播放器找到最好的方法，并预装下一首曲目，通过“ended”切换src会留下大约10-20ms的间隙，这听起来可能很小，但足以引起注意，尤其是在音乐方面

我刚刚使用第二个音频元素进行了测试，当第一个音频元素通过事件“ended”结束时，它会立即触发，这会产生相同的微小间隙

---

看起来（不使用复杂的破解）没有一种简单的方法可以实现无间隙播放，至少现在是这样。

你找到更好的方法了吗

我使用两个视频标签实现了双缓冲播放。 一个用于当前播放，第二个用于预加载下一个视频。 视频结束时，我“交换”标签：

function visualSwap() {
    video.volume = video2.volume;
    video2.volume = 0;
    video.style.width = '300px';
    video2.style.width = '0px';
}

---

它有一些不确定的行为，所以我不是100%满意，但值得尝试…

经过多次尝试，我最终使用了类似于方法2的方法。我找到了这个网站，基本上复制了他们的方法。我在视频开始时间接近时预缓冲，然后在视频开始点命中时自动播放。我让当前的视频同时播放（在一个小分区中-作为用户界面的奖励），用户可以在切换“主屏幕视图”的视频之间切换。因为所有的视频都同时播放，所以你可以选择音频，这样差距就不会成为问题

不幸的是，我从来没有准确地解决过我的问题，我也不确定我的解决方案是否有最好的性能，但它可以在快速连接的情况下正常工作

---

谢谢大家的帮助

值得一提的是，谷歌提出的新方案是可行的。此API允许您将任意二进制数据馈送到单个视频元素，因此，如果您将视频分割成块，您可以通过XHR获取这些块并将其附加到视频元素，它们将在没有间隙的情况下播放

目前它仅在Chrome中实现，您需要在Chrome:flags中启用元素上的

启用媒体源API才能使用它。此外，目前仅支持WebM容器

下面是一篇关于HTML5Rocks的文章，演示了API的工作原理：

另一篇讨论分块播放列表的有用文章：

我希望这个实现能够被采纳，并得到更广泛的媒体容器支持

2014年6月更新浏览器支持正在慢慢改善：（感谢@Hugh Guiney的提示）


铬稳定
FF 25+有一个标志
media.mediasource.enabled
[]
Windows 8.1上的IE 11+[]
我想方法2是你能得到的最接近的方法，我也尝试过同样的方法（使用HTML5视频），并经历了短暂的差距。谢谢。这基本上就是我最终要做的，但有一些补充。对这一点的支持正在上升。Stable Chrome现在默认包括它，FF可以用一个标志来实现，甚至IE 11也有：使用$（'mediaplayer'）.prop（'loop'，true）；无缝和一个剪辑。但是，如果它切换的视频剪辑不止一个，那么谷歌浏览器还没有原生的解决方案。