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

Unavailable or blocked: media “movie.mp4”; media “movie.ogg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: image “thumbnail.jpg”; media “video.mp4”; media “video.webm”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

The snippet includes JavaScript inside its HTML. Unavailable or blocked: media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

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

Responsive Video

The snippet includes CSS inside its HTML. Unavailable or blocked: image “thumbnail.jpg”; media “video.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

5 practice questions are available. Choose Start practice to try them.