Execute javascript when all videos on page have been fully loaded

Question

I have modified this script to accept videos instead of images:

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

Locally, it works fine, but when I upload to a server, the videos are not synced. The first video starts earlier than the other one. Check it out:

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>

I initialize the plugin using this code:

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

Obviously, the window.load doesn't do the job. I need a JavaScript event or something similar which will be triggered that both of the videos have been loaded and they can start playing simultaneously with each other. I want the videos to be in perfect sync with each other, so each of them starts at the same time, and I thought this would be possible by initializing the plugin after both videos have been fully loaded. I've tried this:

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

That doesn't work as I expected. It doesn't always fire. Any help would be appreciated.

Answer 1

The code in your question is different from the code at the link, so I'll go by the latter since that's the one actually running.

It looks like what's happening is that even once the videos are playing, they're losing synchronization a few seconds later when they have to wait for more data from the network. One might think that "oncanplaythrough" would be enough to assume that the videos are sufficiently buffered to play all the way through without pausing, it's not always the case.

In theory, "canplaythrough" fires when the browser guesses that data is coming in faster than you're playing it, as opposed to "canplay" which fires when there is just enough data to show one or two frames from the current time. But Chrome fires "canplaythrough" immediately after "canplay" so you can't count on it. Even on other better-behaved browsers, it's still possible that the data transfer starts fast and then slows down after the event fires.

So that means that you have to continuously watch for any "waiting" events on either video and pause them both until they catch up again.

Here's an example you can use as a reference to get you started: http://code.chirls.com/whiteknuckles/

It's very old code and not my best work. I would do it differently if I wrote it today, but it seems to work reasonably well.