HTML模板嵌入音视频应优先使用<audio>和<video>标签，配合多个<source>提供MP4/WebM/OGG等格式兜底，并启用controls和muted（尤其搭配autoplay时），否则Chrome、Safari等浏览器将因策略限制导致静音失败或无法播放。
直接说结论：HTML 模板里嵌入音视频，别用 embed 或 object，优先用 <audio> 和 <video> 标签，配合 <source> 多格式兜底，再加 controls 和 muted（尤其带 autoplay 时）——否则大概率在 Chrome、Safari 里静音失败或根本播不了。
为什么 autoplay 经常失效
Chrome、Edge、Safari 等主流浏览器从 2018 年起强制要求：含声音的自动播放必须用户有交互（如点击）后才允许。没 muted 的 autoplay 会被静默拦截，控制台可能不报错，但 play() 调用会抛 NotAllowedError。
- 解决办法：加
muted属性，autoplay才能生效（适用于背景视频、引导页动效等） - 如果必须带声自动播，得先让用户点一下按钮，再用 JS 调用
play()—— 且该点击事件必须是用户真实触发，不能靠setTimeout模拟 -
preload="auto"不等于自动播，它只建议浏览器预加载；设为metadata可减少首屏带宽消耗
<source> 不是可选，是兼容刚需
不同浏览器支持的编码格式差异大：MP4（H.264 + AAC）在 iOS/macOS 全兼容，但 Firefox、Chrome 对 WebM（VP9 + Opus）更友好；OGG 基本只剩 Firefox 还认。单写一个 src 属性，等于把兼容性赌在一种格式上。
- 正确写法：在
<video>或<audio>内部按兼容优先级顺序放多个<source>，浏览器取第一个能解码的 - 推荐顺序：
MP4→WebM→OGG（音频同理：MP3→WebM→OGG） -
type属性必须写准，比如type="video/mp4"，漏写或写错（如video/mpeg）会导致该<source>被跳过
响应式视频/音频怎么不拉伸变形
直接设 width="100%" 或 CSS width: 100% 很容易让视频撑开容器、画面被压扁。核心是用 aspect-ratio + object-fit 控制比例和裁剪方式。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给
<video>加style="aspect-ratio: 16/9; width: 100%; object-fit: cover;"，就能自适应宽度并保持横纵比 - 不用 JS 计算宽高比，
aspect-ratio是现代浏览器原生支持的（Chrome 88+、Firefox 89+、Safari 15.4+），老版本可 fallback 到 padding-top 百分比 hack -
object-fit: contain适合需要完整显示画面的场景（如教学视频），cover更适合封面/背景类视频
模板里插入外部视频（如 YouTube）该用 <iframe> 还是 <video>
绝对不要用 <video> 直接套 YouTube 链接——src 必须指向实际音视频文件 URL（如 xxx.mp4），YouTube 返回的是 HTML 页面，不是媒体流。
- 正确方式：用
<iframe>，取 YouTube 分享里的「嵌入」代码，注意加上loading="lazy"延迟加载，避免首屏卡顿 - 关键属性别漏：
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"，否则全屏、画中画等功能在部分浏览器里会被禁用 - 如果要监听播放状态（如“播放完成跳转”），得用 YouTube IFrame Player API，纯
<iframe>标签无法通过 JS 获取播放进度
最常被忽略的一点：本地开发时双击 HTML 文件打开（file:// 协议），Chrome 会禁用 <video> 的 autoplay 和部分 play() 调用——必须起一个本地服务（如 python3 -m http.server）才能真实模拟线上环境。这点不验证，上线前容易翻车。
