[HTML5] APIs – Video


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.
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) {
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"
    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);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s