bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/HTML/Graphics, Media, and Browser Features
HTML•Graphics, Media, and Browser Features

HTML Video

Concept visual

HTML Video

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

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.

Formula

The HTML < video > Element

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

Example

<video width="320" height="240" controls>

Formula

< source src ="movie.mp4" type ="video/mp4">
< source src ="movie.ogg" type ="video/ogg">

Your browser does not support the video tag. </video>

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.

Formula

HTML < video > Autoplay

To start a video automatically, use the autoplay attribute:

Example

<video width="320" height="240" autoplay>

Formula

< source src ="movie.mp4" type ="video/mp4">
< source src ="movie.ogg" type ="video/ogg">

Your browser does not support the video tag. </video>

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>

Formula

< source src ="movie.mp4" type ="video/mp4">
< source src ="movie.ogg" type ="video/ogg">

Your browser does not support the video tag. </video>

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

Previous

HTML Canvas Code Challenge

Next

HTML Geolocation API