HTML5 Video



Video Player In HTML5

There has been no standard to show videos on webpage.The provision of video has been facilitated by flash video(.flv) file format.HTML5 includes the support of video on web.

Advantage Of HTML5 Over HTML4.01

HTML5 includes a video tag.

HTML5 Video Formats Supported

Several browsers have started supporting the video element of HTML5.But only 3 video formats are supported by the major browsers.

Browser Ogg Mpeg4 WebM
Chrome10.0 yes yes yes
Firefox4.0 yes no yes
IE9 no yes no
Safari3.0 no yes no
Opera10.5 yes no yes

Working Of Video Tag

Here is the code to play a video file.

<html>
<video width="300" height="190" controls="controls"
src="/magic.webm"/>
 
If you are reading this, it is because your browser does not 
support the HTML5 video tag. 
</video>
</html>

The above will work only in chrome10.0,firefox 4.0,opera 10.5.But will not work in Internet Explorer because it does not support WebM format.

IE9 only supports Mpeg4.So we change the code to make it work in all browsers.The modified code is:

<html>
<video height="190" width="300" controls="controls">
<source src="/magic.ogg"  type="video/ogg"/>
<source src="/magic.webm" type="video/webm"/>
<source src="/magic.mp4"  type="video/mp4"/>
 
If you are reading this, it is because your browser does not
support the HTML5 video tag.
</video>
</html>

The browser picks one of the three formats available and plays the audio file.Click on the play button and listen to the song.



HTML5 Video:The Control Attribute

The control attribute of HTML5 specifies the browser to display the standard playback controls.There are various attributes in HTML5.

Attribute Detail
controls Specifies the controls such as volume
autoplay Plays the video automatically
audio Defining the default state,only muted is allowed
height Sets the height of the video player
width Sets the width of the video player
src Specifies the url of the audio
preload Specifies url of the image representing the video

Related HTML5 topics:

  • HTML5 Web Storage

  • HTML5 Introduction





good post sir