jQuery: Capturing HTML5 Video Events Using addEventListener (MP4/OGG)

This is the HTML5 video element events test. The same as the earlier HTML5 audio doodle, this one is also a demo about the sequence of events which happens during the file fetching, play state, pause, volume change, etc.
The method I'm using here is the JavaScript's addEventListener.

The basic syntax is:

DOMElement.addEventListener("the_event", function(){ ... }, false);

The event handler there is an anonymous function, which can consist of method(s) and/or be chained with another function(s).

A glimpse about video tag

It can be declared like so:

<video id="video" preload="none" controls poster="image_url_for_video_thumbnail">
  <source src="the_MP4_video_url" type="video/mp4">
  <source src="the_OGG_video_url" type="video/ogg">

  <!-- for browser which does not support video element -->
  <span>Your browser currently <u>does not support</u> HTML5 video</span>
</video>

As you can see above, the video has some specific attributes.
Those are:

The preload
The controls
The poster

The last one, the poster attribute, is only for video media element, audio element doesn't have that attribute.
The poster attribute sets the image thumbnail of the video.

About the supported video format

I'm using three kinds of browser here. Firefox, Chrome, and Yandex. Well, it's just two actually, Chrome and Yandex are both using Chromium engine. Firefox is using Gecko.

Chrome (and Yandex) currently supports MP4, OGG, and WebM format.
Firefox (on Windows) currently (version 30.0) supports OGG and WebM format.

Free download of this doodle

So this one is exactly like the earlier audio test. The method is the same, the only difference is I just changed the audio tag to video tag. Then switched some of the variable names in the JavaScript.

Anyway, you can also test this demo on a mobile device, see if your device's browser supports HTML5 video element with MP4/OGG format. Just click the link to THOR.

DOWNLOAD DEMO (12KB - HTML) DEMO ON THOR

Let's see the DEMO right here!

Updates

#1 Moved the media host

First I moved it to Google Drive, now it's on Dropbox.
Because Dropbox is like, super cool.
Google Drive is splendid though. I just like to do experiment with things. No other reason.

#2 Enhancing the script

Sometimes, when we use the mediaElement.duration or mediaElement.buffered, we see something like: INDEX_SIZE_ERR in the browser's console.
That error is related to media time range. As I observed, it happens mostly because the "late" delivery of the media data info (from the server). It will automatically stop (the error) by itself if the complete "info" is received by the browser.

To avoid that error in either audio or video example because of the network "lag", you can check first whether the mediaElement.duration is number and/or mediaElement.buffered.length is equal to 1.

For example, in this HTML5 video events testing, I typed the function update() like so:

function update() {
  $cT.html(convert(video.currentTime)); //current time
  $tT.html(convert(video.buffered.end(video.buffered.length - 1))); //total duration
};

In that function, add an if condition before the method within gets executed:

function update() {
  if (!isNaN(video.duration) || video.buffered.length === 1) { //to make sure the proper data is received
    $cT.html(convert(video.currentTime)); //current time
    $tT.html(convert(video.buffered.end(video.buffered.length - 1))); //total duration
  }
};

The !isNaN(video.duration) || video.buffered.length === 1 condition happens when the media data is "ready", sort of speak. The two conditions are bound using OR ( || ). Therefore, if either state is true, then the method will get executed.

You can also implement the AND ( && ) operator to bind the two conditions:
!isNaN(video.duration) && video.buffered.length === 1 to make sure everything's "right".

#3 Something I noticed ^{(July 17, 2014)}

Chrome (and Yandex) will start playing the video if the buffering is complete (MP4/OGG).

Update August 28, 2016: Chromium will start playing just like Firefox. It is sweetly updated.

On Firefox, video can start playing while retrieving the remaining bytes (OGG format).

Reference

Current Firefox media format support at Mozilla Developer Network
HTML5 video element explanation at W3Schools
HTML5 video element wiki at W3C

The earlier HTML5 audio doodle
At this post
You can see the audio events capturing there and the things you need to customize in the downloadable HTML.

Monkey Raptor

Monkey Raptor

Monday, July 14, 2014

jQuery: Capturing HTML5 Video Events Using addEventListener (MP4/OGG)

No comments

Post a Comment