Many sites will use video. HTML5 provides a standard for displaying videos.
11.38.1. Check if your browser supports HTML5 video: ¶
Detection
Videos on Web sites ¶
Until now, there is still no standard for displaying videos on the web.
Today, most videos are displayed through plug-ins such as Flash. However, not all browsers have the same plug-in.
The HTML5 stipulates a way to pass the
video
Element to contain video.
Browser support ¶
Internet Explorer 9 support, Firefox, Opera, Chrome, and Safari support
<video>
element。
Note: Internet Explorer 8 or earlier IE versions do not support
<video>
element.
HTML5 (Video)-how to work ¶
To display video in HTML5, all you need is:
11.38.2. Example ¶
<videowidth="320"height="240"controls><sourcesrc="movie.mp4"
type="video/mp4"><sourcesrc="movie.ogg"type="video/ogg">
Your browser does not support Video tags.</video>
<video>
element provides playback, pause, and volume controls to control the video.
meanwhile
<video>
The element also provides the
width
and
height
property controls the size of the video. If the height and width are set, the required video space will be retained during page loading. If these properties are not set, the browser will not know the size of the video, and the browser will not be able to retain specific space when loading, and the page will change according to the size of the original video.
<video>
and
</video>
the content inserted between tags is provided to unsupported
video
displayed by the browser of the element.
<video>
element supports multiple
<source>
element。
<source>
elements can be linked to different video files. The browser will use the first recognized format:
Video format 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) |
YES |
YES |
-
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 ¶
|
Format |
MIME-type |
|---|---|
|
MP4 |
Video/mp4 |
|
WebM |
Video/webm |
|
Ogg |
Video/ogg |
HTML5 < video >-use DOM for control ¶
HTML5
<video>
and
<audio>
elements also have methods, properties, and events.
<video>
and
<audio>
the methods, properties, and events of an element can be controlled using JavaScript.
The methods are used to play, pause, load, and so on. The properties (such as duration, volume, etc.) can be read or set. One of the DOM events can notify you, for example
<video>
the element starts playing, pauses, stops, and so on.
The simple method in the example shows us how to use the
<video>
element, read and set properties, and how to call methods.
11.38.3. Example 1 ¶
Create simple playback / pause and resize controls for the video:
Play / pause zoom in and out normal your browser does not support HTML5 video.
The above example calls two methods:
play
()
and
pause()
. It uses two properties at the same time
paused
and
width
.
HTML5 Video tag ¶
|
Label |
Description |
|---|---|
|
< video > |
Define a video |
|
<source> |
Define multiple media resources, such as < video > and < audio > |
|
< track > |
Defined in the media player text track |