单src属性常失败因服务端content-type错误、ios不支持h.265、无用户交互时play()被拒；多source+metadata预加载+muted+playsinline才可靠 autoplay。
直接用 <video></video> 标签加 <source></source> 是最快、最稳的方案，不需要任何第三方库，但必须配对格式、正确 MIME、加 muted 才能 autoplay 成功。
为什么单 src 属性经常失败
看似一行代码就能播：<video src="video.mp4"></video>，实际在真实环境里极易静默失败：
- 服务端返回
Content-Type: text/plain而不是video/mp4，浏览器直接拒解码，控制台无报错 - iOS Safari 完全不支持 H.265（HEVC），只靠 MP4 源会黑屏
- Chrome 在无用户交互时调用
play()会抛DOMException: play() failed because the user didn't interact with the document first
<source></source> 多源 fallback 的实操写法
用多个 <source></source> 显式声明不同编码/容器组合，由浏览器自动选可用项：
<video controls preload="metadata" muted autoplay playsinline><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><source src="video.ogg" type="video/ogg"></source></source></source></video>
关键点：
-
preload="metadata"：只加载头信息（时长、宽高、编码），100–300ms 完成，不影响首屏 -
muted+autoplay：绕过 Chrome/Safari 的有声自动播放拦截 -
playsinline：防止 iOS Safari 强制全屏，保持页面流完整 - 服务端必须确保
.mp4返回video/mp4，.webm返回video/webm
需要 HLS/DASH/RTMP/RTSP 时怎么选
原生 <video></video> 不支持这些协议，必须引入 JS 播放器，但选择逻辑很明确：
- 要弹幕 → 用
DPlayer，Canvas 渲染轻量、兼容性好 - 要多协议 + 插件扩展 → 用
ArtPlayer，HLS/DASH/FLV/字幕/画中画全内置 - 要企业级广告/VR/小窗 → 用
Fluid Player，VAST/VPAID/VR 支持开箱即用 - 要低延迟 RTSP 流 → 必须走服务端转协议（如 EasyCVR 输出 HTTP-FLV 或 HLS），前端再用
MPEGTS.js或Hls.js播放
H.265 支持目前仍需 WebAssembly 解码器（如 mpegts.js 内置 wasm worker），纯 HTML5 无法硬解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
