引言：从博客需求到技术探究
最近在撰写一篇博客时，需要嵌入一段视频作为补充内容，这促使我重新审视了在网页中嵌入视频的各种方法。从直接使用视频网站的分享代码，到采用开源播放器，再到HTML5原生的video标签，每种技术都有其独特的应用场景与限制。本文将记录我的学习心得，重点介绍HTML5 video标签的用法、属性以及现代浏览器对视频播放的支持情况。
嵌入视频的常见方法
方法一：视频网站分享代码
一种流行的做法是直接复制各大视频平台（如腾讯视频、YouTube）提供的分享代码，通过iframe等方式嵌入。这种方法简单快捷，但缺点是依赖外部服务，可能存在加载速度慢、广告干扰或平台政策变化等问题。
示例代码（腾讯视频）：
1 | <iframe src="https://v.qq.com/txp/iframe/player.html?vid=示例视频ID" allowfullscreen></iframe> |
方法二：开源播放器库
在HTML5普及之前，许多浏览器不支持直接播放视频文件，因此开发者常依赖JavaScript播放器库（如早期的Video.js、jPlayer）。如今，虽然HTML5已内建视频播放功能，但像DPlayer、ArtPlayer这样的开源播放器仍然流行，因为它们提供了丰富的自定义功能（如美化界面、弹幕互动、字幕支持等）。
HTML5 Video标签详解
HTML5引入了<video>标签，使视频嵌入成为浏览器的原生功能，无需额外依赖库。这大大简化了开发流程，并提升了性能。
主要属性一览
| 属性名称 | 说明 |
|---|---|
src |
指定视频文件的URL地址 |
crossorigin |
处理跨域资源共享（CORS），常用值anonymous |
poster |
设置视频封面图片的URL |
preload |
控制视频预加载行为（如auto、metadata、none） |
autoplay |
布尔值，视频是否自动播放（需注意浏览器策略限制） |
playsinline |
适配移动端屏幕，防止视频全屏播放 |
loop |
布尔值，视频是否循环播放 |
muted |
布尔值，是否静音播放 |
controls |
布尔值，是否显示播放控制条 |
width / height |
设置播放器的宽度和高度，影响视频显示比例 |
基本用法示例
1 | <video src="video.mp4" controls width="640" height="360" poster="cover.jpg"> |
更灵活的做法是使用<source>子标签指定多个视频格式，以兼容不同浏览器：
1 | <video controls width="640" height="360"> |
浏览器兼容性与视频格式支持
通过Can I use…工具可以查询浏览器对<video>标签的支持情况。目前，全球约98.8%的浏览器已支持该标签，但视频编码格式（如AV1、H.265）的支持度仍参差不齐。例如，H.265编码在安防领域常用，但在许多浏览器中兼容性较差，可能需要额外解码库或格式转换。
高级功能：使用Track标签添加字幕
<video>和<audio>标签支持<track>子标签，用于外挂字幕或章节信息。这在多语言内容或无障碍访问中非常实用。
字幕文件格式：WebVTT
外挂字幕需使用WebVTT格式（文件后缀.vtt），其结构简单易读。
示例.vtt文件内容：
1 | WEBVTT |
制作与工具推荐
- 手动创建：按WebVTT规范编写文本文件。
- 在线工具：如WebVTT视频字幕在线生成工具，可简化字幕制作流程。
- 详细指南：参考《玩转HTML5 Video视频WebVTT字幕使用样式与制作》一文，深入了解样式定制与高级用法。
嵌入字幕示例
1 | <video controls> |
注意：浏览器兼容性可能影响字幕显示。例如，在某些Chrome版本中，字幕可能无法正常加载（可能与缓存或渲染引擎有关），而Edge浏览器则表现正常。建议在开发时进行多浏览器测试。
结语
HTML5的<video>标签为网页视频嵌入提供了强大而标准化的解决方案。从基本播放到高级功能如字幕支持，它都能满足大多数需求。结合开源播放器库，开发者可以构建更互动、美观的视频体验。随着浏览器技术演进，视频播放将更加高效与无障碍。
本文基于实际博客开发经验整理，希望对前端开发者有所启发。