Question

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

我尝试了两种方法，都只使用html5（我宁愿不使用闪存，虽然我最终会有一个后备）但是无法无缝工作，虽然取决于浏览器和硬件，它可以非常接近。

基本方法：

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

方法2：再次预加载视频并使用多个标签，并在每次点击时使用javascript进行更改。

无论如何，这两种方法中的任何一种都能无缝地无缝地工作吗？我是否应该使用轻微的手法，比如同时播放两个视频一秒钟，然后再显示第二个并停止第一个？这可不是用html5播放器完成的吗？它可以用闪光灯完成吗？

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

Answer 1

值得补充的是，谷歌提出的MediaSource API是可行的。此API允许您将任意二进制数据提供给单个视频元素，因此，如果您将视频拆分为块，则可以通过XHR获取这些块并将它们附加到您的视频元素，它们将无间隙地播放。

目前它仅在Chrome中实施，您需要在 chrome：flags 中启用Enable Media Source API on <video> elements才能使用它。此外，目前仅支持WebM容器。

以下是一篇关于HTML5Rocks的文章，演示了API的工作原理："Stream" video using the MediaSource API。

另一篇讨论分块播放列表的有用文章：Segmenting WebM Video and the MediaSource API。

我希望这个实现得到采用并获得更广泛的媒体容器支持。

更新2014年6月浏览器支持正在慢慢好转:(感谢@Hugh Guiney的提示）

Chrome Stable
FF 25+有一个标记media.mediasource.enabled [MDN]
Windows 8.1上的IE 11+ [MSDN]

Answer 2

你有没有找到更好的方法呢？

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

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

它有一些非确定性的行为，所以我不是100％满意，但值得尝试......

Answer 3

更改SRC标签很快，但不是无间隙的。我正在尝试为我正在创建的媒体播放器找到最佳方法并预加载下一首曲目并通过“结束”切换src会留下大约10-20ms的间隙，这可能听起来很小，但它足以引人注目，特别是音乐。

我刚刚测试了第二个音频元素，一旦第一个音频元素通过“已结束”事件结束并且产生相同的微小间隙，它就会触发。

看起来（不使用精心制作的黑客）至少现在没有一种简单的（ish）实现无间隙播放的方法。

Answer 4

有可能。你可以看一下：http://evelyn-interactive.searchingforabby.com/这一切都是在html5中完成的。他们在开始时预加载所有视频并同时启动它们。还没有时间，检查他们是如何完全做到的，但如果你通过firebug检查他们的脚本可能会有帮助

Answer 5

经过多次尝试，我最终使用了与方法2类似的东西。我发现这个网站http://switchcam.com并且基本上复制了他们的方法。我预先缓冲视频开始时间接近，然后在视频起点点击时自动播放。我让当前的视频同时播放（在一个小div中 - 作为UI奖励），用户可以在切换“主屏幕视图”的视频之间切换。由于所有视频都是一次播放，因此您可以选择音频，而差距最终不会成为问题。

不幸的是，我从来没有完全解决我的问题，我不确定我的解决方案是否具有最佳性能，但它可以快速连接。

感谢大家的帮助！

使用html5从视频到视频的无缝转换

5 个答案: