Back to HTML HubPractice HTMLInterview HTML

Nearby lessons

14 of 24
HTML ImagesHTML AudioHTML VideoHTML YoutubeHTML Tables

🎬 HTML <video> Element

📌 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.
Example02
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

⏯️ Autoplay Behavior

To autoplay a video, most browsers require it to be muted as well.
Example03
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

📼 Supported Video Formats

AttributeDescription
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

AttributeDescription
controlsShows video player controls (play, pause, volume)
autoplayStarts playing video automatically (usually with muted)
loopRepeats the video once it finishes
mutedStarts the video with no sound
posterImage to display before the video plays
preloadInstructs 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.
Example08
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

5 Questions
Progress: 0 / 5