HTML多媒体标签的浏览器兼容性解决方案（避坑指南）-html教程-PHP中文网

iOS设备无法加载video标签，主因是Safari严格依赖的type声明与服务器MIME类型匹配，缺失type或格式不兼容（如WebM/VP9）将被静默跳过，且仅支持H.264/AAC编码的MP4。

html多媒体标签的浏览器兼容性解决方案（避坑指南）

video 标签只写 src 属性，90% 场景会失败

浏览器根本不会尝试解码，只看 type 声明和 MIME 类型是否匹配。没 <source></source>、没 type，等于把选择权交给浏览器瞎猜——而 Safari 会直接跳过，Chrome 可能加载但报 ERR_CONTENT_DECODING_FAILED。

必须用多个 <source></source> 显式声明格式：

<video controls><source src="video.webm" type="video/webm"><source src="video.mp4" type="video/mp4"><source src="video.ogv" type="video/ogg">
  您的浏览器不支持 video 标签
</source></source></source></video>

type 不是可选的：它让浏览器在发起请求前就过滤掉不支持的格式，避免无意义的 404 或卡顿
顺序很重要：WebM 放最前（Chrome/Firefox 优先），MP4 放最后（Safari/IE/Edge 兜底）
别依赖自动 MIME 推断：即使文件后缀是 .mp4，若服务器返回 text/plain，照样加载失败

iOS 不支持 WebM 音频，也不支持 VP9 视频

这是最常被忽略的硬性限制——不是“可能播不了”，而是 iOS 系统级拒绝解码。哪怕你加了 type="video/webm"，Safari 也会静默跳过该 <source></source>，连 network 请求都不会发。

验证方式很简单：在真机 Safari 打开开发者工具（需 macOS + USB 连接），看 Network 面板里有没有对应 .webm 的请求记录。没有，就是被筛掉了。

音频场景下，.webm（VP8/Vorbis）和 .ogg（Theora/Vorbis）对 iOS 完全无效，只认 .mp3 和 .aac
视频场景下，iOS 只支持 H.264 编码的 MP4 容器；VP9、AV1、AVC-Intra 等一概不认
别信“转成 WebM 就能小体积”——在 iOS 上它根本不会加载，体积再小也没用

服务器 MIME 类型配置错误，video 标签直接变空白

浏览器看到 type="video/mp4"，就会期望服务器返回 Content-Type: video/mp4。如果服务器返回 application/octet-stream 或 text/html，多数现代浏览器（尤其是 Safari）会中断加载并静默失败，控制台甚至不报错。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

检查方法：打开 Network 面板，点击视频请求 → 查看 Response Headers → 确认 Content-Type 字段值是否匹配 <source></source> 中的 type。

Apache：在 .htaccess 或虚拟主机配置中添加 AddType video/mp4 .mp4、AddType video/webm .webm
Nginx：在 http 或 server 块中加入 types { video/mp4 mp4; video/webm webm; }
静态托管服务（如 Vercel、Netlify）通常默认支持，但自建 Node.js 服务（如 Express）必须手动设置 res.set('Content-Type', 'video/mp4')