HTML5 Video Tag

Modern Internet, we use a lot of video, in the HTML5 definition provides a unified way to display video content.

Internet video

Now most of the Internet video use Flash to achieve. However, different browsers may use different plugins.

HTML5 defines a unified element to specify the insertion and display of video and audio, as follows: 5 years of well-developed UI front-end framework!

<video width= "height=" controls= "Controls" id= "Gbin1" > <source src= "movie.mp4" type= "Video/mp4"/ > <source src= "Movie.ogg" type= "Video/ogg"/> Your Browser does not support the video tag.</video>

 

Of course, we also need to add height and width if necessary. If the height and width settings are set, the size of the area for the video after the page is loaded is reserved. If there are no related high and wide attributes, the browser does not reserve the display video area correctly. The effect is that the page layout may change during page loading.

You should add text content between the <video> and </video> element content to ensure that the browser does not support the video tag. The page can display the correct text.

The video tag allows multiple <source> elements to be added. These elements can be linked to different video files. Of course, the browser will use the first recognized format.

Property

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 ", this property is ignored.
src	url	The URL of the video to play.
Width	pixels	Sets the width of the video player.

Video and audio format support

Currently,<video> tags support 3 types of file formats: MP4, WEBM and Ogg. 5 years of well-developed UI front-end framework!

HTML5 Video Tag