使用html5从视频到视频的无缝过渡 [英] Gapless Transition from Video to Video using html5
问题描述
我试图创建一个功能，用户可以在多个视频之间（来回）更改（保持单个一致的音频）。想想能够从多个角度观看演唱会，但只听一个音频。我使用此功能时遇到的麻烦是视频中的变化之间不存在延迟，或者音频不再与视频同步（多次更改后尤其如此）。
我尝试了两种方法，两种方法都只使用html5（我宁愿不使用flash，尽管我最终会有一个后备），但这些方法不能无缝工作，尽管取决于浏览器和硬件，它可能非常接近。 / b>
基本方法：
方法1：使用javascript预先载入所有视频并更改视频src路径
方法2：再次预加载视频并使用多个标记并在每次点击时使用javascript在它们之间进行更改。
是无论如何要让这两种方法中的任何一种无间隙地无缝工作？我是否应该使用轻微的手段，例如在揭示第二个视频并停止第一个视频之前同时播放两个视频？这只能用html5播放器完成吗？可以用闪光灯完成吗？
我已经在视频和音频上看到过这种类型的问题，但没有明确的解决方案，但是他们有几个月的时间老，我希望现在有一个解决方案。感谢您的帮助。
值得一提的是，它可能与 MediaSource API 。这个API允许您将任意二进制数据提供给一个视频元素，因此如果您将视频分成多个块，您可以通过XHR获取这些块并将它们附加到视频元素，它们将毫无间隙地播放。
目前它仅在Chrome中实施，您需要在< video>上启用启用媒体源API chrome：flags 中的元素来使用它。此外，目前仅支持WebM容器。
以下是一篇关于HTML5Rocks的文章，演示了API的工作原理：使用MediaSource API流视频。
另一篇有关分块播放列表的文章：分段WebM Video和MediaSource API 。我希望这个实现得到采用并且变得更宽媒体容器支持。
2014年6月更新浏览器支持正在慢慢变好：（感谢@Hugh Guiney的提示）
I am trying to create a feature where a user can change (back and forth) between multiple videos while maintaining a single consistent audio. Think of being able to watch a concert from multiple angles but listening to a single audio. The trouble I am having with this feature is that there can not be a lag between the changes in video or the audio will no longer sync with the videos (especially true after multiple changes).
I have tried two methods, both using html5 only (I would prefer not use flash although I will eventually have a fallback) that have not worked seamlessly, although depending on the browser and hardware, it can come very close.
Basic Methods:
Method 1: Preloading all videos and changing the video src path on each click using javascript
Method 2: Again preloading video and using multiple tags and changing between them using javascript on each click.
Is there anyway to get either of these two methods to work seamlessly without a gap? Should I be using a slight of hand trick, like playing both videos concurrently for a second before revealing the second and stoping the first? Can this just not be done with html5 players? Can it be done with flash?
I have seen this type of question a couple of times with both video and audio with no clear solution, but they were a couple of months old and I was hoping there is now a solution. Thanks for the help.
Worth adding that it is possible with the MediaSource API proposed by Google. This API allows you to feed arbitrary binary data to a single video element, thus if you have your video split into chunks you can fetch those chunks via XHR and append them to your video element, they'll be played without gaps.
Currently it's implemented only in Chrome and you need to enable Enable Media Source API on <video> elements in chrome:flags to use it. Also, only WebM container is currently supported.
Here is an article on HTML5Rocks that demonstrates how the API works: "Stream" video using the MediaSource API.
Another useful article that talks about chunked playlist: Segmenting WebM Video and the MediaSource API.
I hope this implementation gets adopted and gets wider media container support.
UPDATE JUN 2014 Browser support is slowly getting better: (thanks @Hugh Guiney for the tip)
这篇关于使用html5从视频到视频的无缝过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
