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事件处理程序仍在运行，否则timeupdate会在视频播放时以15到250毫秒的间隔触发，在这种情况下，浏览器应跳过触发另一个事件。当视频播放时，Opera目前总是以250毫秒的间隔触发它，而Firefox目前每个渲染帧都会触发一次。这个想法是允许在系统负载增加时以更大的间隔触发事件，这可以节省手持设备上的电池寿命或在繁重的应用程序中保持响应。最重要的是，您不应该依赖于时间间隔或浏览器或设备之间的间隔。

假设您要在视频的时间3和7之间显示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

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

*[hidden] { display:none }

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清除间隔，然后在开始播放时再次设置它。

如果您想要在播放开始时或寻找后同步某些内容，您应该聆听播放和搜索 - 不要播放或寻找。前者表示播放实际上已经开始并且搜索已经完成，而后者表示刚刚请求了播放或搜索，但可能需要一些时间才能实际发生。

HTML 5视频标记视频和音频去同步

1 个答案: