Web 视频开发完全指南：从入门到精通

第一章：起步 ------ 原生 `<video>` 标签

1.1 最小可用代码

html 复制代码

<video src="https://example.com/demo.mp4" controls autoPlay playsInline />

一行代码即可播放视频。controls 给出浏览器默认控件，playsInline 让移动端内联播放而非全屏弹出。

1.2 常用属性速查

属性	作用	示例
`src`	视频地址	`"video.mp4"`
`controls`	显示播放控件	布尔
`autoPlay`	自动播放（需配合 `muted`）	布尔
`muted`	静音	布尔
`loop`	循环播放	布尔
`poster`	封面图	`"cover.jpg"`
`playsInline`	移动端内联播放	布尔
`preload`	预加载策略	`"none"` / `"metadata"` / `"auto"`

1.3 原生能做到的事

播放/暂停/拖动进度/音量调节/全屏 ------ 浏览器内置
设置封面 ------ poster 属性
字幕 ------ <track> 子标签
画中画 ------ document.pictureInPictureEnabled API
倍速 ------ JS 设置 videoEl.playbackRate = 2（无 UI，需自己做按钮）
首帧截图 ------ 利用 onLoadedMetadata + Canvas 绘制

1.4 适用场景

"用户只需要看"------ 内部后台预览、详情页视频展示、表单附件预览。

第二章：视频格式 ------ 容器与编码

2.1 两个概念

容器（Container） ：文件的"包装盒"，如 .mp4、.webm、.mkv
编码（Codec）：视频的"压缩算法"，如 H.264、H.265、VP9、AV1

2.2 格式兼容性

容器	编码	浏览器兼容性	特点
MP4	H.264 + AAC	全平台 ✅	首选格式，兼容性最好
MP4	H.265/HEVC	Safari ✅ Chrome ⚠️	同画质体积减半，兼容差
WebM	VP9	Chrome/Firefox/Edge ✅	开源免费，YouTube 在用
WebM	AV1	新版浏览器	下一代标准，压缩率最优
OGG	Theora	Firefox/Chrome	老格式，逐渐淘汰
FLV	H.264	❌ 需 flv.js	直播常用
TS 切片	H.264	❌ 需 hls.js	HLS 直播/点播

结论：后台系统统一用 MP4(H.264) 即可覆盖所有浏览器。

第三章：流媒体协议 ------ 当视频不再是一个文件

3.1 什么是流媒体？

传统方式：下载完整文件 → 播放

流媒体：边传输边播放，像水龙头一样"流"出来

3.2 点播 vs 直播

	点播（VOD）	直播（Live）
定义	播放预先录制好的视频	播放实时产生的视频
进度条	可自由拖动	不可拖动（仅时移回看）
延迟	不敏感	极敏感（越低越好）
举例	B 站视频、Netflix	抖音直播、Twitch

3.3 主流协议一句话解释

协议	一句话	延迟
HLS	把视频切成小 .ts 片段，用 .m3u8 索引，浏览器逐片下载播放	10-30s
DASH	类似 HLS 但是国际标准，用 .mpd 索引，支持自适应码率	10-30s
HTTP-FLV	把 FLV 流通过 HTTP 长连接传输，B 站方案	1-3s
RTMP	Flash 时代推流协议，推流端仍在用，播放端已淘汰	1-3s
WebRTC	P2P 实时通信，视频通话/连麦用	<1s

3.4 DASH 自适应码率（ABR）

同一视频编码成多个清晰度版本（360p/720p/1080p/4K），播放器根据网速自动无缝切换。用户网好看高清，网差自动降级，全程不卡顿。

第四章：视频下载 ------ 五种方式

方式	原理	代码示例	适用场景
浏览器右键下载	用户右键 → 另存为	无需代码	MP4 直链，最简单
`<a download>` 标签	创建带 `download` 属性的链接触发	`<a href="x.mp4" download>`	同源 MP4 文件
Blob 编程下载	fetch 获取 Blob → createObjectURL → 模拟点击	你项目中的 `promiseGetBlob + saveAs`	跨域/需鉴权的资源
服务端代理下载	后端请求资源 → 设置 `Content-Disposition: attachment`	后端接口	隐藏真实地址、防盗链
切片合并下载	下载所有 .ts 切片 → ffmpeg/JS 合并为 MP4	ffmpeg 或 mux.js	HLS/DASH 视频

第五章：何时升级到播放器插件

5.1 决策树

css 复制代码

需要播放 HLS/FLV/DASH？ ──→ 是 ──→ 必须用插件
        ↓ 否
需要倍速/截图/弹幕 UI？ ──→ 是 ──→ 建议用插件（省开发量）
        ↓ 否
需要防下载/DRM 加密？ ──→ 是 ──→ 必须用插件 + 服务端
        ↓ 否
需要自定义播放器皮肤？ ──→ 是 ──→ 建议用插件
        ↓ 否
──→ 原生 <video> 足矣 ✅

5.2 插件选型推荐

需求	推荐	理由
轻量增强（倍速、美观UI）	Plyr	50KB，开箱即用
全功能（截图/弹幕/手势）	xgplayer	字节出品，移动端优化
直播 + 点播全覆盖	Video.js + 插件生态	社区最大，插件最多
仅需 HLS 能力	原生 `<video>` + hls.js	最小改动，加一个库即可

第六章：终极对比表

能力维度	原生 `<video>`	播放器插件
MP4/WebM 播放	✅	✅
HLS/FLV/DASH 播放	❌	✅
自定义封面	✅ poster	✅ 动态封面
倍速 UI	❌	✅
截图按钮	❌	✅
弹幕	❌	✅
多清晰度切换	❌	✅
缩略图预览	❌	✅
手势操作	❌	✅
键盘快捷键	❌	✅
记忆续播	❌	✅
下载按钮	❌ 需自写	✅
防下载/DRM	❌	✅
包体积	0 KB	50-300 KB
学习成本	极低	中等
维护成本	零	需跟进版本

一句话总结：能用原生就用原生，按需渐进增强，插件是锦上添花而非必需品。