Wait until an HTML5 video loads

You don’t really need jQuery for this as there is a Media API that provides you with all you need.

var video = document.getElementById('myVideo');
video.src="https://stackoverflow.com/questions/13864795/my_video_" + value + '.ogg';
video.load();

The Media API also contains a load() method which: “Causes the element to reset and start selecting and loading a new media resource from scratch.”

(Ogg isn’t the best format to use, as it’s only supported by a limited number of browsers. I’d suggest using WebM and MP4 to cover all major browsers – you can use the canPlayType() function to decide on which one to play).

You can then wait for either the loadedmetadata or loadeddata (depending on what you want) events to fire:

video.addEventListener('loadeddata', function() {
   // Video is loaded and can be played
}, false);

Leave a Comment