HTML <video> Element | HTML Tutorial

📌 What is HTML Video?

The <video> element in HTML is used to embed video content. It supports various attributes like controls, autoplay, muted, and formats like MP4 and WebM for wide browser compatibility.

🎥 Basic Usage

The <video> tag allows you to display video files directly in your browser with optional built-in controls.

Code Example

PREVIEW READY

Loading Editor...

Live Preview

⏯️ Autoplay Behavior

To autoplay a video, most browsers require it to be muted as well.

Code Example

PREVIEW READY

Loading Editor...

Live Preview

📼 Supported Video Formats

Attribute	Description
`MP4`	🎯 Most widely supported format across all major browsers
`WebM`	🌐 Open format with good compression and performance
`Ogg`	🕰️ Older format with limited support

⚙️ Common Attributes

Attribute	Description
`controls`	Shows video player controls (play, pause, volume)
`autoplay`	Starts playing video automatically (usually with muted)
`loop`	Repeats the video once it finishes
`muted`	Starts the video with no sound
`poster`	Image to display before the video plays
`preload`	Instructs browser how to preload the video: auto, metadata, none

🧪 Video API (JavaScript)

Methods: play(), pause(), load()
Properties: currentTime, volume, duration
Events: play, pause, ended

✅ Best Practices

✅ Always include controls if no custom player is used
✅ Use poster to show a thumbnail before playback
✅ Provide multiple formats for better compatibility
✅ Mute the video if using autoplay
✅ Use <track> for subtitles and accessibility

📝 Poster Image Example

The poster attribute adds a preview image before the video starts playing.

Code Example

PREVIEW READY

Loading Editor...

Live Preview

html

Nearby lessons