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

【问题标题】：Execute javascript when all videos on page have been fully loaded当页面上的所有视频都已完全加载时执行 javascript
【发布时间】：2015-02-07 12:36:22
【问题描述】：

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

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

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

【问题讨论】：

您需要展示您自己的相关代码，特别是您如何开始播放视频。你必须自己控制，因为加载时间会完全不同。
这两个视频都是纯 HTML5 视频，您可以在我提供的链接中看到。
知道您可能会感到惊讶，但我们不想深入网站以了解您在做什么。请仅发布相关代码和 html。如果您只是在没有控制代码的情况下注入 HTML5 视频，那么您就不走运了。他们会在他们喜欢的时候跑。
无需代码。如果您花几秒钟时间阅读我的问题，我只是要求加载视频时触发的 javascript 事件或类似事件。我声明我使用的是<video> 标签。
如果不需要代码，那么你来错网站了。至少在反对票开始滚滚之前展示你尝试过的事情。

标签： javascript jquery video html5-video

【解决方案1】：

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

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

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

这意味着您必须持续观察任一视频上的任何“等待”事件并暂停它们，直到它们再次赶上。

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

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

【讨论】：