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

【问题标题】：how to sync a sequence of videos with audio如何将一系列视频与音频同步
【发布时间】：2014-02-24 19:42:46
【问题描述】：

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

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

<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 秒。视频应该拖到视频3 的 1 秒并且可以播放。

html5 audio/video 属性媒体组为您提供this kind of syncing，但您如何处理一系列视频文件？

我想我可以用 javascript 做到这一点，但有谁知道是否有办法只用 html 做到这一点？

【问题讨论】：

标签： html html5-video html5-audio

【解决方案1】：

我不相信您尝试使用 mediagroup 或在没有 Javascript 的 HTML 中执行的操作是可能的。 mediagroup 似乎不支持时间偏移；所有媒体元素都需要共享相同的currentTime 值。还有就是not yet supported in Firefox。

如果您确实想尝试 Javascript 实现，我建议您从 Popcorn Inception 开始，然后查看 example。它处理将多个媒体（音频或视频）元素同步到单个主元素，并已处理暂停、播放和搜索。（我预计在接下来的几周内会推出一些错误修复。）

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

【讨论】：

我很快查看了您的库——它看起来很有希望:) 我现在要开始使用它了。我会让你知道情况如何。我知道我的实现不正确。这就是我想要做的，我可以编写一个“angularjs 指令”来创建一个 html 元素来做到这一点。
我从没听说过爆米花。这是我想做的一切，还有更多。这是一座金矿。谢谢。
目前已严重损坏；有机会获得示例的更新吗？
任何 JS 实现（包括爆米花）都会遇到延迟问题（即不同步）。这对音频非常不利。您无法与 javascript 同步。 mediagroup 是唯一的方法，现在只能在 safari 上使用。