Posts in current category

HTML5 Video (Video)

May 03, 2021 13:05 HTML5

Table of contents

HTML5 Video

In this section, you'll learn how video works in HTML5, the video formats supported by mainstream browsers, and how to control video on a web page.

Many sites use video. HTML5 provides the standard for displaying video.

To detect if your browser supports HTML5 video:

Video on the Web site

Until now, there was no standard for displaying video on a Web page.

Today, most videos are displayed through plug-ins such as Flash. However, not all browsers have the same plug-in.

HTML5 provides a standard way to include video through video elements.

Browser support

HTML5 Video (Video) HTML5 Video (Video) HTML5 Video (Video) HTML5 Video (Video) HTML5 Video (Video)

Internet Explorer 9 Plus, Firefox, Opera, Chrome, and Safari support this element.

Note: Internet Explorer 8 or earlier versions of IE do not support the element.

HTML5 (Video) - How it works

To display a video in HTML5, all you need is:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">

Try it out . . .

The element provides playback, pause, and volume controls to control the video.

At the same time, the element also provides the width and height properties to control the size of the video. I f you set the height and width, the desired video space is preserved when the page loads. If you don't set these properties, the browser doesn't know the size of the video, the browser can no longer load when it retains a specific space, and the page changes depending on the size of the original video.

The content inserted between the label and the label is provided to browsers that do not support video elements.

The element supports multiple elements. E lements can link different video files. The browser will use the first recognizable format:

Video format with browser support

Currently, the elements support three video formats: MP4, WebM, and Ogg:

浏览器 MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO 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

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 - Use DOM for control

HTML5 and the elements also have methods, properties, and events.

The methods, properties, and events of the elements can be controlled using JavaScript.

Methods include playing, pausing, loading, and so on. P roperties such as length of time, volume, etc. can be read or set. One of the DOM events can notify you, for example, that the element starts playing, pauses, stops, and so on.

The simple method in the example shows us how to use the element, read and set properties, and how to call a method.

Instance 1

Create simple play/pause and resize controls for videos:

HTML5 Video (Video)
HTML5 Video (Video)

The example above calls two methods: play() and pause(). It uses two properties at the same time: paused and width.

Try it out . . .

HTML5 Video tag

标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如<video> 和<audio>
<track> 定义在媒体播放器文本轨迹

Related articles

HTML DOM Reference Manual: HTML DOM Video Object