HTML Video Tag

Embedding videos in HTML based document is also an essential part in web development. It is because your browsers do not have any consistent standard to define media files that are embedded in your web page. In this chapter, you will learn about including media files in your web page.

The Video Element

This is a new feature introduced in HTML for embedding video and is used for incorporating movie files and for video streaming also. It is done using the <video> tag which supports three video formats currently. These are:

  • MP4
  • Ogg and
  • WebM

Out of these three formats, the most common format in which all the browsers (such as Internet Explorer, Google Chrome, Firefox, Safari, Opera) supports is the mp4 file format.

VIDEO Tag Attributes

  • src: This is used to set the URL or path from where the video file will get fetched.
  • autoplay: This attribute specifies that as soon as your web page gets ready, the video embedded in your page gets played at that moment.
  • controls: This tells the browser, what player-controls / buttons (such as play/pause etc.) to be displayed on the page with the video.
  • width and height: This is used for assigning the width and height of the player in which the video will be shown.
  • muted: This tells, whether the audio part of the specified video should be kept in mute or not.

Here's code snippet as to how video can be incorporated:

Example:
<video width="320" height="240" controls autoplay muted>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
</video>

Scroll Back to Top