Building HTML5 media (video, audio) controls with JavaScript

by , Oct. 19, 2010 at 08:59 PM

Scripts: html5

With te earlier versions of HTML, it was impossible to embed and play media on a webpage along without invoking third part plugins that didn't belong to HTML itself.
Here I am talking about Flash, Silverlight, Quick times, and so on...
The great HTML5 has come with handful and nice features to enrich and innovate the web applications.
One of these is the inclusion of MediaElement. (using Audio and/or video files on a webpage as we used to with images).
You do not need Flash any more to play you media on your page unless the visitors of your page still use the old browsers or so called, the non-Advanced browser.
Then you must foresee a way to a fallback for those browsers.
Not all browsers support yet HTML5 even IE8 (InternetExplorer8) doesn't support HTML5. However, Microsoft is promising to full integrate HTML5 in IE9, wich is to come.
Those browsers which support HTML5 have their custom media controls, which look differently to each other.
Here is the sketch of different controls of browsers:Native controls

If you want to build up you own customized Media controls, it is possible because HTML5 dispose Media properties, Media events you can manipulate in the DOM to control the media object and build your own media controls.


Media properties are:
"error", "src", "currentSrc", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime", "startTime", "duration", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable", "ended", "autoplay", "loop", "controls", "volume", "muted"

Media events are:
"loadstart", "progress", "suspend", "emptied","stalled", "play","pause", "loadedmetadata", "loadeddata","waiting", "playing", "canplay", "canplaythrough", "seeking","seeked", "timeupdate", "ended", "ratechange", "durationchange", "volumechange"

All these properties and events are found in the spec. of W3 from May 2010.

Now the question is how to handle all this to build a controls. Most of these properties and events are more explanatory of its own. I cannot go explaining all these events and props on here otherwise it will be worth to write up a whole book on this.
But I will try to explain some.
Note that some of the props are read-only and cannot be change in value, others can be modified.
First of all a simple example of embed a video on a webpage:

Note to wacht this movie you have to use as web-browser (Mozilla Firefox, Safari, Chrome, or IE9) because the IE7 even IE8 cannot play the MediaElement Video or Audio and many other features of HTML5.

 

With this piece of code in this HTML page you wacht this video with a native custom controls accordingly  to the browser.

  1. //Check if the event loadstart is fired
  2. var myvideo = document.getElementsByTag('video')[0];
  3. myvideo.addEventListener('loadstart', function loadStart(){
  4. alert('Start loading...');
  5. }, false);
  6.  
  7. //Check if the event loadedmetadata is fired
  8. //var myvideo = document.getElementsByTag('video')[0];
  9. myvideo.addEventListener('loadedmetadata', function loadedData(){
  10. var videoOrigWidth = myvideo.videoWidth;
  11. var videoOrigHeight = myvideo.videoHeight;
  12. alert(videoOrigWidth + ' x ' + videoOrigHeight);
  13. }, false);
  14.  
  15. //
  16. //var myvideo = document.getElementsByTag('video')[0];
  17. var loaded_div = document.getElementById('loaded');
  18. myvideo.addEventListener('progress', Progress, false);
  19. function Progress(event) {
  20. if (event.total > 0) {
  21. loaded_div.innerHTML = (Math.floor(event.loaded / event.total * 100) + "% - " + myvideo.currentSrc);
  22. setLoadProgress((event.loaded / event.total));
  23. }
  24. }

 

In the code snippet here above you see some javascript code that may control the video element in HTML. Firstly, a defining a variable to hold the video element of the DOM when this is loaded and is ready. This video element is defined as follows var myvideo = document.getElementsByTag('video')[0];

myvideo is got from DOM which keep all the video elements in this case in an array. Because we are dealing with one video element that is why we take that first element of the array.

The loadstart and loadedmetadata are events that are fired when the media is successively the media data and metadata is start loading. Metadadata are related to the information of the media, its size, its author, ...

 

  1. // define the holders of currentTime and duration of the video
  2. var myvideo = document.getElementsByTag('video')[0];
  3. var videoDuration = document.getElementById('duration');
  4. var currentTime = document.getElementById('currentTime');
  5.  
  6. // Track the timeupdate Event, this event is important because
  7. // herein you receive periodically
  8. // the current time the video or audio has played
  9. myvideo.addEventListener('timeupdate', function(e) {
  10. //split currentTime (seconds) into separate hour/minute/second strings
  11. var seconds = e.target.currentTime;
  12. var h = Math.floor(seconds / 3600);
  13. seconds = seconds % 3600;
  14. var min = Math.floor(seconds / 60);
  15. seconds = Math.floor(seconds % 60);
  16. /* pad the minute and second strings to two digits */
  17. if (seconds.toString().length < 2)
  18. seconds = "0" + seconds;
  19. if (min.toString().length < 2)
  20. min = "0" + min;
  21. videoDuration.innerHTML = e.target.duration;
  22. currentTimeDisplay.innerHTML = h + ":" + min + ":" + seconds;
  23. }, false);

 

Here the the event timeupdate is useful, because when the media start to play it will be fired automatically and periocally within several milliseconds. It return an TimeRanges Object with the propriety for currentTime wich tells how much data has been played until now, one property for the total data of the video.

To let you see how to put into practice this simple explanation of javascript how to interact with a video. Of course to markup with html and CSS is more important to give your controls a nice feel and touch.

Click on Play to play the video, Pause to pause it and << Rewind to rewind it.

 

  1. var myvideo = document.getElementsByTag("video")[0];
  2. myvideo.addEventListenenr('timeupdate', function(e){
  3. var currentT_Holder = document.getElementById('currentT');
  4. currentT_Holder.innerHTML = e.target.currentTime;
  5. }, false);
  6. <video preload width="400">
  7. <source src="HTML5/MP4/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  8. <source src="HTML5/MP4/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
  9. <source src="HTML5/MP4/video.webm" type='video/webm; codecs="vp8, vorbis"'/>
  10. Your browser does not support the <code>video</code> element.
  11. </video>
  12. <p>
  13. <input type="button" value="Play" onclick="myvideo.play();" />
  14. <input type="button" value="Pause" onclick="myvideo.pause();" />
  15. <input type="button" value="<< Rewind" onclick="myvideo.currentTime = 0;">
  16. <span id="currentT"></span>
  17. </p>

 

For a complete build up controls with javascript and some CSS styling visit this link :
Customized HTML5 controls with javascript

Available Comments :

Amo

Oct. 20, 2010 at 11:36 PM

HTML5 is great stuff

Cheap online prescription glasses

Jun. 27, 2012 at 03:47 PM

I was suggested this blog by my cousin. I am not sure whether this post is
written by him as nobody else know such detailed about my difficulty.
You are wonderful! Thanks!

Your Attention! Please do not post message with spam on this blog. We try to be cool to each other and post relevant comments and relating to the appropriated topic or entry. Let's try to get a nice conversation over here.

Leave a comment

Required!
Required!

Required!
Required!

Latest News

  • Jul. 28, 2014 at 16:12
    Gaza is in a "critical condition" and violence there must stop "in the name of humanity", the UN secretary general says.
    Read more»
  • Jul. 28, 2014 at 16:11
    The UK is to send 1,350 personnel to Poland for exercise as part of Nato initiative, defence secretary Michael Fallon has announced.
    Read more»
  • Jul. 28, 2014 at 16:05
    A man admits stealing £300,000 intended for the armed forces charity Help for Heroes.
    Read more»
  • Jul. 28, 2014 at 16:04
    Lloyds Banking Group is fined £218m for "serious misconduct" relating to a key interest rate known as Libor.
    Read more»
  • Jul. 28, 2014 at 15:57
    Lightning strikes, hail, torrential rain and flash flooding cause homes to be evacuated and bring road and rail transport to a standstill.
    Read more»
  • Jul. 28, 2014 at 15:56
    A court based in The Hague has ordered Russia to pay $50bn (£29.5bn) to former shareholders in the defunct oil producer Yukos.
    Read more»
  • Jul. 28, 2014 at 15:53
    Two data recorders from a plane that crashed in Mali last week, killing all 118 aboard, arrive in France as it begins three days of mourning...
    Read more»
  • Jul. 28, 2014 at 15:42
    Vehicles in Nigeria's north-eastern Borno state are banned for three days during Eid festivities because of fears of a Boko Haram attack.
    Read more»
  • Jul. 28, 2014 at 15:29
    Government guidance that fracking licences can only be issued for beauty spots in "exceptional circumstances" has been given a cautious welc...
    Read more»
  • Jul. 28, 2014 at 15:20
    Scotland set a new national record of 12 Commonwealth Games gold medals midway through day five in Glasgow.
    Read more»
  • Jul. 28, 2014 at 14:46
    The downing of Malaysian airliner MH17 in eastern Ukraine may constitute a "war crime", UN human rights chief Navi Pillay says.
    Read more»
  • Jul. 28, 2014 at 14:42
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Jul. 28, 2014 at 14:17
    A koala has had an extraordinary escape clinging to the bottom of a car on a busy Australian highway.
    Read more»
  • Jul. 28, 2014 at 14:15
    Russia offers 3.9m roubles ($110,000; £65,000) in a contest for ways to crack the identities of users of the Tor network.
    Read more»
  • Jul. 28, 2014 at 14:11
    Emirates Airline will stop flying over Iraq to protect its passengers from the threat of Islamic militants on the ground, according to repor...
    Read more»
  • Jul. 28, 2014 at 13:52
    Gary McKinnon, the computer hacker who was the subject of a 10-year legal battle over US extradition, reinvents himself as a search expert.
    Read more»
  • Jul. 28, 2014 at 13:34
    The best news photos from around the world in the past 24 hours
    Read more»
  • Jul. 28, 2014 at 13:12
    Most border crossings in Liberia are closed and communities hit by an Ebola outbreak face quarantine to stop the virus spreading.
    Read more»
  • Jul. 28, 2014 at 13:10
    Venezuelan official Gen Hugo Carvajal is warmly welcomed in Caracas after his release in Aruba, where he had been arrested on drug-trafficki...
    Read more»
  • Jul. 28, 2014 at 13:00
    Top Gear's Burma special in which Jeremy Clarkson used a racial term broke broadcasting guidelines, Ofcom rules.
    Read more»

Recent Comments:

Ehcjntublr

Jun. 11, 2014 at 06:06 PM

leebvfnnbovfmoebzjsbhjkf, http://www.pykbyrhrlo.com/ spdwthctlr

Natural hair care products

May. 27, 2014 at 09:05 AM

These are really great ideas in on the topic of blogging. You have touched some pleasant things here. Any way keep up wrinting.

Remedies for piles

May. 18, 2014 at 05:44 PM

Thanks for finally writing about > %blog_title% < Loved it!

Website

Mar. 25, 2014 at 08:19 PM

There are books, home study courses, workshops and other means of information, to gain the knowledge required to become the alpha leader. If you want ... Read more»

Titia

Feb. 15, 2014 at 01:48 AM

buy car insurance online prozac 40mg no rx best deals on vigra and cialis website auto insurance quoye www.evansvillecommunitytheatre.com ... Read more»

Archives:

Meet me on facebook: