HTML5 video events

When developing an html5 video player you use events to know when the player is ready, and to get the length of the video. You will also need to make them work cross browser and cross device.

This page is really useful for seeing the events fire with their relevant commands:
http://www.w3.org/2010/05/video/mediaevents.html

Here is an example using the three most used events:
(note that iOS devices the video metadata is not available until you've manually triggered play on the video player)

// setup the video player

var view = document.createElement('video');
view.addEventListener('loadedmetadata', onMetaData, false);
view.addEventListener('timeupdate', onTimeUpdate, false);
view.addEventListener('ended', onEnded, false);
document.getElementById('player').appendChild(view);

// load the video

view.autoplay = true;
view.controls = true;
view.setAttribute('src', 'example.mp4');
view.load();


function onMetaData(e) {
console.log('onMetaData', view.duration);
}

function onTimeUpdate(e) {
console.log('onTimeUpdate', view.currentTime);
}

function onEnded(e) {
console.log('onEnded');
}