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

Question

我已修改此脚本以接受视频而不是图像：

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");
};

这不符合我的预期。它并不总是火。任何帮助将不胜感激。

Answer 1

您问题中的代码与 link 中的代码不同，所以我将使用后者，因为实际上是运行。

看起来发生的情况是，即使视频正在播放，它们也会在几秒钟后失去同步，因为它们必须等待来自网络的更多数据。有人可能会认为 "oncanplaythrough" 足以假设视频有足够的缓冲，可以一直播放而不会暂停，但情况并非总是如此。

理论上，"canplaythrough" 会在浏览器猜测数据输入速度快于播放速度时触发，而 "canplay" 则在数据刚好足以显示一个时触发或当前时间的两帧。但是 Chrome 在 "canplay" 之后触发 "canplaythrough" immediately 所以你不能指望它。即使在其他性能更好的浏览器上，数据传输仍然可能很快开始，然后在事件触发后变慢。

所以这意味着您必须连续观看任一视频上的任何 "waiting" 事件并暂停它们直到它们再次赶上。

这是一个示例，您可以将其用作入门参考： http://code.chirls.com/whiteknuckles/

这是非常古老的代码，不是我最好的作品。如果我今天写它，我会做不同的事情，但它似乎工作得相当好。

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

Execute javascript when all videos on page have been fully loaded

javascript

jquery

video

html5-video