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

src = "myvideo..ogg"

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 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.

<audio controls>
   <source src="myaudio.ogg" type="audio/ogg">
   <source src="myaudio.mp3" type="audio/mpeg">
 </audio>

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.