本地视频需HTTP服务、正确路径和MIME类型；多<source>可提升兼容性；平台视频必须用<iframe>嵌入；autoplay须配合muted和playsinline。
直接用 <video> 标签插入本地视频，90% 的失败不是语法错，而是路径、编码或服务环境没配对；嵌入 YouTube/Bilibili 等平台视频，必须用 <iframe>，硬塞链接进 src 属性只会白屏或报 CORS 错误。
本地视频白屏？先检查这三件事
浏览器加载本地视频失败，常见现象是控制栏出现但无画面、控制台报 DOMException: The element has no supported sources 或 Network 面板里视频请求状态码为 404 / 0（file:// 协议下）。
- 路径必须走 HTTP(S) 协议：双击 HTML 文件用
file://打开时，Chrome/Firefox 会拒绝加载<video>，必须起本地服务——比如 VS Code 装 Live Server 插件，或运行npx serve - src 值要用相对 URL：HTML 在
/pages/index.html，视频在/assets/demo.mp4，就得写src="../assets/demo.mp4"或src="/assets/demo.mp4"（注意开头斜杠表示根目录） - MIME 类型得对：服务器返回的响应头中
Content-Type必须是video/mp4，不是text/plain或application/octet-stream；若用 Python 的http.server，需手动配置 MIME 映射，否则 .mp4 会被当普通文件下载
为什么比单个src更可靠
<source> 不是炫技，是绕过浏览器解码兼容性差异的实际方案。比如 Chrome 桌面版不支持 HEVC 编码的 .mp4，但 Safari 支持；而 Firefox 对 WebM(VP9) 更友好。单靠 src="demo.mp4"，一旦该 MP4 实际是 HEVC 封装，就直接失败。
- 每个
<source>必须带type属性，例如type="video/mp4"或type="video/webm"，浏览器靠它跳过不支持的格式，不下载就判断 - 顺序决定 fallback 行为：浏览器从上到下尝试，匹配成功即停；把最兼容的
video/mp4（H.264+AAC）放最后，把更轻量但支持度稍低的video/webm放前面，兼顾加载速度和覆盖范围 - 别指望
<source>自动转码：它只是声明“我有这几个候选”，最终播哪个由浏览器 runtime 决定，你无法干预解码过程
YouTube/Bilibili 视频只能用 iframe 嵌入
试图把 https://www.youtube.com/watch?v=xxx 直接塞进 <video src="...">，浏览器会发一个跨域请求去拉 YouTube 页面 HTML，而不是视频流——结果必然是解析失败或 403 错误。平台只允许通过官方 <iframe> 代码加载，这是策略限制，不是技术缺陷。
立即学习“前端免费学习笔记（深入）”；
- 必须用分享页的“嵌入”代码：YouTube 是
https://www.youtube.com/embed/VIDEO_ID，Bilibili 是https://player.bilibili.com/player.html?bvid=xxx，不能自己拼 - 不要删
allow属性里的关键权限：比如clipboard-write关系到复制分享链接，picture-in-picture控制画中画，删了可能让部分功能失效 - 移动端要加
playsinline：iOS Safari 默认全屏播放，加这个属性才能让视频内联播放（尤其用于 banner 视频），对应<iframe>的allow值里也要包含playsinline
autoplay + muted 是唯一能稳定自动播放的组合
现代浏览器（Chrome 66+、Firefox 66+、Safari 12+）全部禁止无用户交互前提下的有声自动播放。哪怕页面刚加载完就调 video.play()，只要没静音，99% 会抛 NotAllowedError。
-
autoplay和muted必须同时存在：<video autoplay muted controls>，缺一不可 - 如果后续想让用户取消静音，得等用户有交互（如点击按钮）后再执行
video.muted = false，否则仍被拦截 - 移动端还要加
playsinline属性（针对 iOS），否则即使静音也会强制全屏，破坏布局
最容易被忽略的是服务环境——没有 HTTP(S) 上下文，<video> 就是废标签；最容易被低估的是编码细节——.mov 文件表面是 MP4 容器，实际可能是 HEVC 编码，浏览器不认就真不认，没商量余地。
