Detect HTML5 video’s events

With the new HTML5 tag “video” many things are changed.

Using this tag is very easy. Notwithstanding retrieving its events it’s not simple. So let’s start with a simple example to understand them.

First of all let’s start with this HTML code:

<video id=”video” src=”video.m4v” width=”300″ height=”150″></video>
<ul>
<li>Saved Position:
<span id=”cp”></span></li>
<li>Current Position:
<span id=”videoPosition”></span></li>
<li><button name=”button” type=”button”>Play</button></li>
<li><button name=”button” type=”button”>Pause</button></li>
<li><button name=”button” type=”button”>Save Position</button>
|
<button name=”button” type=”button”>Start From Position</button></li>
</ul>

Now add some Javascript’s lines to control our video:

function play() {
document.getElementById(“video”).play();
}
function pause() {
document.getElementById(“video”).pause();
}

function currentPosition() {
pos = document.getElementById(“video”).currentTime;
document.getElementById(“cp”).innerHTML=pos.toHHMMSS();
}

function startFromPosition() {
document.getElementById(“video”).currentTime = pos;
document.getElementById(“video”).play();
}

The code is very simple: to play or pause your video you’ve just to use the “play” or “pause” methods.

By the property “currentTime” you can detect the currently video position (remember it just read or write the position, nothing more).

Adding at the beginning of the code these next lines we complete our example:

var pos = 0;
Number.prototype.toHHMMSS = function() {
var sec_num = parseInt(this, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num – (hours * 3600)) / 60);
var seconds = sec_num – (hours * 3600) – (minutes * 60);

if (hours < 10) {
hours = “0” + hours;
}
if (minutes < 10) {
minutes = “0” + minutes;
}
if (seconds < 10) {
seconds = “0” + seconds;
}
var time = hours + ‘:’ + minutes + ‘:’ + seconds;
return time;
}

document.getElementById(‘video’).onended=function(){
alert(“It ends”)
}

document.getElementById(“video”).ontimeupdate = function() {
var finalTime=document.getElementById(“video”).currentTime;
document.getElementById(“videoPosition”).innerHTML=finalTime.toHHMMSS();
}

With the first prototype method we change the milliseconds parameter to something more readable. With the others next we check when a video ends (onended) or when it’s running (ontimeupdate).

That’s all! 🙂