learn2kode.in

Menu

HTML Tutorial

Menu

HTML Video Element

The HTML <video> element is used to embed video files directly into a web page without needing external plugins. It supports multiple formats and includes built-in playback controls.

Syntax

Copy Text 
<video src="movie.mp4" controls></video>

Common Attributes of <video>

Attribute Description
src Specifies the path/URL of the video file
controls Displays play, pause, volume, and seek controls
autoplay Starts playing the video automatically
loop Replays the video continuously
muted Starts the video without sound
poster Displays an image before the video starts
width / height Sets video dimensions
preload Defines how the browser loads video (auto, metadata, none)

Example with Multiple Sources

Using <source> ensures better compatibility across browsers:

Copy Text 
<video controls width="500">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Adding Subtitles with <track>

You can add captions or subtitles:

Copy Text 
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subs.vtt" kind="subtitles" srclang="en" label="English">
</video>

Autoplay + Muted Example

Browsers allow autoplay only if the video is muted:

Copy Text 
<video autoplay muted loop>
  <source src="banner.mp4" type="video/mp4">
</video>

Video Inside a Figure

Copy Text 
<figure>
  <video controls width="400">
    <source src="clip.mp4" type="video/mp4">
  </video>
  <figcaption>Sample demonstration video</figcaption>
</figure>
HTML Audio Element