html5 video 播放取决于容器格式与编解码组合，而非文件后缀；最稳妥是 mp4+h.264+aac，覆盖全平台；webm+vp9+opus 为高效第二选择但 safari 支持有限；需按兼容性从高到低排列 source 顺序，并设置 controls、poster、preload="metadata" 等关键属性。
HTML5 video 标签能直接嵌入视频，但能否播出来，不取决于文件后缀名，而取决于浏览器是否支持该视频的容器格式＋内部编码组合。只导出一个 .mp4 文件，不代表所有设备都能播；关键是要提供浏览器真正能解码的格式组合。
最稳妥的格式组合是 MP4 + H.264 + AAC
这是目前兼容性最广的方案，覆盖 iOS、Android、Chrome、Firefox、Edge 和 Safari 全平台。注意：MP4 是容器，H.264 是视频编码，AAC 是音频编码——三者缺一不可。若用 H.265（HEVC）打包进 MP4，仅 Safari 14+ 支持，Chrome 和 Firefox 默认禁用，容易黑屏。
- 导出时建议使用 H.264 Baseline 或 Main Profile，避免 High Profile 导致 iOS Safari 解码失败
- 音频务必选 AAC-LC，不要用 AC3 或 MP3，后者在部分移动端可能不识别
- 用 FFmpeg 转码可加参数：
-c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k
WebM 是高效开源的第二选择
WebM 容器配 VP9 视频 + Opus 音频，压缩率高、免专利费，在 Chrome、Firefox、Edge 上表现优秀。但 Safari 直到 16.4 才开始支持 VP9，且仅限 macOS Ventura 及更新系统，iOS 上仍不支持。
- 若需兼顾 Safari 用户，VP9 WebM 不宜放在
列表首位 - VP8 + Vorbis 组合兼容性更老，但画质和压缩效率不如 VP9，现较少采用
- type 属性必须写
video/webm，不能写成video/x-webm或漏掉video/前缀
多格式嵌入要按优先级写 source 顺序
浏览器会从上到下逐个尝试
- 推荐顺序：
<source src="vid.mp4" type="video/mp4"></source>→<source src="vid.webm" type="video/webm"></source>→ （可省略 Ogg） - 每个
的 type 必须准确对应实际编码，否则浏览器直接跳过 - 所有
后应保留降级提示文字，例如“您的浏览器不支持视频播放”，这对无障碍和老旧环境很重要
基础属性别漏掉，体验才稳
光有视频文件还不够，几个关键属性直接影响可用性和首屏观感。
- controls：必须显式添加，否则用户无法播放、暂停或调节音量
- width/height：建议设固定像素值（如 640×360），防止页面加载时布局抖动
- poster：指定封面图，在视频加载完成前显示，避免黑屏或空白区域
- preload="metadata"：只预加载时长、尺寸等元信息，平衡加载速度与带宽消耗
- autoplay+muted：移动端自动播放必须静音，否则会被浏览器拦截
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
