Video on the Web
Until now, there is still no standard for displaying video on a Web page.
Today, most videos are displayed via plugins (such as Flash). However, not all browsers have the same plugin.
HTML5 provides a standard way to include video through the visual element.
Video format
Currently, the video element supports three types of videos:
format |
IE |
Firefox |
Opera |
Chrome |
Safari |
Ogg |
No |
3.5+ |
10.5+ |
5.0+ |
No |
MPEG 4 |
9.0+ |
No |
No |
5.0+ |
3.0+ |
WebM |
No |
4.0+ |
10.6+ |
6.0+ |
No |
ogg = ogg file with Theora video encoding and Vorbis audio encoding
MPEG4 = MPEG 4 file with H + video encoding and AAC audio encoding
WebM = WebM file with VP8 video encoding and Vorbis audio encoding
How it works
To display the video in HTML5, all you need is:
<video src="movie.ogg" controls="controls"></ Video>
Tiy
The control property is used to add play, pause, and volume controls.
It's also a good idea to include width and height attributes.
The content inserted between <video> and </video> is displayed for browsers that do not support the video element:
Instance
<video src="movie.ogg" width=" height=" controls= "controls">Your Browser does not support the video Tag. </video>
Tiy
The above example uses an Ogg file for Firefox, Opera, and Chrome.
To ensure that the video file must be of type MPEG4 for Safari browser.
The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognizable format:
Instance
<video width=" the"height=" -"controls="Controls"> <source src="Movie.ogg"Type="Video/ogg"> <source src="Movie.mp4"Type="Video/mp4">Your Browser does not support the video tag.</video>
Tiy
Internet Explorer
Internet Explorer 8 does not support video elements. In IE 9, support for video elements that use MPEG4 is provided.
Properties of the <video> tag
Properties |
value |
Description |
AutoPlay |
AutoPlay |
If this property appears, the video plays as soon as it is ready. |
Controls |
Controls |
If this property appears, the control is displayed to the user, such as the play button. |
Height |
Pixels |
Sets the height of the video player. |
Loop |
Loop |
If this property appears, the media file starts playing again when it finishes playing. |
Preload |
Preload |
If this property appears, the video loads when the page loads and prepares to play. If you use "autoplay", the property is ignored. |
Src |
Url |
The URL of the video to play. |
Width |
Pixels |
Sets the width of the video player. |
HTML 5 Video