HTML Video

Master motion picture embedding and playback control through native HTML video elements

Video elements display motion picture content within webpage contexts. This standardized approach eliminates third-party plugin requirements previously necessitated by technologies like Flash.

The HTML <video> Element

The <video> element provides native support for embedding video content. Before HTML5, videos could only be played with plugins (like Flash). The video element makes it simple and standardized.

Basic Video Example

<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>

How It Works

  • Controls attribute injects playback interface (play, pause, volume)
  • Multiple source elements supply format alternatives
  • Browsers select initial compatible format
  • Fallback content appears when video support absent

Live Video Example

Here's a working video player with controls:

Video Formats and Browser Support

There are three commonly supported video formats in HTML: MP4, WebM, and Ogg. Browser support varies, so it's recommended to provide multiple formats for maximum compatibility.

Format MIME Type Browser Support Best For
MP4 video/mp4 Chrome, Edge, Firefox, Safari, Opera Universal compatibility
WebM video/webm Chrome, Edge, Firefox, Opera Open format, good compression
Ogg video/ogg Chrome, Firefox, Opera Open format alternative

✅ Tip

MP4 is the most widely supported format and should be your primary choice. Use H.264 video codec and AAC audio codec for maximum compatibility.

Video Attributes

The <video> element supports several attributes that control its behavior and appearance:

Attribute Value Description
controls controls Displays video controls (play, pause, volume, etc.)
autoplay autoplay Starts playing automatically (muted by default in most browsers)
loop loop Plays the video again when it ends
muted muted Mutes the audio by default
poster URL Image to show before the video plays
preload auto | metadata | none Specifies if and how the video should be loaded when page loads
width pixels Sets the width of the video player
height pixels Sets the height of the video player

Video with Multiple Attributes

<video width="640" height="360"
       controls
       loop
       muted
       poster="thumbnail.jpg"
       preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Controlling Video with JavaScript

You can use JavaScript to control video playback and create custom video players with advanced functionality.

JavaScript Video Control

<video id="myVideo" width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>

<div>
  <button onclick="playVideo()">Play</button>
  <button onclick="pauseVideo()">Pause</button>
  <button onclick="setSpeed()">Speed Up</button>
</div>

<script>
var video = document.getElementById("myVideo");

function playVideo() {
  video.play();
}

function pauseVideo() {
  video.pause();
}

function setSpeed() {
  video.playbackRate = 2.0;
}
</script>

📌 Common Video Methods and Properties

  • play() - Starts playing the video
  • pause() - Pauses the video
  • currentTime - Gets or sets the current playback position (in seconds)
  • duration - Returns the total duration of the video
  • volume - Gets or sets the audio volume (0.0 to 1.0)
  • playbackRate - Gets or sets the playback speed
  • muted - Gets or sets whether the video is muted

Video Events

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<p id="status">Video status: Ready</p>

<script>
var video = document.getElementById("myVideo");
var status = document.getElementById("status");

video.addEventListener('play', function() {
  status.textContent = 'Video status: Playing';
});

video.addEventListener('pause', function() {
  status.textContent = 'Video status: Paused';
});

video.addEventListener('ended', function() {
  status.textContent = 'Video status: Ended';
});

video.addEventListener('timeupdate', function() {
  var current = Math.floor(video.currentTime);
  var total = Math.floor(video.duration);
  status.textContent = 'Time: ' + current + 's / ' + total + 's';
});
</script>

Video Best Practices

🎯 Optimization Tips

  1. Compress Your Videos: Use appropriate compression to reduce file size while maintaining quality
  2. Provide Multiple Formats: Include MP4 (required) and WebM for best compatibility
  3. Use Poster Images: Always provide a poster attribute for better user experience
  4. Set Dimensions: Specify width and height to prevent layout shifts
  5. Consider Preload: Use preload="metadata" to load only video metadata initially
  6. Avoid Autoplay: Only use autoplay with muted videos for backgrounds
  7. Add Captions: Use <track> elements for accessibility
  8. Responsive Design: Use CSS to make videos responsive (max-width: 100%)
  9. Lazy Loading: Consider lazy loading videos that are below the fold
  10. CDN Delivery: Host large video files on a CDN for faster delivery

Responsive Video

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video-container">
  <video controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

⚠️ Warning

Large video files can significantly impact page load times. Consider using video streaming services or adaptive bitrate streaming for long-form content.

Test Your Knowledge