核心是按浏览器兼容性顺序试探标签，首推H.264 MP4（iOS Safari强制要求），其次VP9 WebM，AV1 MP4放最后；type须精确声明codecs，服务端Content-Type必须严格匹配，且需兜底提示。

核心是用 标签按浏览器实际支持能力“顺序试探”，不是选画质最好的，而是找第一个能解码成功的——顺序、type 声明、服务端响应三者必须严丝合缝。

格式顺序必须按真实兼容性排，不是按新旧或压缩率

视频推荐顺序：MP4（H.264 + AAC）→ WebM（VP9 + Opus）→（AV1 MP4 可选，放最后）。音频推荐：MP3 → WAV → Opus（WebM 封装）。

• iOS Safari 强制要求第一个 是 H.264 编码的 MP4，否则可能静音、报错甚至拒绝播放
• 把 WebM 放第一位，Safari 会跳过它，又因首源失效，整个 可能卡在 loading 状态，不触发 fallback
• AV1 编码的 MP4 兼容范围窄（仅 Chrome/Firefox + Safari 16+），必须写准 type 并放在末尾

type 属性必须带精确 codecs，不能只写 MIME 类型

type 是浏览器跳过不支持格式的唯一依据，写宽泛等于白请求一次。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• ✅ 正确写法：type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""（H.264 Baseline + AAC-LC）
• ✅ WebM 推荐不带 codecs：type="video/webm"，避免 VP9 字符串大小写或点号偏差导致 Safari 返回空字符串
• ❌ 错误写法：type="video/mp4"、type="mp4"、type="video/mpeg"、type="video/mp4; codecs="h264""

服务端 Content-Type 必须和 type 值严格匹配

浏览器靠 type 和响应头双重校验。哪怕 HTML 写得再准，服务端返回错的类型，该 就会被静默跳过。

• 用 curl -I https://example.com/vid.mp4 检查是否返回 Content-Type: video/mp4
• MP4 文件必须是 H.264 编码（可用 ffprobe vid.mp4 验证），不是 AV1 或 HEVC；WebM 必须是 VP9，不是 AV1
• 别信文件后缀：叫 clip.mp4 的文件可能是 AV1 编码，Safari 会直接忽略

结构规范与兜底提示不能少

所有 必须嵌在 或 内部，且不能和元素自身的 src 属性共存。

• 每个 的 src 必须指向真实可访问的文件（相对或绝对 URL 均可）
• 在所有 之后、 之前，加一段简明文字，如“您的浏览器不支持视频播放”——这是给老设备、屏幕阅读器和加载失败时用的
• 不要用 JavaScript 动态插入 ，这会绕过浏览器原生的格式探测逻辑

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！