Using the HTML <video> Tag

Basic Video Example

A simple video element with controls:

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

Attributes of <video>

• src: Specifies the video file URL (optional if using <source>).
• controls: Displays play, pause, volume controls, etc.
• autoplay: Starts playing the video automatically (use with caution).
• loop: Repeats the video indefinitely.
• muted: Starts the video muted.
• poster: Image displayed before the video plays.
• width and height: Specify the video dimensions.

Multiple Sources for Compatibility

You can provide multiple source files in different formats to ensure browser compatibility.

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

Accessibility Tips

• Provide captions or subtitles using the <track> element.
• Include descriptive text between the opening and closing <video> tags for unsupported browsers.
• Use the muted attribute with autoplay to comply with browser policies.

Example with Captions

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English">
  Your browser does not support the video tag.
</video>