Table Of Content

HTML Video Tutorial

View more Tutorials:

1- HTML Video

The <video> tag is included in HTML5, which helps you embed a video into a webpage. HTML4 does not actually have a specific tag for videos. For that reason, to embed videos, HTML4 uses <embed> or <object> or <iframe> tags and you must install additional software on the browser such as Flash or QuickTime.
With the <video> tag, embedding a video on the website is simpler and you don't need to install any additional software on the browser. Most of the browsers have supported HTML5 already, so it also supports the <video> tag.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>
The controls attribute tells the browser to display the controls for videos such as play button, pause button, volume, etc.
The <source> tag that appears in the <video> tag provides an alternative video source for the browser. The browser can use one of the given video sources, from top to bottom.
The text content in the <video> tag is only displayed if the browser does not support the <video> tag or any video formats provided by the <source> tags.
video-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Video</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Video example:</h3>

    <video width="320" height="240" controls>
      <source src="../resources/mov_bbb.mp4" type="video/mp4">
      <source src="../resources/mov_bbb.ogg" type="video/ogg">

      Your browser does not support the video or formats.

    </video>

</body>
</html>
Here are some browsers and the video formats supported:
Browser MP4
(video/mp4)
WebM
(video/webm)
Ogg
(video/ogg)
Internet Explorer 16x16    
Chrome 16x16 16x16 16x16
Firefox 16x16 16x16 16x16
Safari 16x16    
Opera 16x16
(>= 25)
16x16 16x16

2- Video Attributes

Like all other elements, the <video> element supports all the global attributes.
  • TODO Link!
Besides, it has other attributes as follows:
  • src
  • controls
  • autoplay
  • buffered
  • crossorigin
  • currentTime
  • duration (Read only)
  • height
  • width
  • loop
  • muted
  • playsinline
  • poster
  • preload

View more Tutorials: