当页面上的所有视频都已完全加载时执行javascript

时间:2015-02-07 12:36:22

标签: javascript jquery video html5-video

我已修改此脚本以接受视频而非图片:

http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/

在本地,它工作正常,但当我上传到服务器时,视频不会同步。第一个视频比另一个视频开始得早。看看:

http://amarsyla.com/sandbox/beforeafter/

HTML:

<div id="container">
    <div>
        <video alt="before" autoplay="true" loop="true" width="600" height="366">
            <source src="before.mp4" type="video/mp4;">
        </video>
    </div>
    <div>
        <video alt="after" autoplay="true" loop="true" width="600" height="366">
            <source src="after.mp4" type="video/mp4;">
        </video>
    </div>
</div>

我使用以下代码初始化插件:

$(window).load(function() {
    $('#container').beforeAfter();
});

显然,window.load并没有完成这项工作。我需要一个JavaScript事件或类似的东西,这些事件将被触发,两个视频都已加载,并且它们可以开始彼此同时播放。我希望视频彼此完美同步,因此每个视频都在同一时间开始,我认为这可以通过在两个视频完全加载后初始化插件来实现。我试过这个:

var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
    alert("Can play through video without stopping");
};

这并不像我预期的那样奏效。它并不总是火。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

你问题中的代码与链接中的代码不同,所以我会选择后者,因为那是实际运行的代码。

看起来正在发生的事情是,即使视频正在播放,几秒钟之后,当他们不得不等待来自网络的更多数据时,它们也会失去同步。有人可能会认为“oncanplaythrough”就足以假设视频已被充分缓冲以便在不停顿的情况下一直播放,但情况并非总是如此。

理论上,当浏览器猜测数据进入的速度比你正在播放的速度快时,“canplaythrough”会触发,而“canplay”会在有足够的数据显示当前的一帧或两帧时触发时间。但Chrome在“canplay”之后会发出“canplaythrough”immediately,所以你不能指望它。即使在其他性能更好的浏览器上,数据传输仍然可能快速启动,然后在事件触发后减慢。

这意味着你必须不断观察任何一个视频上的“等待”事件并暂停它们直到它们再次赶上来。

以下是一个示例,您可以将其作为参考来帮助您入门: http://code.chirls.com/whiteknuckles/

这是非常古老的代码而不是我最好的工作。如果我今天写的话,我会采用不同的方式,但它似乎运作得相当好。