HTML Video - W3Schools

Trang chủ » Html5 Video Alternative » HTML Video - W3Schools

Có thể bạn quan tâm

HTML Video ❮ Previous Next ❯

The HTML <video> element is used to show a video on a web page.

Video

Example

Courtesy of Big Buck Bunny:

Your browser does not support HTML5 video. Try it Yourself »

The HTML <video> Element

To show a video in HTML, use the <video> element:

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> Try it Yourself »

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

Example

<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Try it Yourself »

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add muted after autoplay to let your video start playing automatically (but muted):

Example

<video width="320" height="240" autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element.

Element
<video> 4.0 9.0 3.5 4.0 10.5

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML Video - Media Types

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal Your browser does not support HTML5 video.

Video courtesy of Big Buck Bunny.

Try it Yourself »

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in media players
❮ Previous Next ❯ ★ +1 Sign in to track progress

Từ khóa » Html5 Video Alternative