Today most videos are shown by plug-ins like flash or Silverlight but all browsers did not support same plug-ins. HTML5 specifies a standard way to support video using video element. The formats which are supported by video elements are Ogg, MPEG4 or WebM.

  1.        Ogg = Ogg files with theora video codec and vorbis audio codec.
  2.        MPEG4=MPEG4 files with H.264 video codec and AAC audio codec.
  3.        WebM=WebM files with VP8 video codec and vorbis audio codec.
Syntax

<video src=”file name with location” controls=”controls to be used”></video>

Video attributes:
  1.     src: In this attribute we have to pass the source of movie clip.
  2.   Width: In this attribute we can pass width of video.
  3.   Loop: If video has finished it will start again.
  4.   Height: Set the height of the video.
  5.   Poster: Video image that specifies the video.
  6.   Autoplay: Specifies whether or not to start playing the video as soon as it can do so without stopping.
  7.   Preload: Specifies video should be preloaded or not.
  8.   Controls: Specifies control button display(play, pause or stop button etc).
Following sample represent use of video element in html5
<!DOCTYPE HTML>       
<html>
<body>
    <video width="600" height="300" controls="controls">
       <source src="Video/sample.mp4" type="video/mp4" />      
    </video>
</body>
</html>
Output of following code snippet is as follows

Video element in HTML5

 Note: This code snippet is supported by Google Chrome and Mozilla Firefox4


Leave Comment