HTML Videos

video tag in html

HTML-5 introduces a <video> tag to embed a video with multiple formats.

It is a standard way to embed videos on HTML pages. <video> element enable you to specify multiple formats of video files using the <source> tag.

If a browser doesn't support the first filetype then the browser will try the next file type specified in <source> tag.

HTML <video> tag - Example

<video width="400px" height="250px">
  <source src="video.mp4" type="video/mp4"></source>
  <source src="video.ogg" type="video/ogg"></source>
</video>

Note: Important aspect about video that all browser doesn't support the same video file. So HTML-5 creates a new element <video> that works with multiple formats.

HTML <video> - width and height

To specify the width and height of the video, <video> tag supports width and height attribute to specify width and height.

If we don't specify width and height attribute with <video> tag, then page flickers while video loads.

HTML <source> tag

<source> tag is used to specify multiple source file for the video elements and specify the media types.

HTML <video> autoplay

To automatically play the video as page finish loading use the autoplay attribute of <video> tag.

<video width="400px" height="250px" autoplay>
  <source src="video.mp5" type="video/mp4"></source>
  <source src="video.ogg" type="video/ogg"></source>
</video>

HTML video tag - controls

To show the control (pause/play), toggle fullscreen and volume control use the attribute control of <video> tag.

<video width="400px" height="250px" controls>
  <source src="video.mp5" type="video/mp4"></source>
  <source src="video.ogg" type="video/ogg"></source>
</video>

HTML <video> tag - Support Media type

File formatMedia Type
Mp4video/mp4
OGGvideo/ogg
WebMvideo/webm