标签嵌入视频需注意路径、MIME类型、跨域、静音autoplay、移动端playsinline及JS播放时机：src须为HTTP路径，MP4编码为H.264+AAC，服务器返回正确Content-Type，跨域加CORS头；autoplay必须搭配muted和playsinline；JS播放需等待loadedmetadata事件且由用户手势触发。
直接用 <video></video> 标签就能嵌入视频，不需要插件、不依赖 Flash，但实际用起来容易卡在加载失败、静音 autoplay 被拦截、或移动端不自动播放这些地方。
为什么 <video></video> 加载不出来？
最常见原因是视频路径不对或服务器没配好 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：
<video autoplay muted loop playsinline> <source src="clip.mp4" type="video/mp4"> </video>
-
autoplay单独写无效；必须搭配muted（即使你后续用 JS 解除静音，初始也要带这个属性） -
playsinline是 iOS/iPadOS 必须项，否则视频会全屏弹出 -
loop不是自动播放的前提，但能避免播完黑屏中断体验 - 不要依赖
autoplay="true"这种写法，布尔属性有就生效，值写什么都一样
怎么兼容老浏览器或提供备用方案？
IE11 及更早版本不支持 <video></video>，但现代项目通常已放弃支持。如真需降级，注意两点：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 用多个
<source></source>提供不同格式（MP4 + WebM），浏览器会选择第一个它能解码的：<source src="v.webm" type="video/webm"></source> - 在
<video></video>标签内部写 fallback 内容（不是子元素，是标签内文本），例如提示文字或 Flash 替代代码（现已极少用）：<video>您的浏览器不支持 video 标签，请升级</video> - 别用
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，而是视频源是否可靠、是否静音、是否在用户交互后才开始播放——这三点漏掉任意一个，页面看起来就像“视频没反应”。
