Video tag <video>

Initially in HTML, we used plugins to show video on webpages. These plugins were different for different browsers. However, in HTML5 , we have a video element . Adding video on your site is now as easy as adding a hedding in your site. Lets see how :-

<video src='music.ogg' controls='controls'>
</video>

The control attribute gives controls like pause, play and volume controls. Several other attributes like width and height of the video window can also be set. Moreover, we can put any message between the opening and closing tags. This message will be displayed if the browser doesn't support Video.

<video src='music.ogg' controls='controls'>
Sorry, your browser doesn't support Video tag 
</video>

However, only three types of video file are supported by browsers. So, it may be so that a particular file format in not supported by all the browsers. So, we usually give all the three formats of video as source. The browser will show the first recognizable format of video. Here is an example :-

<video width='320' height='240' controls='controls'>
  <source src='music.mp4' type='video/mp4' />
  <source src='music.webm' type='video/webm' />
  <source src='music.ogg' type='video/ogg' />

Your browser does not support the video tag.
</video>

The example above tries to implement all the three file formats and display the message if none of them are compatible.

Besides, we also have attributes like autoplay which causes the video to play as soon as its get loaded. Setting loop attribute make it to replay the video once it has finished playing.

<video width='320' height='240' controls='controls' autoplay='autoplay' loop='loop'>
  <source src='music.mp4' type='video/mp4' />
  <source src='music.webm' type='video/webm' />
  <source src='music.ogg' type='video/ogg' />

Your browser does not support the video tag.
</video>

The Video now starts as soon as it gets loaded and continues till paused.

Lets move to audio tag now.

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review

Continue >>>