Question

I’m trying to compare whether the video has been fully downloaded before I fade in the player using jQuery. To do this I’m using a loop using the setInterval() function and comparing the video attributes ‘buffered.end(0)’ and ‘duration’, however the length of both differs – as the first one contains more decimal places (by 3) than the second one:

25.946847656 > 25.946847

Is there any way I could check whether the video has been fully downloaded before I show the player?

Here’s what I’ve got at the moment:

var playerObject = {
    init : function(obj) {
        "use strict";
        if (obj.length > 0) {
            if (obj.length > 1) {
                jQuery.each(obj, function() {
                    playerObject.start($(this));    
                });
            } else {
                playerObject.start(obj);
            }
        }       
    },
    start : function(obj) {
        "use strict";
        var thisTime = window.setInterval(function() {
            if (obj[0].buffered.end(0) === obj[0].duration) {
                window.clearInterval(thisTime);
                obj.fadeIn(200);   
                playerObject.create(obj);               
            }
        }, 1000);
    },
    create : function(obj) {
        "use strict";   
        obj.live('click', function() {
            var thisVideo = $(this)[0];
            if (thisVideo.paused === false) {
                thisVideo.pause();
            } else {
                thisVideo.play();               
            }           
        }); 
        playerObject.endVideo(obj); 
    },
    endVideo : function(obj) {
        "use strict";
        var thisTime = window.setInterval(function() {
            if (obj[0].ended == true) {
                  window.clearInterval(thisTime);
                  obj.fadeOut(200);
            }
        }, 1000);
    }
};
$(function() {
    "use strict";
    playerObject.init($('.player'));
});

Answer 1

There dosn’t appear to be anything in the HTML 5 specification which would trigger once download/buffering has completed there is however a canplaythrough event that fires once the browser determines enough of the media has been downloaded such that it can be played through to the end without having to stop and buffer more of the media.