HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: video

The HTML <video> tag is used to embed video content in a web page. It allows you to play video files directly in the browser without the need for any external plugins or software. The <video> tag is a self-closing tag, which means it does not require a closing tag.

Brief Explanation of HTML Tag: video

The <video> tag has several attributes that can be used to customize the video player. The most commonly used attributes are:

  • src: Specifies the URL of the video file.
  • controls: Adds basic video controls such as play, pause, and volume.
  • autoplay: Starts playing the video automatically when the page loads.
  • loop: Loops the video playback when it reaches the end.
  • width: Specifies the width of the video player.
  • height: Specifies the height of the video player.

Here is an example of how to use the <video> tag:

  <video src="video.mp4" controls autoplay width="640" height="360">
    Your browser does not support the <video> tag.
  </video>

In the example above, the src attribute specifies the URL of the video file, while the controls, autoplay, width, and height attributes customize the video player. The text "Your browser does not support the <video> tag." is displayed if the browser does not support the <video> tag.

Code Examples in Per Tags

Here are some more examples of how to use the <video> tag:

Example 1: Basic Video Player

  <video src="video.mp4" controls>
    Your browser does not support the <video> tag.
  </video>

In this example, the controls attribute adds basic video controls to the player.

Example 2: Autoplay Video

  <video src="video.mp4" autoplay>
    Your browser does not support the <video> tag.
  </video>

In this example, the autoplay attribute starts playing the video automatically when the page loads.

Example 3: Looping Video

  <video src="video.mp4" loop>
    Your browser does not support the <video> tag.
  </video>

In this example, the loop attribute loops the video playback when it reaches the end.

Example 4: Custom Video Player

  <video src="video.mp4" controls width="800" height="450" poster="poster.jpg">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    Your browser does not support the <video> tag.
  </video>

In this example, the controls, width, height, and poster attributes customize the video player. The <source> tags specify alternative video formats for browsers that do not support the MP4 format.

References

Activity