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

Execute javascript when all videos on page have been fully loaded

本文关键字：加载 javascript 执行 视频      更新时间：2023-09-26

我修改了这个脚本以接受视频而不是图像：

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

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

问题中的代码与链接中的代码不同，因此我将使用后者，因为这是实际运行的代码。

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

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

因此，这意味着你必须持续观看任何一个视频中的"等待"事件，并暂停它们，直到它们再次出现。

以下是一个可以作为入门参考的示例：http://code.chirls.com/whiteknuckles/

这是非常旧的代码，不是我最好的作品。如果我今天写的话，我会采取不同的做法，但它似乎运行得相当好。

相关文章：