广告视频需video标签配合autoplay、muted、playsinline等属性及多格式source才能可靠播放：autoplay必须与muted共存，poster引导点击，preload设为metadata，提供mp4+webm双源并添加error监听和降级提示。
直接加 <video></video> 标签就能播广告视频，但“能播”不等于“能用”——广告常需自动播放、静音、无控制条、封面引导点击，这些都得靠属性组合和兼容性兜底来实现。
video autoplay muted 必须成对出现
现代浏览器（Chrome/Firefox/Safari）默认禁止有声自动播放，autoplay 单独写等于白写。只有 autoplay 和 muted 同时存在，才能触发自动播放。
-
muted是布尔属性，只写出来就生效，不用muted="true" - 即使广告本身没声音，也必须显式加
muted，否则 Chrome 会静默忽略autoplay - 移动端尤其严格：iOS Safari 和 Android Chrome 都强制要求
muted才允许自动播放
去掉 controls，用 poster 引导用户交互
广告视频通常不希望用户暂停或拖动，所以要移除默认控件；但完全黑屏或空白会降低转化率，这时 poster 就是关键入口。
-
poster="ad-cover.jpg"显示静态封面图，尺寸建议与视频宽高比一致（如 16:9 → 1280×720） - 封面图上可叠加文字按钮（用 CSS 定位），点击后调用
video.play()并隐藏 poster - 避免用
preload="auto"，广告视频优先级低，用preload="metadata"更省流量
多格式 fallback 不能只靠 MP4
单写 src="ad.mp4" 在 Firefox 或旧版 Safari 上可能直接失败，广告投放必须保证首帧可加载。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<source></source>提供至少两种格式：<source src="ad.mp4" type="video/mp4"></source>+<source src="ad.webm" type="video/webm"></source> - MP4 放第一位（H.264 编码），WebM 放第二位（VP8/VP9），覆盖 99% 主流环境
- 所有
<source></source>后必须加降级提示，例如：<p>广告加载失败，请刷新重试</p>，否则空白区域无法感知问题
移动端需加 playsinline 属性
iOS Safari 默认全屏播放视频，广告若被强制拉出页面，转化路径就断了。
- 加
playsinline（布尔属性）让视频在页面内播放，不跳转全屏 - 配合
webkit-playsinline（Safari 旧版本兼容）和x5-playsinline（微信内置浏览器）更稳妥 - 注意：部分安卓 WebView 仍可能忽略该属性，建议用 CSS 强制限制容器尺寸（如
max-width: 100%; height: auto;）防拉伸
最易被忽略的是 error 事件监听——广告视频加载失败时，<video></video> 不报错也不提示，只会留一块黑区。上线前务必测试断网、404 视频路径、跨域资源三种场景，用 video.addEventListener('error', ...) 补充 fallback 行为。
