必须添加controls属性才能显示播放控件，推荐加preload="metadata"；src优先用MP4（H.264），本地需用HTTP服务器而非file://；autoplay需配合muted且用户交互后调用play()才可靠。
怎么用 <video> 标签嵌入本地或网络视频
直接写 <video src="xxx.mp4"></video> 大概率播不了——浏览器默认不自动播放、没控件、可能跨域或格式不支持。
必须显式加 controls 属性才能显示播放按钮和进度条；推荐同时加 preload="metadata"，避免一打开页面就加载整个视频文件。
-
src指向 MP4（H.264 编码）最稳妥，WebM 适合开源场景，但 Safari 对 WebM 支持不稳定 - 绝对路径、相对路径、完整 URL 都可以，但本地双击 HTML 文件时，
file://协议下 Chrome 会禁用src加载，得用本地服务器（如python3 -m http.server） - 如果视频放 CDN 或不同域名，确保服务端返回
Access-Control-Allow-Origin: *，否则 JS 操作video元素（如截图、读取帧）会触发 CORS 错误
video 标签里为什么 autoplay 不生效
不是代码写错了，是现代浏览器策略：没有用户手势（比如点击）的前提下，禁止自动播放带声音的视频。
- 加
muted属性是绕过限制的唯一通用方式：<video autoplay muted></video> -
autoplay+playsinline在 iOS Safari 必须同时存在，否则视频会跳全屏 - 即使加了
muted，部分安卓微信内置浏览器仍可能拦截，得靠用户第一次点击后调用play()方法补救
用 source 元素提供多格式备用，但别乱套
不是“多写几个 <source> 就一定更兼容”，浏览器按顺序试加载，遇到第一个能解码的就停，后面全忽略。
立即学习“前端免费学习笔记（深入）”；
- 把最可能被支持的格式放前面，比如 MP4（H.264）优先于 WebM：
<source src="a.mp4" type="video/mp4">写在<source src="a.webm" type="video/webm">前面 -
type属性必须写对，video/mp4不能写成video/mpeg或漏掉，否则浏览器直接跳过该<source> - 不用为同一视频准备三四个格式——MP4 覆盖 95%+ 场景，加一个 WebM 主要为 Firefox/Linux 用户兜底
JS 控制视频时，play() 报 NotAllowedError 怎么办
这个错误只说明一件事：当前上下文不满足自动播放策略，和视频文件本身无关。
- 检查是否在用户点击、触摸等事件回调里调用
play()，而不是页面加载完立刻调；window.onload或DOMContentLoaded里直接调必报错 - 确保元素已插入 DOM 且
src已设置，video.play()前最好先console.log(video.readyState)，0表示还没加载元信息，1才安全 - 某些情况需手动恢复媒体元素状态：比如从后台切回页面后，iOS Safari 可能暂停视频，此时再调
play()会失败，得先video.muted = true再试
视频格式、路径、权限、用户交互时机——这四块哪一块松动，都会让视频卡在“看不见也播不出”的状态。调试时先盯住控制台报的错误类型，比反复改 src 路径有用得多。
