HTML 的 ＜video＞ 元素

1. 引言

在网页中展示视频，<video> 元素是最核心、最标准的 HTML5 方式。它无需依赖 Flash 等第三方插件，即可在浏览器中直接播放视频文件，并支持丰富的控制能力与自定义样式。本文将带你从零认识 <video> 元素，掌握其基础语法、常用属性、事件与进阶技巧，帮助你快速构建出体验良好的视频播放功能。

2. 基础语法

<video> 元素的使用非常简单，只需在标签中指定视频文件的地址即可：

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

其中 src 指定视频文件的 URL，controls 属性用于显示浏览器自带的播放控件（播放/暂停、进度条、音量等）。

如果希望提供多个备选视频源，以适应不同浏览器和编码格式，可以使用 <source> 子元素：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 video 元素。
</video>

浏览器会按顺序尝试加载各个 <source>，直到找到能播放的格式为止；若全部失败，则显示标签内的兜底文字。

3. 常用属性

<video> 元素提供了丰富的属性，用于控制播放行为与外观：

属性	说明
src	视频文件地址
controls	显示浏览器自带控件
autoplay	自动播放（通常需配合 muted 才能生效）
muted	默认静音
loop	循环播放
poster	视频加载前显示的封面图
preload	预加载策略：none / metadata / auto
width / height	设置播放器尺寸
playsinline	在移动端内联播放，不全屏

示例：

<video
  src="movie.mp4"
  controls
  muted
  loop
  poster="poster.jpg"
  width="640"
  height="360"
  playsinline
></video>

4. 常用事件与属性操作

通过 JavaScript 可以监听视频的播放状态，并动态控制播放行为：

<video id="myVideo" src="movie.mp4" controls></video>

<script>
  const video = document.getElementById('myVideo');

  video.addEventListener('play', () => {
    console.log('视频开始播放');
  });

  video.addEventListener('pause', () => {
    console.log('视频已暂停');
  });

  video.addEventListener('ended', () => {
    console.log('视频播放结束');
  });

  // 动态控制
  function playVideo() {
    video.play();
  }

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

  function seekTo(seconds) {
    video.currentTime = seconds;
  }
</script>

常用属性包括 currentTime（当前播放位置）、duration（总时长）、volume（音量）、paused（是否暂停）等，配合事件即可实现自定义播放器。

5. 自定义播放器样式

浏览器自带控件样式有限，通过隐藏 controls 并配合 CSS 与 JavaScript，可以打造完全自定义的播放器：

<div class="player">
  <video id="customVideo" src="movie.mp4"></video>
  <div class="controls-bar">
    <button id="playBtn">播放</button>
    <input id="progress" type="range" min="0" max="100" value="0">
    <span id="timeDisplay">0:00 / 0:00</span>
  </div>
</div>

<script>
  const video = document.getElementById('customVideo');
  const playBtn = document.getElementById('playBtn');
  const progress = document.getElementById('progress');
  const timeDisplay = document.getElementById('timeDisplay');

  playBtn.addEventListener('click', () => {
    if (video.paused) {
      video.play();
      playBtn.textContent = '暂停';
    } else {
      video.pause();
      playBtn.textContent = '播放';
    }
  });

  video.addEventListener('timeupdate', () => {
    progress.value = (video.currentTime / video.duration) * 100;
    timeDisplay.textContent =
      formatTime(video.currentTime) + ' / ' + formatTime(video.duration);
  });

  progress.addEventListener('input', () => {
    video.currentTime = (progress.value / 100) * video.duration;
  });

  function formatTime(seconds) {
    const m = Math.floor(seconds / 60);
    const s = Math.floor(seconds % 60);
    return m + ':' + (s < 10 ? '0' + s : s);
  }
</script>

6. 兼容性与最佳实践

• 编码格式：推荐使用 MP4（H.264 + AAC），兼容性最好；可额外提供 WebM 作为备选。
• 自动播放限制 ：多数浏览器要求 autoplay 必须配合 muted 才能生效，避免打扰用户。
• 移动端体验 ：使用 playsinline 让视频在页面内联播放，避免自动全屏。
• 性能优化 ：合理设置 preload，首屏不立即播放的视频建议使用 metadata 或 none。
• 无障碍 ：为视频提供文字说明或字幕（<track> 元素），提升可访问性。

7. 总结

<video> 元素是 HTML5 提供的内置视频播放方案，语法简洁、功能强大。通过掌握其属性、事件与自定义样式技巧，你可以轻松构建出符合需求的视频播放体验。建议在实际项目中结合编码格式选择、移动端适配与性能优化等最佳实践，让视频功能更加完善。