HTML Video

[Guest]

HTML Video


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


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














★
+1

Reference: https://www.w3schools.com/html/html5_video.asp