HTML Video

A video player can be added to a web page with the <video> tag.  The video file to play is specified with a src attribute, or a nested <source> tag. Supported video file formats include mp3, webm, and ogg.

HTML Tutorial

Example

A <video> element.

<video width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
  Please upgrade your browser to view videos.
</video>

Code Explanation

The <video> tag creates a video display.

The controls attribute adds play, pause, timer, volume, and other controls.

The size of the video display is controlled with the width and height attributes.

The <source> tags set the video files to play and their media types. The browser selects the first recognized format.

If the browser does not support the <video> tag, then the text inside the tag displays.

For more information on <video>, see our HTML video Tag Reference.


Autoplay

Adding the autoplay attribute will play the video as soon as the page is loaded.
Note: autoplay is disabled on this page. To see it in action click the 'Try it live' button.

<video width="320" height="240" controls autoplay>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
 Please upgrade your browser to view videos. 
</video>

File Formats

HTML supports three video formats: MP4, WebM, and OGG.
Their media types are video/mp4, video/webm, and video/ogg respectively.

Not all browsers support all video formats. Here's a list:

Browser MP4 WebM OGG
Chrome
Yes Yes Yes
Firefox
Yes Yes Yes
IE/Edge
Yes No No
Opera
Yes Yes Yes
Safari
Yes No No

Video DOM

The <video> element exposes a DOM (Document Object Model) that allows programmatic control of the video. This example shows how to play, pause, and resize (normal, big, small) a video with JavaScript.



<button class="btn" onclick="playPause()">Play/Pause</button>
<button class="btn" onclick="makeNormal()">Normal</button>
<button class="btn" onclick="makeBig()">Big</button>
<button class="btn" onclick="makeSmall()">Small</button>

<br><br>
<video id="myvideo" width="420">
    <source src="/media/movie.mp4" type="video/mp4">
    <source src="/media/movie.ogg" type="video/ogg">
  Please upgrade your browser to view videos.
</video>

<script>
  var element = document.getElementById("myvideo");

  let playPause = () => {
    if (element.paused)
      element.play();
    else
      element.pause();
  }

  let makeBig = () => {
    element.width = 560;
  }

  let makeSmall = () => {
    element.width = 320;
  }

  let makeNormal = () => {
    element.width = 420;
  }
</script>

Video Tracks

The <track> tag specifies a timed text track, such as subtitles and headlines.
Track files are WebVTT (.vtt)formatted. Here's a track with subtitles.

<video width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
  <track src="/media/movie.vtt" kind="subtitle" srclang="en" />
  Please upgrade your browser to view videos.
</video>

Browser Support

Here is when <video> support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
IE/Edge
9.0 Mar 2011
Opera
10.5 Feb 2010
Safari
4.0 Jun 2009

You may also like

Video courtesy: Blender Foundation, www.bigbuckbunny.org

Guides