标签嵌入视频需注意路径、MIME类型、跨域、静音autoplay、移动端playsinline及JS播放时机：src须为HTTP路径，MP4编码为H.264+AAC，服务器返回正确Content-Type，跨域加CORS头；autoplay必须搭配muted和playsinline；JS播放需等待loadedmetadata事件且由用户手势触发。
直接用 标签就能嵌入视频，不需要插件、不依赖 Flash，但实际用起来容易卡在加载失败、静音 autoplay 被拦截、或移动端不自动播放这些地方。
为什么
最常见原因是视频路径不对或服务器没配好 MIME 类型：
-
src值必须是可访问的绝对路径或相对路径（比如./assets/demo.mp4），不能是本地file://协议（浏览器会因安全策略拒绝加载） - MP4 文件需确保编码为 H.264 + AAC（
ffmpeg -i in.mov -c:v libx264 -c:a aac out.mp4可转） - 如果部署在 Nginx/Apache 上，确认服务器返回了正确的
Content-Type：MP4 应为video/mp4，WebM 为video/webm - 跨域资源需服务端加
Access-Control-Allow-Origin: *，否则 JS 调用play()会报错DOMException: The request is not allowed by the user agent
如何让视频自动播放且不被浏览器拦截？
Chrome/Firefox/Safari 默认禁止有声音的自动播放，但允许「静音 autoplay」——前提是显式声明 muted：
-
autoplay单独写无效；必须搭配muted（即使你后续用 JS 解除静音，初始也要带这个属性） -
playsinline是 iOS/iPadOS 必须项，否则视频会全屏弹出 -
loop不是自动播放的前提，但能避免播完黑屏中断体验 - 不要依赖
autoplay="true"这种写法，布尔属性有就生效，值写什么都一样
怎么兼容老浏览器或提供备用方案？
IE11 及更早版本不支持 ，但现代项目通常已放弃支持。如真需降级，注意两点：
立即学习“前端免费学习笔记（深入）”；
- 用多个
- 在
标签内部写 fallback 内容（不是子元素，是标签内文本），例如提示文字或 Flash 替代代码（现已极少用）： - 别用
canPlayType()做复杂判断——99% 的场景只需提供 MP4，它覆盖所有现代浏览器
常见控制行为和 JS 交互要注意什么？
想用 JS 控制播放/暂停，得等 loadedmetadata 或 canplay 事件后再调用 play()，否则可能报错：
const v = document.querySelector('video');
v.addEventListener('loadedmetadata', () => {
v.play().catch(e => console.warn('play failed:', e));
});
-
v.play()返回 Promise，失败时会 reject（比如用户没点过页面、视频还没 ready） - 移动端必须由用户手势触发首次
play()，比如绑定在button.onclick里，不能 onload 就调 -
preload="metadata"可减少等待时间（只加载头信息，不下载全部）；设为"auto"在移动端可能浪费流量 - 不要监听
timeupdate做高频操作（如每秒更新进度条），建议节流或用requestAnimationFrame
真正麻烦的不是写几行 HTML，而是视频源是否可靠、是否静音、是否在用户交互后才开始播放——这三点漏掉任意一个，页面看起来就像“视频没反应”。
