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

Posted 2023-05-08

【中文标题】使用 html5 从视频到视频的无缝过渡

【英文标题】：Gapless Transition from Video to Video using html5

【发布时间】：2012-04-04 07:28:27

【问题描述】：

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

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

基本方法：

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

方法 2：再次预加载视频并使用多个标签，并在每次点击时使用 javascript 在它们之间进行切换。

有没有办法让这两种方法中的任何一种无缝地无缝工作？我是否应该使用一些技巧，例如在显示第二个视频并停止第一个视频之前同时播放两个视频一秒钟？ html5播放器不能做到这一点吗？可以用flash做吗？

我曾多次在视频和音频方面看到此类问题，但没有明确的解决方案，但它们已经存在几个月了，我希望现在有解决方案。感谢您的帮助。

【问题讨论】：

我猜方法 2 是你能得到的最接近的方法，我尝试了同样的方法（使用 HTML5 视频）并且经历了短暂的差距。

谢谢。这基本上是我最终的结果，但有一些补充。

【参考方案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 的提示）

铬稳定 FF 25+ 有一个标志 media.mediasource.enabled [MDN] Windows 8.1 上的 IE 11+ [MSDN]

【讨论】：

对此的支持正在增加。稳定版 Chrome 现在默认包含它，FF 可以用一个标志来做到这一点，甚至 IE 11 也有它：developer.mozilla.org/en-US/docs/Web/API/MediaSource

【参考方案2】：

你找到更好的方法了吗？

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

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

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

【讨论】：

使用 $('#mediaplayer').prop('loop', true);无缝和一个剪辑。但如果切换不止一个视频剪辑，那么谷歌浏览器还没有原生解决方案。

【参考方案3】：

更改 SRC 标记速度很快，但并非没有间隙。我正在尝试为正在创建的媒体播放器找到最佳方法，并预加载下一首曲目并通过“结束”切换 src 会留下大约 10-20 毫秒的间隙，这听起来可能很小，但足以引起注意，尤其是音乐。

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

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

【参考方案4】：

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

【参考方案5】：

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

不幸的是，我最终没有完全解决我的问题，我不确定我的解决方案是否具有最佳性能，但它适用于快速连接。

感谢大家的帮助！