video标签需用source多格式fallback（如mp4+webm）并设muted、playsinline才能移动端自动播放；poster失效常因路径错、尺寸不匹配或MIME类型错误；play()须在用户手势中调用且处理跨域与Promise异常。
video 标签必须包含 src 或 source 才能播放
很多旧项目直接把 Flash 的 .swf 路径塞进 <video></video>，结果页面空白——<video></video> 不解析 Flash，只支持原生视频格式。浏览器会静默失败，控制台也不报错，容易误判为“样式遮挡”或“JS 未执行”。
正确做法是提供至少一种浏览器支持的编码格式：
- H.264 + AAC（
.mp4）：Safari、Chrome、Edge 全支持，iOS/iPadOS 必须用这个 - VP9 + Opus（
.webm）：Firefox、Chrome、Edge 支持，压缩率高，但 iOS 完全不认 - AV1（
.mp4或.mkv）：新标准，Chrome 109+、Firefox 110+ 支持，体积更小，但兼容性仍弱
单靠一个 mp4 文件无法覆盖所有设备，必须用 <source></source> 多格式 fallback：
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
autoplay 在移动端默认被禁用，且需满足静音条件
加了 autoplay 属性却没自动播？这不是 bug，是浏览器策略。iOS Safari 和 Android Chrome 要求同时满足：
立即学习“前端免费学习笔记（深入）”；
-
muted属性存在（哪怕视频本身没声音，也得显式写上） -
playsinline存在（防止 iOS 强制全屏） - 用户已与页面有过交互（如点击），否则首次加载仍可能被拦截
常见错误写法：<video autoplay></video> —— 这在 iPhone 上必然失败。正确写法：
<video autoplay muted playsinline controls> <source src="hero.mp4" type="video/mp4"> </video>
注意：muted 是布尔属性，不能写成 muted="false"，写了就等价于 true。
poster 图片不显示？检查路径、尺寸和 MIME 类型
poster 属性指定首帧占位图，但经常出现“空白+黑边”或完全不渲染。原因通常是：
- 图片路径 404（尤其用相对路径时，
poster="img/thumb.jpg"在子目录页可能失效） - 图片尺寸远大于
<video></video>容器，又没设object-fit: cover，导致裁剪异常 - 服务器返回的图片 MIME 类型不是
image/jpeg或image/png（比如 Nginx 默认对无扩展名文件返回text/plain）
建议统一用 .jpg 或 .png 扩展名，并在 CSS 中加固显示逻辑：
video {
width: 100%;
height: 300px;
object-fit: cover;
}
video::before {
content: "";
position: absolute;
background: #000;
}
自定义控件时，play() 调用失败多数因跨域或用户手势缺失
想用按钮触发播放？别直接写 video.play()。现代浏览器要求：
- 调用必须发生在用户手势事件内（
click、touchstart，不能是setTimeout或Promise.then） - 若视频跨域（如 CDN 域名不同），需服务端返回
Access-Control-Allow-Origin: *，否则play()抛DOMException: The request is not allowed by the user agent - 部分安卓 WebView 对
play()返回 Promise，需.catch(e => console.warn(e))避免未捕获异常
安全写法示例：
<button id="playBtn">播放</button>
<video id="myVideo" crossorigin="anonymous">
<source src="https://cdn.example.com/vid.mp4" type="video/mp4">
</video>
<script>
document.getElementById('playBtn').addEventListener('click', () => {
myVideo.play().catch(e => {
console.warn('播放失败:', e.name);
});
});
</script>
真正麻烦的不是语法，是每个平台对“可播放”的定义不同：iOS 要静音，Android 要用户点过，桌面 Chrome 允许有声自动播但仅限用户最近交互过的标签页。适配的本质，是接受这些限制，而不是绕过它们。
