« Previous Next »

HTML Video

The HTML <video>element is used to show a video on a web page.

Video

Output 1:

HTML <Video> Element

Output 2:

HTML <video> Autoplay

Output 3:

Practice Exercises

Task: How to embed a responsive video with player controls, multiple video sources, muted autoplay, and browser fallback text?

Goal: Create a video player with a width of 480 and height of 270, enabled playback controls, muted autoplay, fallback MP4/OGG sources, and custom browser warning text.
💡 Hint: Combine controls, autoplay, and muted inside the <video> tag, then use multiple <source> tags inside it with proper MIME type attributes.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Video Practice</title>
  </head>
  <body>

    <h2>Featured Video Player</h2>

    <video width="480" height="270" controls autoplay muted>
      <source src="promo.mp4" type="video/mp4">
      <source src="promo.ogg" type="video/ogg">
      Sorry, your browser does not support inline video playback.
    </video>

  </body>
</html>
Output:

Featured Video Player

Explanation: The <video> element uses controls to render play/pause, volume, and progress bar UI elements. Adding autoplay starts video playback immediately on page load, but modern browsers require muted alongside it for autoplay policies to take effect. Providing multiple <source> tags allows the browser to select the first format it supports (e.g., MP4 or OGG), while the plain text at the bottom serves as fallback content for outdated browsers.
« Previous Next »