HTML5 <video> 标签 完整知识点汇总

<video> HTML 元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

一、基础结构与基本使用

<video 
  src="movie.mp4" 
  controls 
  width="640" 
  height="360" 
  autoplay 
  muted 
  loop 
  preload="auto" 
  poster="preview.jpg" 
  oncontextmenu="return false"
>
  您的浏览器不支持video标签
</video>

二、常用属性（Attributes）

三、<source> 标签

推荐写法（支持多格式兼容）：

<video controls>
  <source src="movie.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
  <source src="movie.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
  您的浏览器不支持视频标签。
</video>

MIME类型与Codecs常用组合：

四、视频格式兼容性说明

👉 建议方案：

• 提供MP4 + WebM两种格式；
• iOS平台推荐使用MP4；
• 需要HEVC支持时，使用Safari专属支持；
• HLS（.m3u8）建议配合hls.js或videojs-http-streaming（HLS.js）播放器；
• DASH（.mpd）可使用Shaka Player等解决方案。

五、常用事件（Events）

const video = document.querySelector('video');
video.addEventListener('play', () => { ... });

六、错误处理 error.code

video.addEventListener('error', function() {
  let error = video.error;
  switch(error.code) {
    case 1: alert('播放中止'); break;
    case 2: alert('网络错误'); break;
    case 3: alert('播放器发生解码错误'); break;
    case 4: alert('不支持的视频格式'); break;
  }
});

七、JavaScript控制

八、自定义控件（Advanced）

1. 移除controls属性，完全自定义UI
2. 使用DOM+JS控制视频播放
3. 示例：带自定义进度条

<video id="customVideo"></video>
<div class="controls">
  <button id="play">Play</button>
  <input type="range" id="progress" min="0" max="100" value="0">
</div>

const video = document.getElementById('customVideo');
const play = document.getElementById('play');
const progress = document.getElementById('progress');

play.onclick = function () {
  if (video.paused) {
    video.play();
    play.textContent = 'Pause';
  } else {
    video.pause();
    play.textContent = 'Play';
  }
};

video.ontimeupdate = function () {
  progress.value = (video.currentTime / video.duration) * 100 || 0;
};

progress.onchange = function () {
  video.currentTime = (progress.value / 100) * video.duration;
};

九、性能优化建议

• 使用preload="metadata"避免首次加载加载过大视频文件；
• 使用playsinline防止iOS下自动全屏；
• 使用CDN、视频压缩、WebM + H.264格式优化；
• 视频使用响应式布局：max-width: 100%; height: auto;；
• 检测播放错误并提示用户重试；
• 对移动端视频建议使用muted和playsinline属性。

十、无障碍支持

• 使用<track>标签实现字幕、章节提示；
• 示例：

<video ...>
  <source src="video.mp4">
  <track 
    src="captions_en.vtt" 
    kind="captions" 
    srclang="en" 
    label="English"
    default
  >
</video>

字幕格式 .vtt 示例：

WEBVTT

Hello World

00:00:00.000 --> 00:00:04.000
欢迎观看这段视频演示。

00:00:05.000 --> 00:00:08.000
感谢您的关注！

十一、视频播放策略与浏览器限制（很重要！）

1. 自动播放限制：
   • 必须静音 (muted)
   • 需要用户交互动作（如 click）
   • autoplay + muted是主流兼容写法

video
  .play()
  .then(() => console.log('视频播放成功'))
  .catch(err => {
    console.warn('自动播放被拦截，请交互后播放');
  });

2. 全屏播放需用户交互
3. iOS限制更多，不支持自动播放非静音
4. 安卓浏览器策略类似PC浏览器

十二、常见问题与解决方案

以上就是我对HTML5 <video> 标签的完整、详尽、专业级别的知识点整理，共 13 大项、300+知识点和建议，涵盖从基础语法到性能优化、常见问题与解决方案、推荐框架等，适用于从初学者到中高级前端工程师查阅。