With the HTML5’s <video> element, you can display the player and play the video which, in most cases,  meet your needs. But the real power of the <video> tag comes with the script.

1. Getting Video Object

The first step is to get the object of the <video> element.

<video id="myVideo" width="320px" height="240px" controls="controls">
The video cannot be played.
</video>

var video = document.getElementById("myVideo");

2. Properties

You can retrieve or change the settings of the video through properties:

• videoWidth, videoHeight
• width, height
• src: used to specify the source programmatically
• currentSrc: repesents the browser’s pick when multiple sources are specified
• currentTime
• duration
• ended
• error
• paused
• muted
• seeking
• volume: (0 – 1)

3. Methods

• play()
• pause()
• load()
• canPlayType(type) : “”, “maybe”, or “probably”

Note that the “canPlayType()” method does not return the boolean value.

video.src = "funny.mp4";
if (video.ended) {
 video.load();
}
video.play();

function getPlayableVideoFormat() {
  if (video.canPlayType("video/mp4") != "")
    return "mp4";
  else if (video.canPlayType("video/webm") != "")
    return "webm";
  else if (video.canPlayType("video/ogg") != "")
    return "ogv"
  else
    return "";
}

4. Events

• play
• pause
• progress
• error
• timeupdate
• ended
• abort
• waiting
• loadedmetadata

You can map the event handler to the specific event using the “addEventListner(eventName, function, useCapture)“.

vidoe.addEventListener("ended", handleWhenEnded, false);