video标签自动播放需同时设置autoplay和muted属性，否则被浏览器策略拦截；多source标签配合type属性提升格式兼容性；preload应按场景选择，避免滥用；poster在autoplay+muted下易失效，需用loadeddata事件或用户交互解决。
video 标签不播放？先看 autoplay 和 muted 的强制绑定关系
Chrome、Edge、Safari 等现代浏览器默认禁止有声音的自动播放，autoplay 单独写根本没用——必须同时加 muted 才能触发。这不是 bug，是策略性限制。
-
<video autoplay src="a.mp4">→ 一定静音失败（控制台报DOMException: play() failed because the user didn't interact with the document first） -
<video autoplay muted src="a.mp4">→ 正常启动，画面立刻出现 - 如果后续想恢复声音，得等用户主动点击/触摸后，再用 JS 调用
video.muted = false并play()，否则仍被拦截
audio/video 的 source 标签不是摆设，格式兼容性靠它兜底
MP4（H.264+AAC）在 Chrome/Firefox/Safari 全平台支持；但 Firefox 和 Safari 对 WebM（VP8/VP9+Vorbis/Opus）更友好；OGG 音频只在老 Firefox 上稳定。单写一个 src 属性等于放弃兼容性。
- 正确写法是用
<source>多次声明，浏览器按顺序试加载，遇到第一个能解码的就停 - 示例：
<video controls><source src="v.webm" type="video/webm"><source src="v.mp4" type="video/mp4">您的浏览器不支持 video</video> - 别漏掉
type属性：它不校验文件内容，但能帮浏览器跳过明显不支持的格式，减少 404 或卡顿
preload 属性不是“越早加载越好”，要分场景选值
preload 控制的是浏览器是否提前下载视频数据，但它和 autoplay 冲突——一旦用了 autoplay，浏览器会忽略 preload，直接按需加载。
-
preload="none"：适合列表页大量缩略视频，用户点开才加载，省带宽 -
preload="metadata"：推荐默认值，只拉封面帧、时长、分辨率等元信息，快且轻 -
preload="auto"：慎用，尤其在移动端或弱网环境，可能预加载整部视频却没人看，浪费资源
poster 封面图在 muted + autoplay 下容易失效
很多人发现加了 poster 属性，但视频一闪就播，封面根本看不到。问题出在：当 autoplay 和 muted 同时存在时，浏览器会尽快开始解码第一帧，往往在封面渲染完成前就切换过去了。
立即学习“前端免费学习笔记（深入）”；
- 解决办法不是删
autoplay，而是用 JS 延迟首帧：监听loadeddata事件，在第一帧就绪后手动暂停，并显示封面层 - 或者换思路：用
preload="metadata"+controls，让用户点击播放按钮，此时poster必然可见 - 注意
poster图片格式建议用 WebP 或压缩 PNG，避免 JPG 解码延迟导致白屏
video 当成黑盒组件来用——它没有“加载完成”的统一状态，canplay、canplaythrough、loadeddata 触发时机差异很大，做进度条或预加载提示时，必须根据真实需求选对事件。 
