HTML5 视频标签与属性

HTML5 <video> 元素提供原生视频播放能力，无需第三方插件。

基本语法

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

核心属性

播放控制属性

尺寸属性

<video
  controls
  width="640"
  height="360"
  style="max-width: 100%;"
>
  <source src="video.mp4" type="video/mp4">
</video>

多格式兼容

格式支持情况

格式回退

<video controls>
  <!-- 优先使用WebM，体积更小 -->
  <source src="video.webm" type="video/webm">
  <!-- MP4作为回退 -->
  <source src="video.mp4" type="video/mp4">
  <!-- Ogg作为最后回退 -->
  <source src="video.ogv" type="video/ogg">
  <!-- 完全不支持时的提示 -->
  <p>请升级浏览器或<a href="video.mp4">下载视频</a></p>
</video>

预加载策略

<!-- 预加载全部视频 -->
<video preload="auto" src="video.mp4"></video>

<!-- 仅预加载元数据（时长、尺寸） -->
<video preload="metadata" src="video.mp4"></video>

<!-- 不预加载，用户点击后才加载 -->
<video preload="none" src="video.mp4"></video>

自动播放策略

无声自动播放

<!-- 浏览器策略：自动播放必须静音 -->
<video autoplay muted loop playsinline>
  <source src="background.mp4" type="video/mp4">
</video>

有条件播放

<video id="myVideo" muted>
  <source src="video.mp4" type="video/mp4">
</video>

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

// 尝试自动播放
video.play().catch(() => {
  // 自动播放被阻止，显示播放按钮
  showPlayButton();
});
</script>

JavaScript API

播放控制

const video = document.querySelector('video');

// 播放/暂停
video.play();
video.pause();

// 跳转
video.currentTime = 30; // 跳转到30秒

// 音量控制
video.volume = 0.5; // 0-1
video.muted = true;

// 播放速率
video.playbackRate = 1.5; // 1.5倍速

事件监听

video.addEventListener('play', () => console.log('开始播放'));
video.addEventListener('pause', () => console.log('暂停'));
video.addEventListener('ended', () => console.log('播放结束'));
video.addEventListener('timeupdate', () => {
  console.log(`当前进度: ${video.currentTime}/${video.duration}`);
});
video.addEventListener('loadedmetadata', () => {
  console.log(`视频时长: ${video.duration}秒`);
});

注意：移动端浏览器限制自动播放，必须添加 muted 和 playsinline 属性。

要点总结

• 使用 <source> 提供多格式回退，MP4 + WebM 覆盖主流浏览器
• 自动播放必须静音（浏览器策略）
• 预加载推荐使用 metadata，平衡体验与流量
• poster 属性设置视频封面图
• JavaScript API 控制播放、暂停、跳转、音量