Embedding Video in HTML5 Webpages with the `

Learn how to add video playback to your HTML5 websites using the `

Embedding Video in HTML with the `

The HTML <video> element lets you seamlessly integrate video playback into your web pages, enhancing user engagement and providing a richer multimedia experience.

Basic Video Playback

Use the <video> element to embed a video. The src attribute specifies the video file's URL. Include fallback content (between the opening and closing tags) for browsers that don't support the <video> element. Always specify `width` and `height` to avoid layout issues during loading.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

The controls attribute adds standard video player controls.

Autoplay

The autoplay attribute starts video playback automatically. However, many modern browsers restrict autoplay to enhance user experience; autoplay often works reliably only when the video is initially muted (using the muted attribute).

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Browser Support

Supported Video Formats

Common video formats include MP4, WebM, and Ogg. Browser support varies; using multiple <source> elements ensures broader compatibility.

HTML Video DOM

The HTML DOM provides methods, properties, and events for manipulating video playback (play, pause, volume, etc.).

<video width="320" height="240" controls id="myVideo">
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play()">Play</button>

HTML Audio/Video DOM Reference Try it Yourself »

Summary Table