Scribd
Upload
142 views7 pages

HTML Video Element Guide

The HTML <video> element is used to display videos on web pages. It contains the <source> element to specify different video file formats and a fallback message for browsers that do not support <video>. Attributes like width, height, controls, autoplay, and muted can be added. The <video> element supports MP4, WebM, and Ogg formats and its functionality can be controlled through JavaScript methods, properties and events.

Uploaded by

Name 4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
142 views7 pages

HTML Video Element Guide

The HTML <video> element is used to display videos on web pages. It contains the <source> element to specify different video file formats and a fallback message for browsers that do not support <video>. Attributes like width, height, controls, autoplay, and muted can be added. The <video> element supports MP4, WebM, and Ogg formats and its functionality can be controlled through JavaScript methods, properties and events.

Uploaded by

Name 4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML 

Video
❮ PreviousNext ❯

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

Example
Courtesy of Big Buck Bunny:

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="[Link]" 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="[Link]" 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="[Link]" 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

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

You might also like