Home > DeveloperSection > Articles > Video element in HTML5

Video element in HTML5


HTML5 HTML5 
Ratings:
0 Comment(s)
 2948  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.

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

 


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

Follow MindStick