Table of contents

HTML <video> Tag

What is Video Tag?

The HTML <video> tag is used to embed video files into a webpage. It allows users to play videos directly in the browser without needing an external plugin like Flash. With built-in controls, users can play, pause, and adjust volume easily. The <video> tag supports multiple file formats such as MP4, WebM, and Ogg, making it versatile across browsers.

The <video> tag was introduced in HTML5 and has since become the standard method for adding multimedia content to web pages.

Syntax of the Video Tag

plaintext
<video 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 <video> element can contain multiple <source> elements to ensure browser compatibility. The controls attribute adds play, pause, and volume options for the user.

Examples of Video Tag

Example 1: Basic HTML Video Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basic Video Example</title>
</head>
<body>
  <h1>My First Video</h1>
  <video width="400" controls>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

In this example, the video “sample.mp4” will be displayed with playback controls and a width of 400 pixels.

Example 2: Autoplay and Loop Video

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Autoplay Video Example</title>
</head>
<body>
  <h1>Autoplaying Video</h1>
  <video width="400" autoplay loop muted>
    <source src="nature.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

Here, the video starts playing automatically when the page loads. The loop attribute makes it repeat continuously, and muted ensures it plays without sound on load.

Attributes of the Video Tag

The <video> tag supports several useful attributes that control video playback:

AttributeDescriptionExample
srcSpecifies the path of the video file.<video src="movie.mp4">
controlsDisplays play, pause, and volume controls.<video controls>
autoplayAutomatically starts playing when the page loads.<video autoplay>
loopReplays the video continuously.<video loop>
mutedPlays the video with the sound off by default.<video muted>
posterDisplays an image before the video starts.<video poster="thumbnail.jpg">
width / heightDefines the size of the video.<video width="600" height="400">

Best Practices for Video Tag

  • Use Multiple Formats: Include MP4, WebM, and Ogg to ensure compatibility with all browsers.
  • Add Controls: Always include the controls attribute so users can manage playback.
  • Include Fallback Text: Add a message like “Your browser does not support the video tag.” for unsupported browsers.
  • Optimize File Size: Compress videos for faster loading times.
  • Use Poster Images: Display a thumbnail image before playback begins.

FAQs About the Video Tag

Q1: What is the purpose of the video tag?

The <video> tag allows embedding and playing video content directly in a webpage without third-party plugins.

Q2: Which video formats are supported by HTML5?

HTML5 supports MP4, WebM, and Ogg video formats.

Q3: Can I add subtitles or captions to a video?

Yes, you can use the <track> element within the <video> tag to include captions or subtitles.

Q4: How do I make a video autoplay on a webpage?

Add the autoplay attribute inside the <video> tag, for example: <video autoplay>.

Q5: What happens if the browser doesn’t support the video tag?

If unsupported, the fallback text within the <video> element will be shown instead of the video.

HTML

Related Articles