在 HTML 页面里放视频，现在有两种正规做法：用 <video> 自己托管文件，或用 <iframe> 嵌入第三方平台。选型错误会带来一堆连锁问题：视频格式不支持、自动播放被拦、流量爆掉、手机黑屏。本文把两种写法的属性、格式兼容表与移动端限制一次讲清。

一、基础写法：<video>

<video controls width="640" poster="cover.jpg" preload="metadata" playsinline>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 video 标签，可
  <a href="movie.mp4">点此下载视频</a>。
</video>

关键属性含义：controls 显示原生控制条（不写就看不到任何操作按钮）；poster 未播放时显示的封面，强烈建议加；preload="metadata" 只预取时长等元信息，不提前拉完整文件，省流量；playsinline 让 iOS Safari 内嵌播放而非强制全屏；多个 <source> 由浏览器自上而下选第一个支持的格式。

二、格式兼容表（选型核心）

• MP4 (H.264 + AAC)：几乎所有浏览器与手机都支持，兼容性首选。
• WebM (VP9/AV1)：同画质体积更小，Chrome/Firefox/Edge 良好，Safari 支持有限。
• Ogg (Theora)：基本淘汰，不必再用。
• HLS（.m3u8）：适合长视频与点播加密，Safari 原生支持，其他浏览器需 hls.js。

实践方案：webm 放前面（省流量）、mp4 兜底；或用 <source> 顺序 mp4 → webm，简单稳妥。

注意坑：扩展名不等于编码。.mp4 里若封装的是 HEVC/H.265，多数桌面浏览器无法播放，表现为“有进度条但黑屏无声”。转换时用 H.264 baseline/main 最安全。

三、自动播放的规则（必须理解）

浏览器策略：带声音的自动播放基本一律被拦，只有静音才允许。可行写法：

<video autoplay muted loop playsinline src="bg.mp4"></video>

需要有声播放时，必须由用户手势触发：btn.onclick = () => video.play().catch(e => ...)。play() 返回 Promise，被拦截会 reject，一定要 catch，否则控制台一片红。

四、用 iframe 嵌入第三方平台

<iframe src="https://player.bilibili.com/player.html?bvid=BVxxxxxxxx&page=1"
        width="840" height="520" scrolling="no" border="0"
        frameborder="no" framespacing="0" allowfullscreen="true"
        loading="lazy" title="视频播放器"></iframe>

要点：① 用平台提供的官方嵌入地址（B 站是 player.bilibili.com/player.html?bvid=...，YouTube 是 youtube.com/embed/视频ID），直接 iframe 站点首页会被 X-Frame-Options 拒绝并显示空白；② 加 loading="lazy" 避免首屏加载视频框架拖慢页面；③ 全屏功能需要 allowfullscreen，PiP/自动播放权限可加 allow="picture-in-picture; autoplay"；④ title 属性用于无障碍识别。

五、常见故障速查

1. 显示黑框/只有 controls 无画面：编码不被支持（HEVC/AC3 音频），转 H.264+AAC 重试。
2. iPhone 上必须点全屏才播：漏写 playsinline。
3. iframe 空白、控制台报 Refused to display：目标站点禁止被嵌，改用其官方嵌入代码或换平台。
4. 视频拖拽时延、加载慢：MP4 的 moov 原子在文件尾部，需转成 faststart：ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4。
5. 流量爆炸：首页别放多个 autoplay；用 preload="none" + poster 封面，用户点击才拉流。
6. 字幕不上屏：需 <track kind="captions" src="zh.vtt" srclang="zh" label="中文">，且 VTT 文件必须同域或配 CORS，跨域无 CORS 会静默失败。

六、代码示例：自定义控制条 + 键盘可访问

const v = document.querySelector('#player');
document.querySelector('#play').onclick = () =>
  v.paused ? v.play().catch(()=>{}) : v.pause();

document.querySelector('#seekbar').oninput = e =>
  v.currentTime = v.duration * (e.target.value / 100);

v.ontimeupdate = () => {
  if (!v.duration) return;
  document.querySelector('#seekbar').value = v.currentTime / v.duration * 100;
};

自定义控制条务必加 aria-label 并保证 input range 可用键盘操作，不要只用鼠标事件。

七、常见问题 FAQ

问：能不能用 <embed> / <object>？
答：那是 Flash 时代的写法，现代浏览器已移除插件支持，一律改用 <video>/<iframe>。

问：想防盗链怎么办？
答：视频 URL 加签名过期参数、Referer 白名单，配合 CDN 鉴权；前端隐藏地址不算防护。

结论：短小自托管素材走 <video>（H.264+AAC + poster + playsinline + faststart）；长视频或带版权内容走平台官方 iframe 嵌入（加 lazy 与 allowfullscreen）。两条路各配好属性，绝大多数“放不上/黑屏/手机不播”的问题都能提前规避。

• HTML5
• video
• 网页视频