<video> - Video content

The <video> tag is a native element in HTML5 used to embed video content, supporting multiple video file formats without relying on third-party plugins. By using attributes to control playback behavior, dimensions, and source files, developers can easily implement video playback functionality.

Basic Syntax of the <video> Tag

The basic structure of the <video> tag is as follows:

<video src="video.mp4" controls></video>

• The src attribute specifies the path to the video file.
• The controls attribute displays the browser's default playback controls (e.g., play/pause buttons, progress bar, etc.).

To ensure compatibility across different browsers, you can use the <source> child tag to specify multiple video sources:

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the HTML5 video tag.
</video>

If the browser does not support the <video> tag, the fallback content inside the tag (such as the warning text above) will be displayed.

Core Attributes Explained

controls

Enables the browser's default playback controls:

<video src="video.mp4" controls></video>

autoplay

Automatically plays the video after loading (may not work in some browsers due to policy restrictions):

<video src="video.mp4" autoplay></video>

loop

Automatically loops the video after playback ends:

<video src="video.mp4" loop></video>

muted

Plays the video muted by default (often used with autoplay):

<video src="video.mp4" autoplay muted></video>

poster

Sets the video cover image (displayed when the video is not playing):

<video src="video.mp4" poster="cover.jpg"></video>

width and height

Sets the display dimensions of the video (in pixels):

<video src="video.mp4" width="640" height="360"></video>

Advanced Features and Event Control

Controlling Video with JavaScript

Use the DOM API to dynamically control video behavior:

<video id="myVideo" src="video.mp4"></video>
<button onclick="document.getElementById('myVideo').play()">Play</button>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>

Listening to Video Events

Common events include:

• play: Triggered when the video starts playing
• pause: Triggered when the video is paused
• ended: Triggered when the video finishes playing

Example:

<video id="eventDemo" src="video.mp4" controls></video>
<script>
  const video = document.getElementById('eventDemo');
  video.addEventListener('ended', () => {
    alert('Video playback ended!');
  });
</script>

Responsive Video Design

Use CSS to make the video adapt to container width:

<style>
  .responsive-video {
    width: 100%;
    height: auto;
  }
</style>
<video class="responsive-video" src="video.mp4" controls></video>

Cross-Browser Compatibility Practices

Different browsers support varying video formats. The following combination is recommended:

• MP4 (H.264 encoding): Most widely supported
• WebM: Smaller file size
• Ogg: Supported by older versions of Firefox

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

Performance Optimization Tips

Preloading Settings

Control video loading strategy with the preload attribute:

<!-- No preloading -->
<video src="video.mp4" preload="none"></video>

<!-- Load only metadata (e.g., duration) -->
<video src="video.mp4" preload="metadata"></video>

<!-- Auto preload (browser decides) -->
<video src="video.mp4" preload="auto"></video>

Lazy Loading

Implement lazy loading with loading="lazy":

<video src="video.mp4" loading="lazy"></video>

Hidden Audio Playback Technique

Implement background video playback (no controls, auto-loop):

<video autoplay loop muted playsinline>
  <source src="background.mp4" type="video/mp4">
</video>

Note: On mobile, add the playsinline attribute to avoid fullscreen playback.

Custom Player UI

Hide default controls and create a custom interface:

<video id="customPlayer" src="video.mp4"></video>
<div>
  <button onclick="document.getElementById('customPlayer').play()">▶</button>
  <button onclick="document.getElementById('customPlayer').pause()">⏸</button>
  <input type="range" id="volumeCtrl" min="0" max="1" step="0.1" value="1"
    onchange="document.getElementById('customPlayer').volume = this.value">
</div>

Subtitles and Track Text

Add subtitles using the <track> tag:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文" default>
</video>

Example subtitle file (WebVTT format):

WEBVTT

00:00:01.000 --> 00:00:04.000
This is the first subtitle line.

00:00:05.000 --> 00:00:08.000
This is the second subtitle line.

Mobile-Specific Handling

Inline Playback

Avoid forced fullscreen playback on iOS:

<video playsinline webkit-playsinline></video>

Preventing Autoplay

iOS restricts autoplay; trigger playback via user interaction:

document.addEventListener('touchstart', () => {
  document.getElementById('myVideo').play();
}, { once: true });

Video Format Conversion Guide

Recommended tools:

• FFmpeg: Command-line tool supporting all format conversions
• HandBrake: GUI tool

Convert video to MP4 (H.264 encoding):

ffmpeg -i input.mov -c:v libx264 -preset slow -crf 22 -c:a aac -b:a 128k output.mp4

Common Issue Solutions

Video Fails to Play

Troubleshooting steps:

1. Verify the file path is correct
2. Check video format compatibility
3. Ensure server MIME type configuration is correct

Autoplay Not Working

Solutions:

1. Add the muted attribute
2. Ensure the video size is small (some browsers restrict autoplay for large videos)
3. Trigger playback via user interaction

Fullscreen Playback Issues

Disable fullscreen:

video::-webkit-media-controls-fullscreen-button {
  display: none;
}