HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Audio (Audio)HTML5 Geolocation

HTML5 Video(Video)

HTML <video> is for HTML 5+, used to define online video streaming media.

HTML5 Video(Video)

Many sites will use video. HTML5 Provides standards for displaying videos.

Detect if your browser supports HTML5 Video:

Videos on Web Sites

Until now, there is no standard aimed at displaying videos on the web.

Today, most videos are displayed through plugins (such as Flash). However, not all browsers have the same plugins.

HTML5 Specifies a standard method for embedding videos using the video element.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

Note: Internet Explorer 8 Or earlier versions of IE do not support the <video> element.

HTML5 (Video)- How it works

To play a video in HTML5 displaying the video, all you need is:

Online Example

Example

<video width="320" height="240" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
Your browser does not support the Video tag.
</video>

Test to see ‹/›

The <video> element provides play, pause, and volume controls to control the video.

At the same time, the <video> element also provides width and height properties 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, the browser does not know the size of the video, and the browser cannot reserve a specific space when loading, and the page will change according to the original size of the video.

<video> and</The content inserted between the <video> tags is provided for browsers that do not support the video element.

<video> elements support multiple <source> elements. The <source> element can link to different video files. The browser will use the first recognizable format:

Video format and browser support

Currently, the <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 = H.264 MPEG with video encoding and AAC audio encoding 4 file
WebM = VP video encoding8 WebM files with VP video encoding and Vorbis audio encoding
Ogg = Ogg files 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 　The <video> and <audio> elements also have methods, properties, and events.

The methods, properties, and events of the <video> and <audio> elements can be controlled using JavaScript.

The methods are used for playback, pause, and loading, etc. The properties (such as duration, volume, etc.) can be read or set. The DOM events can notify you, for example, that the <video> element has started playing, paused, stopped, and so on.

The simple method in the example demonstrates how to use the <video> element, read and set properties, and how to call methods.

Online Example 1

Create a simple playback for video/Pause and size control:

The above example calls two methods: play() and pause(). It also uses two properties: paused and width.

For more references, please see HTML5 Audio/Video DOM Reference Manual.

HTML5 Video Tag

Tag	Description
<video>	Defined a video
<source>	Defined multiple media resources, such as <video> and <audio>
<track>	Defined in the text track of the media player

HTML5 Audio (Audio)HTML5 Geolocation