html5可视化编辑器插入的标签默认不可用，必须手动补全controls、poster、preload属性，并用提供mp4/webm多格式源，移动端还需添加muted和playsinline。
可视化编辑器插入的 <video></video> 标签默认不可用
绝大多数 HTML 可视化编辑器（如 Webflow、GrampsJS、上线了、易企秀）只生成空壳 <video></video>，不自动加 controls、poster、preload 等关键属性。你拖一个“视频组件”进去，实际 HTML 可能只是 <video src="a.mp4"></video> —— 这在 Chrome、Safari、iOS 上大概率黑屏、无控件、首帧卡死。
必须手动进源码模式补全以下三项：
-
controls：否则 iOS Safari 拒绝播放，用户连暂停键都没有 -
poster="cover.jpg"：防止加载中白屏/闪屏，图片尺寸需匹配视频宽高比 -
preload="metadata"：避免整段视频随页面加载，拖慢 LCP；别写preload="auto"，那等于自毁首屏性能
<source></source> 多格式不是可选项，是兼容性底线
仅传 MP4 文件、只写一个 src 属性，在 Firefox 或旧版 Edge 上会直接静音或报错 MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED。浏览器对编码细节极其敏感，比如 Safari 要求 H.264 Baseline Profile，而某些 FFmpeg 默认输出的是 High Profile。
正确写法必须用 <source></source> 显式声明多源：
<video controls preload="metadata" poster="bg.jpg"><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </source></source></video>
注意顺序：mp4 放第一（兼容最广），webm 放第二（Chrome/Firefox 支持好）；ogg 已基本淘汰，不用塞。
移动端背景视频必加 muted playsinline，且必须写在 HTML 里
PC 上能自动播的背景视频，一到手机就黑屏或全屏弹出——根本原因是 iOS Safari 和多数安卓 WebView 强制要求：muted 和 playsinline 必须作为 HTML 属性存在，JS 后续赋值（如 video.muted = true）完全无效。
动态背景视频的标准属性组合是：
-
autoplay：触发自动播放 -
muted：静音，绕过浏览器自动播放策略 -
loop：循环，避免播放完后留黑屏 -
playsinline：禁止全屏，保持内联显示（iOS 必需） -
webkit-playsinline：安卓 WebView 兼容补充（部分低版本需要）
漏掉任意一个，移动端就失效。别信“我 JS 里加了 muted 就行”——不行。
用 JS 控制播放时，play() 报 NotAllowedError 怎么办
这个错误几乎只发生在非用户手势上下文中调用 play()，比如 window.onload、setTimeout、滚动监听（scroll）、或者 DOMContentLoaded 后立即执行。浏览器判定这是“干扰性自动播放”，直接拒绝。
真正可行的解法只有两个：
- 绑定到明确的用户交互事件上，例如按钮
click、touchstart（移动端优先）、或pointerdown - 用
interaction触发后延迟调用，比如：button.addEventListener('click', () => video.play())
试图用 video.muted = true + video.play() 在非交互上下文里硬刚，只会反复报错。这不是 bug，是现代浏览器的强制策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
