HTML <video> tag

The <video> tag is used to embed video media play-back in a webpage. It also contain audio files associated with the video. This tag is new in HTML5.

Type: Block Element

Example of <video> tag

<video>
--- audio file ---
</video>

Supported audio files

Upto now, three video file formats (.mp4, .webM, .ogg) are supported in HTML5.

Format Chrome Internet Explorer Firefox Safari Opera Mini
.mp4 Yes Yes 21.0 or higher Yes 25.0 or higher
.webm No Yes Yes No Yes
.ogg No Yes Yes No Yes

MIME types for audio formats

Video file format MIME-type
.mp4 video/mp4
.webm video/webm
.ogg video/ogg

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<audio> 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="300" height="200" controls>
  <source
    src="demo.mp4"
    type="video/mpeg">
  Your browser does not support this video file.
 <audio>
</body>
</html>
Run The code »

Output on the browser

Since the <video> element is a block element, each video control is displaying on the different line (occupying maximum space). The controls attribute in the video element includes built-in controls such as Pause, Play, and Volume control. .

Attributes of <video> tag

Attribute Value Notes
autoplay autoplay It specifies whether the video playback should start automatically after page loading.
controls controls It defines the control button (like Pause, Play) of a video playback
height pixels It specifies the height of the video player.
loop loop It defines that the video playback should repeat automatically and continuously.
muted muted It defines that the video playback should be muted keeping the volume at 0.
poster URL It is used to display the picture of the downloaded video
or It defines the thumbnail until the user plays the video.
preload auto
metadata
none		 It defines whether the video playback should play again according to its value when the page is refreshed.
src URL It specifies the URL (or simply the location) of the audio file.
width pixels It specifies the width of the video player.
To define your HTML document is Version5, be sure to add <!DOCTYPE html> at the beginning.
  1. autoplay attribute

    It is a boolean attribute. If it is specified to the <video> element, the video will play automatically as soon as the page is loaded. At least, don't try to use the this attribute because the visitors may retract from your site since autoplay is an annoying thing. In XHTML, the autoplay attribute is defined as:
    <video autoplay="autoplay">

    Syntax of autoplay attribute

    <video autoplay>

    Example of autoplay attribute

    <video autoplay>
  <source src="movie.mp4" type="video/mp4">
  Your Browsers does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    autoplay 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher
  2. controls attribute

    It is a boolean attribute. If it present, the video element will show Pause, Play button and Volume Stabilizer. Be sure to add this attribute for any embedded video to allow the users operating the video files.
    In XHTML, the controls attribute is defined as:
    <video controls="controls">

    Syntax of controls attribute

    <video controls>

    Example of controls attribute

    <video controls>
  <source src="movie.mp4" type="video/mp4">
  Your Browsers does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    controls 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher
  3. height attribute

    It specifies the height of the video player. Always use this attribute with the width attribute.

    Syntax of height attribute

    <video height="pixels" >

    Example of height attribute

    <video width="300" height="200" controls>
  <source src="movie.mp4" type="video/mp4">
  Your Browsers does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    height Yes Yes Yes Yes Yes
  4. loop attribute

    It defines the video playback should repeat automatically and infinitely.
    In XHTML, the loop attribute is defined as:
    <video loop="loop">

    Syntax of loop attribute

    <video loop>

    Example of loop attribute

    <video loop>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    loop 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher
  5. muted attribute

    It is a boolean attribute.If present, the video playback should not produce any sound (like at 0 Volume). By default, the volume of the muted attribute is 0(zero).
    In XHTML, the muted attribute is defined as:
    <video muted="muted">

    Syntax of muted attribute

    <video muted>

    Example of loop attribute

    <video muted>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    muted 4.0 or higher 10.0 or higher 11.0 or higher 7.0 or higher 10.5 or higher
  6. poster attribute

    It is used to display the picture of the downloaded video. Also, it is used to display the video-image till the video start. If it is not specified, the first frame of the video will be used instead.

    Syntax of poster attribute

    <video poster="URL">

    Example of poster attribute

    <video poster="thumbnail.png"> 
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    poster 4.0 or higher 9.0 or higher 3.6 or higher 4.0 or higher 10.5 or higher
  7. preload attribute

    It is used to define the behaviour of the video with the loading of the page. Don't use this attribute if "autoplay" attribute is used. Three possible values are
    1. auto: It defines that the video should not be preloaded. It consumes more data.
    2. metadata: It defines that the only video metadata (e.g. length, size) is fetched.
    3. none: It defines that the entire video should not be preloaded.

    Syntax of preload attribute

    <video preload="auto | metadata | none">

    Example of preload attribute

    <video preload="none"> 
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    preload 4.0 or higher Not supported 4.0 or higher 4.0 or higher 10.5 or higher
  8. src attribute

    It is used to specify the URL of the video file. When you use the src attribute directly inside the <video> tag, you can specify only one video format, such as .mp4, .webm, or .ogg. For example: 

    <video src="URL" >

    However, some browsers do not support certain formats. For example, the .ogg format is not supported in Safari, so the video will not play in that browser. To ensure better browser compatibility, it is recommended to place the src attribute inside multiple <source> elements. This allows the browser to automatically select a video format that it supports.

    Example of src attribute

    <video controls>

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

  <source src="movie.webm" type="video/webm" >

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

</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    src 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher
  9. width attribute

    It specifies the width of the video player. Always use this attribute with the height attribute.

    Syntax of width attribute

    <video width="pixels" >

    Example of width attribute

    <video width="300" height="200" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support this video format.
</video>

    Supported Browsers

    Attribute Chrome Internet Explorer Firefox Safari Opera Mini
    width Yes Yes Yes Yes Yes