Tutorial on Video tag in HTML

HTML5 also supports the <video> tag. Video tags are used to play video files such as movie clips, song clips on web pages.

Currently,

three video formats for video tags in HTML are supported:

  1. mp4
  2. webM
  3. ogg

The table below specifies which web browser supports the video file format.

Mp4 webM ogg Browser name
Yes No No ie browser Internet Explorer
Yes Yes Yes chrome browser Google Chrome
Yes Yes Yes firefox browser Mozilla Firefox
No Yes Yes opera browser Opera
Yes No No safari browser Apple Safari
  • Android also supports mp4 format.

Example for Video tag in HTML

The following code uses the video tag to play the mp4 file.

<video  controls >

  <source  src = ”movie.mp4 ″ type =” video / mp4 ″ >

  Your browser does not support the html video tag.

</video>

In the following example, a video tag is used to play the ogg file.

<video  controls >

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

  Your browser does not support the html video tag.

</video>

Backup browsers

Element name chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<video> Yes Yes Yes Yes Yes

Features of Video tag in HTML

The table below shows a list of features or attributes of the video tag in HTML 5.

Description Feature name
Defines video controls that are displayed with play / stop buttons. controls
Used to adjust the height of the video player. height
Used to adjust the width of the video player. width
Specifies an image to display on the screen when the video does not play. poster
Specifies that the video start playing as soon as it is ready. autoplay
Specifies that the file be replayed each time the video is played. loop
Used to mute video audio. muted
Specifies the author’s opinion for uploading the video file when loading the page. preload
The URL specifies the source of the video file. src

Example of Video tag feature in HTML

The following example shows a video tag in HTML that uses the attributes height, width, autoplay, controls, and loop.

<video  width = ”320 ″ height =” 240 ″ controls autoplay loop >

  <source  src = ”movie.mp4 ″ type =” video / mp4 ″ >

  Your browser does not support the html video tag.

</video>

MIME types for video format in HTML

The available MIME type for the video tag is given in the table below.

MIME type Video format
video / mp4 mp4
video / ogg Ogg
video / webM webM

Leave a Reply

Your email address will not be published. Required fields are marked *