用标签插入本地视频需确保路径正确、格式兼容（优先h.264+aac的mp4）、添加controls属性，并用多格式回退（mp4在前、webm在后），同时注意file://协议限制、移动端静音要求及浏览器编码支持差异。
怎么用 <video></video> 标签插入本地视频
直接写 <video src="demo.mp4" controls></video> 就能播，但实际经常白屏或报错。关键不是“能不能写”，而是路径对不对、格式支不支持、有没有加 controls 属性让用户操作。
- 路径必须相对正确：如果 HTML 在
/pages/index.html，视频在同级/videos/demo.mp4，src得写"../videos/demo.mp4"或绝对路径"/videos/demo.mp4" - 浏览器默认不自动播放带声音的视频：加
muted才能配合autoplay（比如<video autoplay muted loop></video>） -
controls不是可选装饰——没它用户没法暂停、拖进度，别省 - 别依赖单个
src：不同浏览器支持的编码不同，优先提供.mp4（H.264+AAC），再 fallback 到.webm（VP8/VP9）
为什么 <source></source> 比单个 src 更可靠
因为 Chrome 可能拒绝播一个看似正常的 .mp4 文件——它其实检测到编码是 HEVC（H.265），而桌面 Chrome 目前只对 macOS 原生支持 HEVC 解码。用 <source></source> 能让浏览器按顺序试播，直到找到它认的格式。
- 写法是：
<video controls><source src="demo.mp4" type="video/mp4"><source src="demo.webm" type="video/webm"></source></source></video> -
type属性不能省：它告诉浏览器“这个文件大概是什么编码”，避免下载后才发现解不了 - 顺序很重要：把兼容性最广的
.mp4放前面，.webm放后面做降级，别反过来 - 别指望
<source></source>能自动转码——它只是声明“我有这几个候选”，最终播哪个由浏览器决定
常见报错和对应检查点
控制台报 DOMException: The element has no supported sources，基本等于浏览器扫了一圈 <source></source> 全不认识。不是代码漏了标签，而是文件本身或路径出了问题。
- 检查文件是否真被服务器返回：打开开发者工具 Network 面板，点那个视频请求，看 Status 是不是 200，Content-Type 是不是
video/mp4（不是text/plain或application/octet-stream） - 用 VLC 或 ffprobe 看编码：运行
ffprobe -v quiet -show_entries stream=codec_name,width,height -of csv demo.mp4，确认视频流是h264，音频流是aac - Mac 上用 QuickTime 导出时默认可能选 HEVC——手动切回 “H.264” 才保险
- 本地双击 HTML 能播，但用
file://协议打开时 Chrome 会禁 video 加载（CORS 限制），必须起个本地服务（比如npx serve）
移动端自动播放和静音的硬性限制
iOS Safari 和 Android Chrome 对自动播放卡得极死：没用户手势触发 + 有声音 = 直接拒播。这不是 bug，是策略。
立即学习“前端免费学习笔记（深入）”；
- 想自动播就得加
muted，哪怕你后续用 JS 解除静音（iOS 17+ 允许，但得在用户交互后调用video.muted = false） - 别信“加了
autoplay就一定动”，没有muted的话，Chrome 会静默失败，Safari 直接忽略 - 微信内置浏览器更狠：即使
muted+autoplay，也常需要用户第一次触摸屏幕后才真正开始加载——得监听touchstart后调video.play() - 不要用
preload="auto"强行预加载大视频，移动端容易触发内存警告甚至崩溃
