HTML5 Video (Video)
Many sites will use to video. HTML5 provides a standard video display.
Detect your browser supports HTML5 video:
Video Web site
Until now, still does not exist a standard aimed at video display on the page.
Today, most video through the plug-ins (such as Flash) to be displayed. However, not all browsers have the same plugins.
HTML5 specifies a standard way to include video through the video elements.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support <video> element.
Note: Internet Explorer 8 or earlier versions of IE do not support the <video> element.
HTML5 (video) - How it works
To display video in HTML5, all you need is:
Examples
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<Video> element provides the play, pause and volume controls to control the video.
At the same time <video> element element also provides height and width attributes control the dimensions of the video. If you set the height and width of the required video space will be retained when the page loads. . If you do not set these properties, the browser does not know the size of the video, the browser you can not reserve a specific space when loaded, the page will be based on the original video size change.
<Video> between </ video> tag and inserted content is not available to support the video elements displayed in the browser.
<Video> element supports multiple <source> element. <Source> elements can link to different video files. The browser will use the first recognized format:
Video formats and browser support
Current, <video> element supports three video formats: MP4, WebM, and Ogg:
Browser | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (from Opera 25 onwards) | YES | YES |
- MP4 = MPEG 4 files with H.264 video and AAC audio encoding
- WebM = WebM files with VP8 video and Vorbis encoded audio coding
- Ogg = Ogg files with Theora encoded video and Vorbis encoded audio
Video Format
格式 | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML5 <video> - to control the use of DOM
HTML5 <video> and <audio> element also has methods, properties, and events.
Methods <video> and <audio> elements, properties, and events can be controlled using JavaScript.
Which methods are used to play, pause, and load and so on. Wherein the properties (such as duration, volume, etc.) can be read or set. Wherein DOM event can inform you that, say, <video> element start playing, paused, stopped, and so on.
Examples of simple method, we demonstrate how to use the <video> element, read and set properties, and how to invoke methods.
Example 1
Creating a simple play / pause the video and resize controls:
The above example calls two methods: play () and pause (). It also uses two properties: paused and width.
See the reference for more HTML5 Audio / Video DOM Reference Manual .
HTML5 Video tag
标签 | 描述 |
---|---|
<video> | 定义一个视频 |
<source> | 定义多种媒体资源,比如 <video> 和<audio> |
<track> | 定义在媒体播放器文本轨迹 |