HTML5 Video Tag

HTML5 <video> tag give an standard to play video on the web.

  • <video> tag is new in HTML5. But streaming of videos on the web is not new.
  • YOUTUBE is one of the example of streaming video on the web successfully.
  • Like <audio> tag, <video> also take source path.
  • <video> tag view is different on different browsers.
Syntax :
<video width="320" height="240" controls>
 <source src="media/video.MP4" type="video/mp4">
 <source src="media/video.ogg" type="video/ogg"\>
 <source src="media/video.webm" type="video/ogg"\>
Your browser does not support the video tag.
</video\>
Output :
		
		

Supported video format in different Browsers

Browser H.264+AAC+MP4 WebM Theora+Vorbis+ogg
Google Chrome
Mozilla Firefox
Apple Safari
Opera
Internet Explorer

Attribute used in <video> tag

  1. autoplay : autoplay used to play the audio files on the time of web page loading.
  2. autobuffer : autobuffer used to stream the audio on the time of loading.
  3. controls :controls used to give functionality of play back, play/pause and volume up/down.
  4. height : height used to give the height of video frame.
  5. width: width used to give the width of the video frame.
  6. poster: poster used to show the iamge on video frame before stream the video.
  7. loop :loop used to repeat that audio file many times.
  8. preload : preload used to load the audio file same as autoplay.
  9. src : src used to give the source path of audio file.

View of <video> tag in different Browsers

  • In Google Chrome
  • Chrome

  • In Mozilla Firefox
  • Firefox

  • In Mozilla Opera
  • Opera

  • In Apple Safari
  • Not support the video tag.

  • In Internet Explorer
  • Not support the video tag.