Until now, there was no standard for displaying videos on web pages.
Today, most videos are displayed through plug-ins (such as Flash). However, not all browsers have the same plugins.
HTML5 specifies a standard way to include video through the video element.
HTML5 (Video) - How it works
To display a video in HTML5, all you need is:
Example# The ##
php中文网
您的浏览器不支持Video标签。
element provides play, pause, and volume controls to control the video.
At the same time, the
element element also provides width and height attributes to control the size of the video. If the height and width are set, the required video space will be reserved when the page is loaded. . If these properties are not set and the browser does not know the size of the video, the browser will not be able to reserve a specific space when loading, and the page will change based on the size of the original video.
The content inserted between the and tags is provided for display by browsers that do not support the video element.
The element supports multiple elements. The element can link different video files. The browser will use the first format it recognizes:
Video formats and browser support
Currently, the element supports three video formats: MP4, WebM, and Ogg :
MP4 = MPEG 4 file with H.264 video encoding and AAC audio encoding
WebM = WebM file with VP8 video encoding and Vorbis audio encoding
Ogg = Ogg file with Theora video encoding and Vorbis audio encoding
Video format
HTML5 - Control using the DOM
HTML5 The and elements also have methods, properties and events.
The methods, properties, and events of the and elements can be controlled using JavaScript.
The methods include play, pause, and load. The properties (such as duration, volume, etc.) can be read or set. The DOM events can notify you that, for example, the element has started playing, has been paused, has been stopped, etc.
The simple method in the example shows us how to use the element, read and set attributes, and how to call methods.
php中文网
播放/暂停 放大 缩小 普通 您的浏览器不支持 HTML5 video 标签。
HTML5 Video Tag
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
