直接用<video>标签需配置controls、autoplay+muted+playsinline、poster、load()及CORS响应头，否则存在控件缺失、移动端全屏、占位图闪动、src切换无效和跨域静默失败等问题。
直接用 <video> 标签就能搭出可用的视频展示框，不需要额外 JS 或框架——但默认样式丑、控制逻辑弱、移动端行为不一致，真要上线得补几处关键配置。
video 标签必须设 controls 属性才能显示播放控件
很多人写完 <video src="demo.mp4"></video> 发现点不动，是因为没加 controls。这个布尔属性不带值，写了就生效：
<video src="demo.mp4" controls></video>
- 不加
controls：视频静音黑屏，用户无法操作 - 加了但没设
width/height：在部分 iOS 设备上会撑满全屏，布局错乱 - 若想默认静音自动播放（如 banner 视频），需同时加
autoplay、muted和playsinline，缺一不可
移动端自动播放必须满足 muted + playsinline
iOS Safari 和 Android Chrome 对自动播放限制极严，只允许静音且内联播放的视频触发 autoplay：
<video src="hero.mp4" autoplay muted playsinline></video>
-
muted是硬性要求，哪怕你后续用 JS 解除静音也不行——必须初始就静音 -
playsinline防止 iOS 强制全屏，否则视频一播就跳转原生播放器 - Chrome 95+ 还要求页面有用户手势（如点击）后才允许解除静音，不能靠
setTimeout模拟
poster 属性比 background-image 更可靠
视频加载前的占位图，别用 CSS 的 background-image 覆盖 <video>，而应直接用 poster：
立即学习“前端免费学习笔记（深入）”；
<video src="clip.mp4" poster="placeholder.jpg" controls></video>
-
poster是原生支持的属性，会在第一帧解码前立即渲染，无闪动 - 用 CSS 覆盖时，若视频加载快于 CSS 渲染，会出现“先闪白再出图”现象
- 注意
poster图片尺寸最好和视频宽高比一致，否则 Safari 会拉伸变形
src 切换时 video 元素不会自动重载
动态改 src 后，必须手动调用 load() 方法，否则旧视频还在播：
const video = document.getElementById('myVideo');
video.src = 'new.mp4';
video.load(); // 必须加这句
video.play();
- 只改
src不调load()：浏览器缓存旧资源，新地址无效 - 在 iOS 上，
load()后立刻play()可能失败，建议监听loadeddata事件再播 - 若用多个
<source>标签切换格式，也要调load()，不能只换src
真正麻烦的是跨域视频源——比如从 CDN 加载 MP4，如果响应头没带 Access-Control-Allow-Origin: *，play() 会静默失败，连错误事件都不抛，只能靠 networkState 值判断是否卡在 NETWORK_NO_SOURCE 状态。
