video HTML

HTML <video> Tag

For streaming a video file on a web page the HTML <video> tag is used. It supports three video formats currently, mp4, webM and ogg.

List of different video file format supported by the browsers:

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES

Example:

<!DOCTYPE html>
<html>
<body>
<h3>Example:</p>
<video width="300" height="200" controls>
  <source src="mov123.mp4" type="video/mp4">
  <source src="mov123.ogg" type="video/ogg">
</video>
</body>
</html>

Output:

Explanation:

In the above example, we used the HTML <video> tag to stream a video file on an HTML page.

Tag specific Attributes:

Attribute Value Uses
autoplay autoplay Used to indicate that the video will start playing automatically when it is ready to play.
controls controls Used to indicate that the video controls should be displayed.
height pixels Used to define the height of the video player.
loop loop Used to indicate that when finished, the video will start over again each time.
muted muted Used to indicate that the audio output of the video is muted.
poster URL Used to render an image when the video downloads, or until the user hits the play button.
preload auto

metadata

none

Used to determine if and how the author thinks the video should be loaded when the page loads.
src URL Used to define the URL of the video file.
width pixels Used to define the width of the video player.

MIME Types for HTML Video format:

Video Format MIME Type
MP4 video/mp4
Ogg video/ogg
WebM video/webM

Global Attributes:

The HTML Global attributes are supported by the HTML <video> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <video> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share