现代网页音视频嵌入应优先使用<audio>、<video>和<iframe>标签，避免已过时的<object>与<embed>；<video>需提供MP4+WebM双格式及poster、preload="metadata"；<audio>自动播放必须配合muted；YouTube等第三方视频必须用官方<iframe>代码并配置allow属性与autoplay/mute参数；服务器Content-Type须严格匹配source type。
直接用 <audio>、<video> 和 <iframe> 三个标签就能覆盖绝大多数场景，不用 <object> 或 <embed> —— 它们已过时，现代浏览器不保证支持，且存在安全策略限制。
用 <video> 嵌入本地或托管视频
核心是 src + controls，但仅靠一个 MP4 文件容易在 Firefox 或 Safari 上失败：
-
src必须指向可公开访问的路径（如"./videos/demo.mp4"或 CDN 地址），不能是file://协议（本地双击 HTML 会跨域失败） - 只提供 MP4（H.264）不够：Firefox 不支持 H.264 解码，必须加 WebM 备选，用
<source>列出多个格式 -
poster属性强烈建议设置，否则视频加载前白屏；值应为 JPG/PNG 封面图路径 -
preload="metadata"比auto更稳妥，避免大文件阻塞首屏渲染
示例：
<video controls poster="cover.jpg" preload="metadata"> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
用 <audio> 播放音频要绕开自动播放限制
几乎所有现代浏览器（Chrome、Safari、Edge）都禁止无用户交互触发的有声自动播放，autoplay 单独写基本无效：
立即学习“前端免费学习笔记（深入）”；
- 若真需要自动播放，必须同时加
muted（静音）属性，此时autoplay才可能生效 -
loop和preload="metadata"可安全使用，不影响兼容性 - 不要依赖
<audio>的后备文字提示——它只在极老浏览器（IE8 及更早）中显示，现在几乎没人看到
示例（带静音自动播放）：
<audio autoplay muted loop preload="metadata"> <source src="bgm.mp3" type="audio/mpeg"> <source src="bgm.ogg" type="audio/ogg"> </audio>
嵌入 YouTube 等第三方视频必须用 <iframe>
别试图把 YouTube URL 直接塞进 <video src> —— 它不是普通视频文件，而是受 CORS 和 Referer 限制的动态播放页：
- 必须从 YouTube 视频页点“分享 → 嵌入”，复制原始
<iframe>代码，不能手写 - URL 中加
?autoplay=1&mute=1才能实现静音自动播放；不加mute=1，autoplay=1会被浏览器拦截 -
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"属性不能省，否则全屏、画中画等功能失效
示例（精简版）：
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx?autoplay=1&mute=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0"> </iframe>
真正容易被忽略的是资源路径和 MIME 类型的匹配：服务器返回的 Content-Type 必须与 <source> 的 type 一致（如 MP4 对应 video/mp4），否则即使路径正确，Chrome 也会静默失败且不报错。
