HTML 视频

学习目标

掌握 <video> 元素的基本语法与核心属性
理解主流视频格式（MP4、WebM、OGG）的浏览器兼容性
能够实现响应式、自动播放、循环播放等常见功能
遵循最佳实践，确保跨浏览器兼容性、性能与无障碍访问

什么是 `<video>`

<video> 是 HTML5 引入的原生视频播放器，允许网页直接嵌入视频内容（如教程、宣传视频、背景视频），无需依赖 Flash 或其他插件。

基本语法

推荐使用 <source>

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

为什么用 <source>？
可提供多种格式，提升浏览器兼容性
通过 type 属性帮助浏览器快速判断是否支持该格式

核心属性

属性	作用	注意事项
`controls`	显示播放控件（播放 / 暂停、进度条、音量、全屏）	强烈建议添加，除非是背景视频
`autoplay`	页面加载后自动播放	⚠️ 多数浏览器阻止带声音的自动播放
`muted`	默认静音	✅ 与 `autoplay` 配合可绕过自动播放限制
`loop`	循环播放视频	常用于背景视频或演示动画
`poster`	视频加载前显示的封面图	提升用户体验，避免黑屏
`width` / `height`	设置播放器尺寸	建议用 CSS 控制以实现响应式
`preload`	预加载策略（`none`/`metadata`/`auto`）	默认为 `metadata`（仅加载元数据）

自动播放策略（2025 年）：
Chrome、Safari、Firefox 等均要求：
若视频有声音 → 必须由用户交互触发
若视频静音（muted）→ 可自动播放

支持格式与浏览器兼容

格式	MIME 类型	特点	浏览器支持
MP4 (H.264)	`video/mp4`	压缩率高、兼容性最好	✅ 所有现代浏览器
WebM (VP9)	`video/webm`	开源、高效（适合高清）	✅ Chrome, Firefox, Edge, Opera ⚠️ Safari 14.1+ 支持
OGG (Theora)	`video/ogg`	开源但效率较低	✅ Firefox, Chrome, Opera ❌ Safari, IE 不支持

推荐格式组合

最大化兼容

<video controls>
  <!-- 优先 MP4：兼容性最广 -->
  <source src="video.mp4" type="video/mp4">
  <!-- 备用 WebM：开源且高效 -->
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

兼容性：
MP4：覆盖 100% 现代浏览器
WebM + MP4：覆盖 99%+ 用户（包括移动端）

实用示例

响应式视频播放器

推荐

<style>
  .responsive-video {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
</style>

<video class="responsive-video" controls poster="cover.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  <source src="tutorial.webm" type="video/webm">
  您的浏览器不支持视频。
</video>

特点：

宽度自适应容器，高度按比例缩放
圆角 + 阴影提升视觉效果
poster 提供加载前的封面图

自动播放背景视频

静音 + 循环

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

<style>
  video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
</style>

关键点：
muted 绕过自动播放限制
playsinline（iOS 必需）防止全屏播放
object-fit: cover 保持视频比例并填满屏幕

无障碍视频

添加字幕

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <!-- 英文字幕 -->
  <track src="en.vtt" kind="subtitles" srclang="en" label="English" default>
  <!-- 中文字幕 -->
  <track src="zh.vtt" kind="subtitles" srclang="zh" label="中文">
  您的浏览器不支持视频或字幕。
</video>

字幕文件（.vtt）示例 (en.vtt)：

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to this HTML tutorial.

00:00:05.000 --> 00:00:08.000
Today we'll learn about the video element.

最佳实践

提供至少两种视频格式（MP4 + WebM）
始终添加 controls（除非是背景视频）
使用 poster 属性提升加载体验
优化视频文件：
- 分辨率匹配使用场景（如博客用 720p，首页用 1080p）
- 使用工具压缩（如 HandBrake、FFmpeg）
实现无障碍：
- 添加 <track> 字幕
- 在视频附近提供文字摘要

避免事项

仅提供单一格式（如只用 OGG → Safari 无法播放）
强制自动播放带声音的视频（会被浏览器拦截）
忽略移动端体验（未加 playsinline 导致 iOS 全屏）

高级技巧

JavaScript 控制

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

// 播放
video.play().catch(e => console.log("播放被阻止"));

// 暂停
video.pause();

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

自定义播放器 UI

隐藏原生控件

<video id="myVideo">
  <source src="demo.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play()">▶ 播放</button>

移除 controls 属性，完全通过 JS + CSS 构建 UI

源本科技 | 码上会

学习目标

什么是 <video>

核心属性

支持格式与浏览器兼容

实用示例

响应式视频播放器

自动播放背景视频

无障碍视频

最佳实践

高级技巧

JavaScript 控制

自定义播放器 UI

什么是 `<video>`