Mobile Safari - wait until <video> has fully downloaded before playing

Question

I'm building a site with a pretty complex <video> experience that involves jumping around the video's timeline quite a bit. In order for it to work as smoothly as possible, it's best to not start playing it until the video has completely buffered.

I have this set up and working in desktop browsers (`preload="auto" gets me mostly where I need to go) but of course mobile browsers don't preload content and require user interaction to start a video buffering.

My question: is it possible, in Mobile Safari, after a user taps Play to not have the video start playing until it's fully downloaded?

I'm using the Popcorn HTML5 media framework if it helps any.

Answer 1

There's a DOM event called canplaythrough that you can subscribe to in your JavaScript. This event is called when the browser estimates it can play through the entire video without pausing to buffer.

EDIT: Similarly, you can use the progress event to determine how much of the video has been buffered:

var player = document.getElementById('video_player'); // The <video> element
player.addEventListener('progress', onVideoProgressUpdate, false);

function onVideoProgressUpdate(e) {
    var percentageBuffered = 0;

    if (player.buffered.length > 0 && player.buffered.end && player.duration) {
        percentageBuffered = player.buffered.end(0) / player.duration;
    } else if (player.bytesTotal != undefined && player.bytesTotal > 0 && player.bufferedBytes != undefined) {
        percentageBuffered = player.bufferedBytes / player.bytesTotal;
    }

    if (percentageBuffered == 1) { // 100% of the video has been buffered
        player.Play();
    }
}