Home > DeveloperSection > Beginner > Video element in HTML5

Video element in HTML5

0 Comment(s)
 2896  View(s)
Rate this:

Video element in HTML5

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.


<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




    <video width="600" height="300" controls="controls">

       <source src="Video/sample.mp4" type="video/mp4" />      




Output of following code snippet is as follows

Video element in HTML5


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


Don't want to miss updates? Please click the below button!

Follow MindStick