HTML5 – Video and Audio

The fifth standard of HTML introduced by W3C introduced many new media elements. In the previous versions of HTML, it was a pain to add a video or audio in your webpage. It was usually achieved by adding plugins and a lot of code.

HTML5 has made it much easier by introducing media tags. These tags include

<video>, <audio>, <source>, <track> and <embed>.

How HTML5 has made things easier for use, lets checkout the following snippet.

This is code for creating a FLASH Player.

<object type="application/x-shockwave-flash"

   data="player.swf?videoUrl=myvideo.mp4&autoPlay=true"

   height="200" width="310">

   <param name="movie"

   value="player.swf?videoUrl=myvideo.mp4&autoPlay=true">

</object>

 And this is code for HTML5 Video Tag. See all above code is replaced by a line of code and it gives us a great video player.

</video>

Note: In my experience some browsers like Firefox was not running mp4 video instead it played .ogg file. so a try to include

You can convert mp4 files to ogg file format from http://media.io/.

This is video tag, its possible attributes could be:

Attributes Specification
src   to provide the URL of the video.
width  defines height of video element in pixels.
height  defines width of video element in pixels.
controls to display default video control set of browser.
autoplay  to start video automatically.
muted  to mute the video initialy.
loop  to play the video continuously in a loop.
poster  displays an image instead of first frame of video.
preload  to tell the browser how it should preload the video. It may have three values. None(no preloading), metadata(just load the metadata of video eg. timing etc) and auto(its default and lets the browser to decide by itself).

If we want to add a video which start playing automatically  and  is muted when  web page is loaded  or  we want browser to provide control set then,  just need to add the following code

</video>

In the same way you can use the other attributes as you need. We should provide height and width of video element so that it does not disturb the layout or design of the whole page. Look at the video tag’s src attribute, we want to serve a video file of mp4 format.

 If some browsers like Firefox does not run mp4 video  or if my browser doesn’t support this format or video tag? the question is how can we handle the cross browser issue? The solution of this problem depends on the placement of proper source. We can add different video type formats using multiple source elements inside video element. As you know HTML code  interpreted  browser read the code line by line so if the browser does not support html5 or any file format it will ignore what it does not understand and will move to next line where it can find a suitable format.

<video controls width="200" height="210">

<source src="myvideo.mp4" type="video/mp4">

webm" type="video/webm">

</video>

In the code above if browser does not support mp4 format it will ignore mp4 format and will pick webm format.

 Possible attributes those can be passed to source element.

Attribute Specification
src  url
type specify the type/format of the video, we can also specify the codec used to encode the video.
media  to specify the intended media, using css3 media queries

vp8" ' media="screen and(min-width:1224px)">

This tag defines a video file of webm format encoded with the codec vp8 and intended devices are desktops and laptops.

html5 vid player

HTML5 Audio Element

Before HTML5 there was not standard control for playing audio, but instead developers / designers  used some 3rd party code plugin  like flash in  their code.  But now in HTML5 an audio control is provided , which provides a standard way to embed audio inside a web control. To play audio file in HTML5 page we use audio tag liek code below.

If we add controls  attribute, browser will display play, pause, or volume controls.  We can add multiple source tags inside audio for multiple file formats so that if some file format is not supported by some browser it will move to next file format given and if it supports then will  play. Currently mp3, wav and ogg formats are supported.

HTML5 Audio formats

Tag Description
<audio> Defines sound content
<source> Define multiple source elements for audio or video plugin

There are other events that can notify when an audio is paused or or played.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.