HTML 5 video 标签视频和音频去同步

Question

通过我的本地网站播放视频时，它的音频和视频会在一段时间后不同步，比如 40 分钟左右，如果我暂停视频然后取消暂停...我不知道这是不是html 5 有问题，我的浏览器，电脑还是什么？但是我的音频比视频快 1 秒左右，非常明显......这是我的视频代码，以防万一:

    echo    "<video class=\"videoContainer\" controls autoplay>
        <source src=\"$movieUrl\" type=\"video/mp4\">
    </video>";

事实上，我找不到任何解决方案......我找不到任何有同样问题的人!

P.S 刷新页面可以解决问题，但我不想每次视频不同步时都这样做......而且我在 YouTube 等上也没有同步问题......

Answer 1

目前没有很好的 API 用于将内容与视频的时间线同步，例如字幕或信息框。该规范早先为此目的有“提示范围”(甚至更早是“提示点”)；预计将来会添加类似的东西，包括对声明性标题的支持。

但是，现在，您将不得不使用计时器并读取 currentTime，或者监听 timeupdate 并读取 currentTime。 timeupdate 在视频播放时以 15 到 250 毫秒的间隔触发，除非之前的 timeupdate 事件处理程序仍在运行，在这种情况下浏览器应该跳过触发另一个事件。 Opera 目前总是在播放视频时以 250 毫秒的间隔触发它，而 Firefox 当前每渲染帧触发一次。这个想法是允许在系统负载增加时以更大的间隔触发事件，这可以节省手持设备的电池生命周期或在繁重的应用程序中保持响应。最重要的是，您不应依赖于时间间隔或浏览器或设备之间的时间间隔相同。

假设您想在视频的 3s 和 7s 之间显示一个 div 元素；你可以这样做:

Hello World ! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); video.ontimeupdate = function(e) { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime

hidden 属性表示该元素不相关，应该隐藏。浏览器尚不支持此功能，因此您必须使用 CSS 将其隐藏:

*[隐藏] { 显示:无 }

data-starttime 和 data-endtime 属性是 HTML5 允许放置在任何元素上的自定义 data-* 属性。它非常适合包含您想用脚本读取的数据，而不是滥用类或标题属性。 HTML5 也有一个方便的用于 data-* 属性的 API，但是浏览器还不支持它，所以我们必须使用 getAttribute 更长的时间。

上面看起来像这样使用计时器代替:

Hello World ! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); setInterval(function() { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime

这将每 100 毫秒运行一次。您是否应该使用 setInterval 或 timeupdate 取决于您在做什么以及您是否可以接受间隔更改。请注意，上面的 setInterval 示例也会在视频未播放时运行，而 timeupdate 示例则不会。但是，可以在视频停止播放时使用 clearInterval 清除间隔，并在开始播放时再次设置它。

如果您想将某些内容与播放开始的时间同步，或者在搜索之后，您应该监听播放和搜索——而不是播放或搜索。前者分别表示实际开始播放和搜索完成的时间，而后者表示刚刚请求播放或搜索，但在实际发生之前可能需要一些时间。