如何将一系列视频与音频同步

Question

我有一系列视频和一个音频文件。 从音频文件搜索器控件中，我想控制视频文件的索引。

我希望能够做这样的事情：

<video mediagroup='test'>
    <source src='video1.webm' type='video/webm'> // 10secs
    <source src='video2.webm' type='video/webm'> // 10secs
    <source src='video3.webm' type='video/webm'> // 10secs
</video>
<audio controls='controls' mediagroup='test'>
    <source src='audio.ogg' type='audio/ogg'>    // 30secs
</audio>

如果我在音频中擦洗到 21 秒。 视频应擦拭到视频的 1 秒3 并可播放。

HTML5 音频/视频属性媒体组为您提供了这种同步，但您如何使用一系列视频文件来实现？

我想我可以用JavaScript做到这一点，但是有谁知道是否有办法在HTML中做到这一点？

Answer 1

我不相信你想做的事情是用mediagroup或没有Javascript的HTML实现的。 媒体组似乎不支持时间偏移; 所有媒体元素都需要共享相同的currentTime值。此外，火狐浏览器尚不支持它。

如果你确实想尝试Javascript实现，我建议从Popcorn Inception开始，看看这个例子。它处理将多个媒体（音频或视频）元素同步到单个主元素，暂停，播放和搜索已经处理完毕。（我希望在接下来的几周内推送一些错误修复。

值得注意的是，您对<source>元素的使用不正确。视频（或音频）元素可以列出多个源，以防浏览器无法播放一个或多个列出的文件，它可以回退到列表中的其他文件。请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source