HTML Video

Subject: html

🎥 HTML <video> Element

The HTML5 <video> element allows you to embed video files directly into web pages — no Flash or third-party plugins needed.

✅ Why Use <video>?

  • ✅ Native browser support — works on all major browsers
  • 🎛️ Customizable controls — play, pause, volume, fullscreen
  • 🔁 Multiple formats — fallback support for compatibility
  • ♿ Accessibility — supports captions via <track>

🧱 Basic Syntax

🚀 Try it in Compiler

🛠️ Common <video> Attributes

  • controls: displays play/pause, volume, fullscreen controls
  • autoplay: starts playing video automatically
  • muted: mutes the video on load (required for autoplay)
  • loop: repeats video once it ends
  • poster: displays an image before video plays
  • width & height: sets the player dimensions

📦 Example: Basic Video Player

🚀 Try it in Compiler

🖼️ Example: Poster + Autoplay

🚀 Try it in Compiler
  • poster: preview image before video starts
  • autoplay: plays automatically on page load
  • muted: required for autoplay to work in modern browsers

💬 Adding Captions with <track>

🚀 Try it in Compiler
  • The .vtt file must be in WebVTT format.
  • kind="subtitles" specifies caption type.

🎞️ Supported Video Formats

FormatExtensionBrowser Support
MP4.mp4✅ All major browsers (Recommended)
WebM.webm✅ Chrome, Firefox, Edge
Ogg.ogv✅ Firefox, Opera

📌 Key Takeaway

  • The <video> element makes embedding video seamless and plugin-free.
  • Always use multiple <source> tags for compatibility.
  • Use attributes like controls, autoplay, muted, and poster for enhanced UX.
  • Add captions using <track> to improve accessibility.
Next: HTML Audio