HTML5 `＜video＞` 标签深度解析：在网页中集成多媒体视频

目录

1. 引言：网页视频的变革与 <video> 标签的优势
   • 1.1 告别插件时代
   • 1.2 <video> 标签的核心优势
2. <video> 标签基础：嵌入视频
   • 2.1 基本语法
   • 2.2 备用内容 (Fallback Content)
3. 核心属性详解：定制视频行为
   • 3.1 src：视频源路径
   • 3.2 controls：默认播放器控件
   • 3.3 autoplay：自动播放（重要限制与最佳实践）
   • 3.4 loop：循环播放
   • 3.5 muted：默认静音
   • 3.6 poster：封面图片
   • 3.7 preload：预加载策略
   • 3.8 width / height：设置视频尺寸
   • 3.9 playsinline：iOS 设备内联播放
   • 3.10 crossorigin：跨域资源共享
4. 支持多种视频格式：解决兼容性问题
   • 4.1 为什么需要多种格式？
   • 4.2 <source> 标签的使用
   • 4.3 常见视频格式与编解码器 (Codecs)
   • 4.4 最佳格式组合
5. 字幕与描述：<track> 标签实现无障碍性
   • 5.1 <track> 标签的必要性
   • 5.2 属性详解：src, kind, srclang, label, default
   • 5.3 WebVTT (Web Video Text Tracks) 格式
6. JavaScript 控制 <video> 元素
   • 6.1 获取 <video> 元素
   • 6.2 常用方法
   • 6.3 常用属性
   • 6.4 常用事件
   • 6.5 实际场景应用：构建自定义播放器
7. 响应式视频：适应一切屏幕尺寸
   • 7.1 流式尺寸：max-width: 100%; height: auto;
   • 7.2 保持宽高比：Padding-Bottom Hack (宽高比盒子)
   • 7.3 object-fit 属性
8. 无障碍性 (A***essibility) 考量
   • 8.1 controls 属性
   • <track> 标签的充分利用
   • 提供视频转录 (Transcripts)
   • 自定义控件的键盘导航与 ARIA 属性
9. 性能优化与加载策略
   • 9.1 视频文件压缩与编码
   • 9.2 懒加载 (Lazy Loading)
   • 9.3 CDN (内容分发网络)
   • 9.4 preload 属性的合理使用
10. 最佳实践
    • 10.1 始终提供默认控件
    • 10.2 提供多种格式
    • 10.3 谨慎使用 autoplay
    • 10.4 优化文件大小
    • 10.5 包含字幕和描述
    • 10.6 响应式设计
11. 代码示例
    • 11.1 带有多种格式和字幕的视频
    • 11.2 带有自定义控件的响应式视频播放器
12. 总结

---

1. 引言：网页视频的变革与 <video> 标签的优势

在 HTML5 时代之前，网页中嵌入视频通常依赖于第三方插件，最常见的是 Adobe Flash Player。这种方式不仅增加了开发和维护的复杂性，还带来了诸多问题：如插件的安全性漏洞、性能开销、在移动设备上的兼容性差以及对用户安装额外软件的依赖。

1.1 告别插件时代

HTML5 引入的 <video> 标签彻底改变了这一局面。它提供了一个浏览器原生的、标准化的方式来直接嵌入视频内容，无需任何外部插件。这意味着更流畅的用户体验、更简单的开发流程和更好的跨平台兼容性。

1.2 <video> 标签的核心优势

1. 原生支持： 现代浏览器无需任何插件即可播放视频。
2. 跨设备兼容： 在桌面、平板和智能手机上都能良好运行。
3. 标准化 API： 通过 JavaScript 提供丰富的 API 接口，可以精细控制视频播放。
4. 无障碍性： 原生支持字幕和描述，更好地与辅助技术集成。
5. 性能与安全性： 浏览器可以更好地优化视频加载和播放，减少安全漏洞。

2. <video> 标签基础：嵌入视频

<video> 标签用于在 HTML 文档中嵌入视频内容。

2.1 基本语法

最简单的用法是指定一个视频文件源和 controls 属性。

<video src="path/to/your/video.mp4" controls>
    您的浏览器不支持 HTML5 video 元素。
</video>

2.2 备用内容 (Fallback Content)

<video> 标签内部的内容（<source> 标签之后的部分）会在浏览器不支持 <video> 元素时显示。这是提供回退方案（例如下载链接或一个提示信息）的好地方。

<video controls>
    <!-- 视频源 -->
    <p>您的浏览器不支持 HTML5 video 元素。请 <a href="path/to/your/video.mp4">点击此处下载视频</a>。</p>
</video>

3. 核心属性详解：定制视频行为

<video> 标签支持多个属性，用于配置视频的播放行为。

3.1 src：视频源路径

• 作用： 指定视频文件的 URL。
• 替代方案： 更推荐使用 <source> 标签来指定多个视频源，以提供更好的浏览器兼容性。当使用 <source> 标签时，<video> 标签通常不包含 src 属性。

3.2 controls：默认播放器控件

• 作用： 布尔属性。如果存在，浏览器将显示默认的播放、暂停、音量、全屏、进度条等用户界面。
• 重要性： 对于用户来说，它是最直观的交互方式。如果没有 controls 属性，您就需要通过 JavaScript 来提供自定义的播放控制。

3.3 autoplay：自动播放（重要限制与最佳实践）

• 作用： 布尔属性。如果存在，视频会在页面加载后立即自动开始播放。
• 注意：
  • 现代浏览器（尤其是移动浏览器）对 autoplay 属性实施了严格的限制，以防止在未经用户许可的情况下自动播放媒体，造成骚扰。
  • 常见的 autoplay 生效条件：
    • 视频是静音 (muted) 状态。
    • 用户之前与网站有交互（如点击过）。
    • 视频没有音轨。
    • autoplay 政策因浏览器和设备而异。
  • 最佳实践： 强烈建议在非必要情况下避免使用 autoplay。如果确实需要，请确保视频默认是静音的，并提供一个明显的取消静音按钮。这符合 Web 内容无障碍指南 (WCAG)。

3.4 loop：循环播放

• 作用： 布尔属性。如果存在，视频会在播放结束后自动重新开始播放。
• 用途： 适用于背景视频、短小的动画效果或循环播放的展示内容。

3.5 muted：默认静音

• 作用： 布尔属性。如果存在，视频会在加载时默认静音。用户仍然可以通过控件手动取消静音。
• 用途： 常与 autoplay 结合使用，以绕过部分浏览器自动播放限制。

3.6 poster：封面图片

• 作用： 指定在视频加载完成前、视频播放过程中以及视频播放结束后显示的图片 URL。
• 用途： 为用户提供视频内容的预览，提高用户点击播放的意愿。

<video controls poster="path/to/poster-image.jpg">
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持 video 元素。
</video>

3.7 preload：预加载策略

• 作用： 提示浏览器应如何预加载视频文件。这不是强制指令，浏览器可能会根据自身优化策略忽略它。
• 可选值：
  • none：不预加载视频数据。
  • metadata：只预加载视频的元数据（如时长、尺寸、首帧等）。这是默认值，也是最推荐的值，因为它能在不消耗过多带宽的情况下，让浏览器准备好显示视频时长等信息。
  • auto：预加载整个视频文件，即使用户不一定会播放。这会消耗大量带宽。
• 建议： 如果视频是页面核心内容且用户很可能播放，可以使用 metadata。如果视频是背景视频或用户不一定播放，使用 none。

3.8 width / height：设置视频尺寸

• 作用： 设置视频播放器的宽度和高度（以像素为单位）。
• 注意： 仅设置这些属性可能会导致视频变形，通常配合 CSS 的 max-width: 100%; height: auto; 或 object-fit 属性来实现响应式和正确的宽高比。

3.9 playsinline：iOS 设备内联播放

• 作用： 布尔属性。当视频在 iOS 设备上播放时，如果存在此属性，视频会尝试在页面内联播放，而不是自动进入全屏模式。
• 用途： 对于背景视频或小视频，提供更好的移动端用户体验。

3.10 crossorigin：跨域资源共享

• 作用： 配置元素的 CORS (跨域资源共享) 请求。
• 可选值： anonymous, use-credentials。
• 用途： 当视频文件是从不同于当前页面的域加载时，如果需要对视频数据进行 Canvas 绘制或 WebGL 处理，就可能需要设置此属性。

4. 支持多种视频格式：解决兼容性问题

不同浏览器对视频格式及其编解码器 (Codecs) 的支持程度不一，因此提供多种格式以确保广泛兼容性是最佳实践。

4.1 为什么需要多种格式？

• H.264 (MP4)： 广泛支持，尤其是 Apple 设备和 Inter*** Explorer。但其编码器通常是商业的。
• WebM (VP8/VP9)： Google 开发，开放、免版税，在 Chrome、Firefox、Opera 中支持良好。
• Ogg Theora (.ogv)： 开放、免版税，但支持度不如 WebM。

为了确保所有主流浏览器都能播放您的视频，您应该提供至少两种广泛支持的格式。

4.2 <source> 标签的使用

<source> 标签用于在 <video> 或 <audio> 标签内部指定多个媒体资源。浏览器会尝试加载它支持的第一个资源。

<video controls poster="path/to/poster-image.jpg">
    <!-- 优先尝试 WebM 格式 -->
    <source src="video.webm" type="video/webm">
    <!-- 如果 WebM 不支持，尝试 MP4 格式 -->
    <source src="video.mp4" type="video/mp4">
    <!-- 如果浏览器不支持 video 标签，显示此内容 -->
    <p>您的浏览器不支持 HTML5 video 元素。请 <a href="video.mp4">点击此处下载视频</a>。</p>
</video>

• src 属性： 指定视频文件的 URL。
• type 属性： 非常重要！ 它告诉浏览器媒体的 MIME 类型（例如 video/webm, video/mp4）。浏览器会先检查 type 属性，如果它不支持该类型，就会跳过该源，避免下载不兼容的文件，从而提高性能。

4.3 常见视频格式与编解码器 (Codecs)

格式	MIME 类型	视频编解码器	音频编解码器	浏览器支持 (大致)
MP4	video/mp4	H.264	AAC	几乎所有浏览器 (Chrome, Firefox, Safari, Edge, IE)
WebM	video/webm	VP8 / VP9	Vorbis / Opus	Chrome, Firefox, Edge, Opera
Ogg	video/ogg	Theora	Vorbis	Firefox, Chrome, Opera

4.4 最佳格式组合

通常提供 MP4 (H.264/AAC) 和 WebM (VP8/VP9) 的组合就能覆盖绝大多数用户。先放 WebM 可能会更优化，因为它通常文件更小，且免版税。

5. 字幕与描述：<track> 标签实现无障碍性

<track> 标签用于为 <video> 或 <audio> 元素指定文本轨道（如字幕、标题、描述等），极大地增强了媒体内容的无障碍性。

5.1 <track> 标签的必要性

• 听力障碍用户： 通过字幕 (Subtitles) 或标题 (Captions) 了解视频对话。
• 视力障碍用户： 通过描述 (Descriptions) 了解视频中视觉内容的语音描述。
• 语言学习者： 提供多种语言的字幕。
• 静音环境： 用户在公共场合或不允许声音的环境下也能理解视频内容。

5.2 属性详解：src, kind, srclang, label, default

<video controls src="path/to/video.mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="captions_zh.vtt" kind="captions" srclang="zh" label="中文 (中国大陆)" default>
    <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="Audio Description">
</video>

• src： 必需。指定 WebVTT 文件的 URL。
• kind： 必需。定义文本轨道的类型。
  • subtitles：翻译对话，适用于听力正常但不懂视频语言的用户。
  • captions：除了对话，还包括背景音效、音乐提示等，适用于听力障碍用户。
  • descriptions：描述视频的视觉内容，适用于视力障碍用户。
  • chapters：用于导航的章节标题。
  • metadata：用户不可见的元数据，通常由 JavaScript 处理。
• srclang： 必需 (当 kind 为 subtitles 或 captions 时)。指定文本轨道的语言代码（如 en, zh, es）。
• label： 可选。显示在浏览器媒体控件中的文本轨道标题，供用户选择。
• default： 布尔属性。如果存在，表示这是默认选中的轨道。一个 <video> 元素只能有一个 default 属性的 <track>。

5.3 WebVTT (Web Video Text Tracks) 格式

<track> 标签引用的文件必须是 WebVTT 格式 (.vtt 文件)。它是一种简单的文本格式，用于同步文本与媒体内容。

example.vtt 文件内容示例：

WEBVTT

00:00:02.000 --> 00:00:05.000
- Hello, and wel***e to our demo!

00:00:06.500 --> 00:00:10.000
(Upbeat music plays)
- This video showcases the power of HTML5.

6. JavaScript 控制 <video> 元素

通过 JavaScript，您可以实现完全自定义的播放器界面、动态播放逻辑和更复杂的视频交互。

6.1 获取 <video> 元素

const myVideo = document.getElementById('myVideoPlayer');
// 或 document.querySelector('video');

6.2 常用方法

• play()：开始或恢复播放视频。
• pause()：暂停播放视频。
• load()：重新加载视频资源。当 src 属性或 <source> 标签发生变化时，需要调用此方法。
• canPlayType(type)：检查浏览器是否支持特定的媒体类型。返回 "" (不支持), "maybe" (可能支持), "probably" (很可能支持)。

6.3 常用属性

• currentTime：视频的当前播放时间（秒）。可读写。
• duration：视频的总时长（秒）。只读。
• volume：视频的音量，范围 0.0 (静音) 到 1.0 (最大音量)。可读写。
• paused：布尔值，表示视频是否暂停。只读。
• ended：布尔值，表示视频是否已播放完毕。只读。
• muted：布尔值，表示视频是否静音。可读写。
• src：视频的 URL。可读写。
• loop：布尔值，表示视频是否循环播放。可读写。
• autoplay：布尔值，表示视频是否自动播放。可读写。
• readyState: 表示视频的当前加载状态。
• videoWidth / videoHeight: 视频的原始宽度/高度（像素）。

6.4 常用事件

• play：视频开始播放时触发。
• pause：视频暂停时触发。
• ended：视频播放完毕时触发。
• timeupdate：currentTime 属性更新时（通常每秒多次）触发，用于更新进度条。
• volumechange：volume 或 muted 属性改变时触发。
• canplay：浏览器可以开始播放视频，但可能需要缓冲才能完整播放。
• canplaythrough：浏览器认为它可以在不停止缓冲的情况下播放完整个视频。
• loadedmetadata：视频元数据（如时长、尺寸）加载完毕时触发。
• progress：浏览器正在下载媒体数据时周期性触发。
• waiting：视频播放暂停，等待数据时触发。
• playing：视频开始/恢复播放时触发。
• error：视频加载或播放出错时触发。

6.5 实际场景应用：构建自定义播放器

通过 JavaScript 结合 HTML 和 CSS，您可以完全自定义视频播放器的外观和功能。

<div class="custom-video-player">
    <video id="myCustomVideo" preload="metadata" poster="my-video-poster.jpg">
        <source src="video.webm" type="video/webm">
        <source src="video.mp4" type="video/mp4">
        <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
        您的浏览器不支持 video 元素。
    </video>
    <div class="controls">
        <button id="playPauseBtn">播放</button>
        <input type="range" id="progressBar" value="0" min="0" max="100">
        <span id="currentTimeDisplay">0:00</span> / <span id="durationDisplay">0:00</span>
        <input type="range" id="volumeBar" value="100" min="0" max="100">
        <button id="muteBtn">静音</button>
        <button id="fullscreenBtn">全屏</button>
    </div>
</div>

// (JavaScript 逻辑与 HTML Audio 示例类似，但会增加全屏控制)
// 参见下面的完整代码示例

7. 响应式视频：适应一切屏幕尺寸

视频在不同屏幕尺寸下保持正确的比例和不溢出布局是响应式设计的重要一环。

7.1 流式尺寸：max-width: 100%; height: auto;

• 这是最基本且常用的方法。
• max-width: 100%; 确保视频不会超出其父容器的宽度。
• height: auto; 确保视频在宽度变化时能保持其原始宽高比，避免视频变形。

video {
    max-width: 100%;
    height: auto;
    display: block; /* 避免底部额外空白 */
}

7.2 保持宽高比：Padding-Bottom Hack (宽高比盒子)

• 对于嵌入的 <iframe> (如 YouTube 视频) 或 <video> 标签，如果需要精确控制宽高比（例如 16:9），可以使用此方法。
• 通过父容器的 padding-bottom 属性，利用百分比是相对于父元素宽度计算的特性，来创建一个保持特定宽高比的容器。

<div class="video-container">
    <video controls src="my-video.mp4"></video>
    <!-- 或 iframe -->
    <!-- <iframe src="https://www.youtube.***/embed/..." frameborder="0" allowfullscreen></iframe> -->
</div>

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 宽高比 (9/16 = 0.5625) */
    height: 0; /* 必须为0 */
    overflow: hidden; /* 隐藏溢出内容 */
    max-width: 100%; /* 确保容器自身也是响应式的 */
    background-color: black; /* 视频加载前的背景色 */
}
.video-container video,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

7.3 object-fit 属性

• 用于控制 <img> 或 <video> 如何在内容框中填充，类似于 background-size 对背景图片的作用。
• fill (默认): 拉伸以填充内容框。
• contain: 保持宽高比，缩放以适应内容框。
• cover: 保持宽高比，裁剪以填充内容框。
• none: 保持原始尺寸。
• scale-down: none 或 contain 中较小的一个。

video {
    width: 100%;
    height: 300px; /* 固定高度 */
    object-fit: cover; /* 保持宽高比，裁剪以填充 */
}

8. 无障碍性 (A***essibility) 考量

确保您的视频内容对所有用户（包括残障人士）都可用。

8.1 controls 属性

• 始终提供 controls，无论是默认的还是自定义的，确保用户可以控制播放。

8.2 <track> 标签的充分利用

• 为所有视频提供字幕 (captions)，并考虑提供翻译字幕 (subtitles)。
• 对于包含重要视觉信息的视频，提供音频描述 (descriptions)。
• 对于长视频，提供章节信息 (chapters) 帮助用户导航。

8.3 提供视频转录 (Transcripts)

• 对于播客、访谈或包含重要信息的视频，提供完整的文字转录是至关重要的。这不仅方便听力障碍用户，也方便在嘈杂环境下或不方便观看视频的用户。
• 文字转录对于 SEO 也非常有益，因为它提供了可索引的文本内容。

8.4 自定义控件的键盘导航与 ARIA 属性

• 如果您使用自定义控件，确保所有按钮和进度条都可以通过键盘 Tab 键进行导航和操作。
• 为自定义控件提供清晰的 :focus 样式。
• 使用 WAI-ARIA (Web A***essibility Initiative - A***essible Rich Inter*** Applications) 属性来增强自定义控件的语义，例如 aria-label, role="slider", aria-valuemin, aria-valuemax, aria-valuenow 等。

9. 性能优化与加载策略

视频文件通常较大，因此性能优化至关重要。

9.1 视频文件压缩与编码

• 使用适当的视频编码器（如 H.264, VP9）和参数（比特率、分辨率）来平衡视频质量和文件大小。
• 使用工具压缩视频文件，去除不必要的元数据。
• 使用渐进式下载优化（fast start），确保视频可以在完全下载前就开始播放。

9.2 懒加载 (Lazy Loading)

• 对于位于首屏之外的视频，可以使用懒加载技术。当用户滚动到它们附近时才加载这些资源，减少初始页面加载时间。
• 一些 JavaScript 库可以帮助实现视频的懒加载。

9.3 CDN (内容分发网络)

• 将视频文件存储在 CDN 上，可以加速全球用户的访问速度。

9.4 preload 属性的合理使用

• 根据视频的重要性，合理设置 preload 属性：
  • none： 视频在页面加载时不立即需要，用户可能不会播放。
  • metadata： (默认且推荐) 仅加载元数据，提供播放前的信息。
  • auto： 视频是页面核心内容，用户几乎肯定会播放。

10. 最佳实践

10.1 始终提供默认控件

即使您计划构建自定义控件，在开发初期或作为备用，保留 controls 属性可以确保用户始终有办法播放视频。当自定义控件准备好后，再通过 JavaScript 移除或隐藏原生控件。

10.2 提供多种格式

至少提供 MP4 和 WebM 两种格式，以最大化浏览器兼容性。

10.3 谨慎使用 autoplay

除非有充分的理由并且确定用户会期望自动播放（例如背景视频且静音），否则避免使用 autoplay。如果使用，请务必将其设置为 muted。

10.4 优化文件大小

对视频文件进行压缩和编码，平衡质量与文件大小，以减少加载时间。

10.5 包含字幕和描述

通过 <track> 标签提供字幕和音频描述，提高无障碍性。

10.6 响应式设计

确保视频在不同屏幕尺寸下都能正确显示，不溢出布局。

11. 代码示例

11.1 带有多种格式和字幕的视频

这个例子展示了如何通过 <source> 提供多种视频格式，并通过 <track> 提供字幕，并包含备用内容。

<!DOCTYPE html>
<html lang="zh-***">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Video 多格式与字幕示例</title>
    <style>
        body { font-family: sans-serif; margin: 20px; background-color: #e0f2f7; }
        .video-wrapper {
            width: 90%;
            max-width: 800px;
            margin: 30px auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            overflow: hidden;
        }
        h1 { text-align: center; color: #007bff; margin-bottom: 25px; }
        video {
            width: 100%; /* 确保视频是响应式的 */
            height: auto;
            display: block; /* 移除底部空白 */
        }
        .caption {
            text-align: center;
            padding: 15px;
            font-size: 0.9em;
            color: #666;
            border-top: 1px solid #eee;
        }
        a { color: #007bff; text-decoration: none; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <div class="video-wrapper">
        <h1>HTML5 视频播放器 (多格式与字幕)</h1>
        <video controls preload="metadata" poster="https://via.placeholder.***/800x450/007bff/FFFFFF?text=Video+Poster">
            <!-- 假设您有这些视频文件 -->
            <source src="https://assets.htmlacademy.ru/assets/media/example-videos/01_bunny.webm" type="video/webm">
            <source src="https://assets.htmlacademy.ru/assets/media/example-videos/01_bunny.mp4" type="video/mp4">
            
            <!-- 英文字幕 -->
            <track label="English" kind="subtitles" srclang="en" 
                   src="https://raw.githubusercontent.***/masterofcode/html5-video-player/master/captions/en.vtt" default>
            <!-- 中文字幕 (示例，您需要自己创建 .vtt 文件) -->
            <!-- <track label="中文" kind="subtitles" srclang="zh" src="path/to/your/chinese-subtitles.vtt"> -->
            
            <!-- 如果浏览器不支持 HTML5 video 元素 -->
            <p>您的浏览器不支持 HTML5 video 元素。请 <a href="https://assets.htmlacademy.ru/assets/media/example-videos/01_bunny.mp4">点击此处下载视频 (MP4)</a>。</p>
        </video>
        <div class="caption">
            <p>这是一个演示视频，包含多格式支持和英文字幕。</p>
        </div>
    </div>
</body>
</html>

11.2 带有自定义控件的响应式视频播放器

此示例展示了如何使用 HTML、CSS 和 JavaScript 构建一个简单的自定义视频播放器，并使其响应式。

<!DOCTYPE html>
<html lang="zh-***">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义响应式视频播放器</title>
    <style>
        body { font-family: sans-serif; margin: 20px; background-color: #f0f8ff; }
        .player-wrapper {
            width: 90%;
            max-width: 800px;
            margin: 30px auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            overflow: hidden;
        }
        h1 { text-align: center; color: #007bff; margin-bottom: 25px; }

        .custom-video-player {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 宽高比 */
            height: 0;
            overflow: hidden;
            background-color: black;
        }
        #myCustomVideo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        .controls {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px;
            background-color: #333;
            color: white;
        }
        .controls button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.2s ease;
            white-space: nowrap;
        }
        .controls button:hover { background-color: #0056b3; }

        #progressBar {
            flex-grow: 1;
            height: 6px;
            -webkit-appearance: none;
            appearance: none;
            background: #555;
            border-radius: 3px;
            cursor: pointer;
            outline: none;
        }
        #progressBar::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #007bff;
            border: 2px solid white;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
        #progressBar::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #007bff;
            border: 2px solid white;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }

        .time-display {
            font-size: 0.85rem;
            color: #***c;
            white-space: nowrap;
        }
        #volumeBar {
            width: 70px;
            height: 5px;
            -webkit-appearance: none;
            appearance: none;
            background: #555;
            border-radius: 3px;
            cursor: pointer;
            outline: none;
        }
        #volumeBar::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #007bff;
            border: 1px solid white;
            box-shadow: 0 0 3px rgba(0,0,0,0.2);
        }
        #volumeBar::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #007bff;
            border: 1px solid white;
            box-shadow: 0 0 3px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="player-wrapper">
        <h1>我的自定义响应式视频播放器</h1>

        <div class="custom-video-player">
            <video id="myCustomVideo" preload="metadata" 
                   poster="https://via.placeholder.***/800x450/007bff/FFFFFF?text=Custom+Video+Player">
                <source src="https://assets.htmlacademy.ru/assets/media/example-videos/01_bunny.webm" type="video/webm">
                <source src="https://assets.htmlacademy.ru/assets/media/example-videos/01_bunny.mp4" type="video/mp4">
                <track label="English" kind="subtitles" srclang="en" 
                       src="https://raw.githubusercontent.***/masterofcode/html5-video-player/master/captions/en.vtt" default>
                您的浏览器不支持 HTML5 video 元素。
            </video>
        </div>

        <div class="controls">
            <button id="playPauseBtn" aria-label="播放/暂停">播放</button>
            <input type="range" id="progressBar" value="0" min="0" max="100" aria-label="播放进度" role="slider">
            <span class="time-display" id="currentTimeDisplay">0:00</span> / <span class="time-display" id="durationDisplay">0:00</span>
            <input type="range" id="volumeBar" value="100" min="0" max="100" aria-label="音量控制" role="slider">
            <button id="muteBtn" aria-label="静音/取消静音">静音</button>
            <button id="fullscreenBtn" aria-label="全屏">全屏</button>
        </div>
        <p style="text-align: center; font-size: 0.85rem; color: #888; padding: 15px 0;">
            视频来源：<a href="https://htmlacademy.ru/" target="_blank">HTML Academy</a>
        </p>
    </div>

    <script>
        const video = document.getElementById('myCustomVideo');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const progressBar = document.getElementById('progressBar');
        const currentTimeDisplay = document.getElementById('currentTimeDisplay');
        const durationDisplay = document.getElementById('durationDisplay');
        const volumeBar = document.getElementById('volumeBar');
        const muteBtn = document.getElementById('muteBtn');
        const fullscreenBtn = document.getElementById('fullscreenBtn');

        function formatTime(seconds) {
            if (isNaN(seconds) || seconds < 0) return "0:00";
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
        }

        // 播放/暂停
        playPauseBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playPauseBtn.textContent = '暂停';
                playPauseBtn.setAttribute('aria-label', '暂停');
            } else {
                video.pause();
                playPauseBtn.textContent = '播放';
                playPauseBtn.setAttribute('aria-label', '播放');
            }
        });

        // 视频元数据加载完成
        video.addEventListener('loadedmetadata', () => {
            durationDisplay.textContent = formatTime(video.duration);
            progressBar.max = Math.floor(video.duration);
            progressBar.setAttribute('aria-valuemax', Math.floor(video.duration));
        });

        // 更新进度条和时间显示
        video.addEventListener('timeupdate', () => {
            progressBar.value = video.currentTime;
            currentTimeDisplay.textContent = formatTime(video.currentTime);
            progressBar.setAttribute('aria-valuenow', Math.floor(video.currentTime));
            progressBar.setAttribute('aria-valuetext', formatTime(video.currentTime) + ' of ' + formatTime(video.duration));
        });

        // 拖动进度条
        progressBar.addEventListener('input', () => {
            video.currentTime = progressBar.value;
        });

        // 音量控制
        volumeBar.addEventListener('input', () => {
            video.volume = volumeBar.value / 100;
            muteBtn.textContent = video.volume === 0 ? '取消静音' : '静音';
            muteBtn.setAttribute('aria-label', video.volume === 0 ? '取消静音' : '静音');
            volumeBar.setAttribute('aria-valuenow', volumeBar.value);
        });

        // 静音/取消静音
        muteBtn.addEventListener('click', () => {
            video.muted = !video.muted;
            muteBtn.textContent = video.muted ? '取消静音' : '静音';
            muteBtn.setAttribute('aria-label', video.muted ? '取消静音' : '静音');
            volumeBar.value = video.muted ? 0 : video.volume * 100;
            volumeBar.setAttribute('aria-valuenow', volumeBar.value);
        });

        // 全屏
        fullscreenBtn.addEventListener('click', () => {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) { /* Firefox */
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { /* IE/Edge */
                video.msRequestFullscreen();
            }
        });

        // 播放结束
        video.addEventListener('ended', () => {
            playPauseBtn.textContent = '播放';
            playPauseBtn.setAttribute('aria-label', '播放');
            progressBar.value = 0;
            currentTimeDisplay.textContent = formatTime(0);
            progressBar.setAttribute('aria-valuenow', 0);
        });

        // 确保页面加载时进度条和音量条的初始 ARIA 值正确
        video.addEventListener('canplay', () => {
            progressBar.setAttribute('aria-valuemin', 0);
            volumeBar.setAttribute('aria-valuemin', 0);
            volumeBar.setAttribute('aria-valuemax', 100);
            volumeBar.setAttribute('aria-valuenow', video.volume * 100);
        });

        // 处理视频加载错误
        video.addEventListener('error', () => {
            console.error("视频加载或播放出错。");
            alert("视频加载失败，请检查文件路径或浏览器支持。");
        });
    </script>
</body>
</html>

12. 总结

HTML5 <video> 标签是现代 Web 开发中不可或缺的一部分，它彻底改变了网页中嵌入和管理视频内容的方式。通过深入理解其属性、多格式支持、无障碍性特性以及 JavaScript API，您可以创建出功能强大、用户友好且兼容性广泛的视频体验。

核心要点：

• 使用 <video> 标签直接嵌入视频，告别插件。
• controls 属性提供默认播放器界面，或通过 JavaScript 实现自定义控件。
• 通过 <source> 标签和 type 属性提供多种视频格式（推荐 MP4 和 WebM 组合），以最大化浏览器兼容性。
• autoplay 属性应谨慎使用，并注意浏览器限制，通常需要 muted 配合。
• poster 属性用于设置封面图，preload 属性用于优化加载。
• <track> 标签是实现字幕、标题、描述的关键，极大地增强了无障碍性。
• JavaScript 提供了丰富的 API 来精确控制视频的播放状态、音量、进度和全屏。
• 通过 CSS (max-width: 100%; height: auto; 或 Padding-Bottom Hack) 确保视频的响应式布局。
• 始终关注无障碍性，为视频提供文字转录，并确保自定义控件的键盘可访问性和 ARIA 语义。
• 优化视频文件大小和利用 CDN 是提升性能的关键。

通过遵循这些指南，您将能够有效地在您的网站中集成高质量的视频内容，为用户提供丰富的多媒体体验。