HTML5多媒体播放器“一次写、多端跑”的关键是分层适配：先保障核心功能，再按设备能力渐进增强；需运行时检测而非UA判断；MP4+WebM双源组合覆盖主流浏览器；移动端自动播放须同时满足muted、playsinline及用户手势触发三要素；服务器必须正确配置MIME类型与响应头。
HTML5 多媒体播放器要真正“一次写、多端跑”，关键不在堆格式，而在分层适配：先保核心功能可用，再按设备能力渐进增强。iOS Safari、Android WebView、旧版桌面浏览器的行为差异远大于表面标签支持，必须用运行时检测代替静态判断。
格式组合以 MP4 + WebM 为底线
只提供 MP4 容易在部分 Android WebView 或新版 Firefox 中遇到解码失败；只用 WebM 则 iOS Safari（14.0 以下）和 IE 完全空白。稳妥做法是：
- 主源用 H.264 + AAC 编码的 MP4（
type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"），覆盖 Safari、Edge、大部分安卓原生浏览器 - 次源用 VP9 + Opus 编码的 WebM（
type="video/webm; codecs="vp9, opus"），提升 Chrome/Firefox/Android Chrome 的压缩率与首帧速度 - 避免 OGG：仅 Firefox 有稳定支持，其他浏览器兼容性差且无明显优势
移动端自动播放必须满足三要素
iOS Safari 和多数安卓浏览器对带音视频的自动播放施加硬性限制，单设 autoplay 无效。必须同时满足：
-
muted属性存在（即使后续 JS 解除静音，初始也需静音） -
playsinline属性启用（禁用全屏强制跳转，尤其微信/QQ 内置浏览器依赖此） - 首次触发由用户手势驱动（如点击按钮后调用
play()，不能靠DOMContentLoaded自动触发）
若仍失败，可加兜底逻辑：video.play().catch(e => console.warn('自动播放被拦截', e))，并提示用户轻点屏幕继续。
立即学习“前端免费学习笔记（深入）”；
用 canPlayType 做真实能力探测，不查 UA
浏览器版本号和 UA 字符串不可靠，比如 Safari 15 某些 beta 版本已支持 MediaRecorder，但正式版默认关闭。应直接检测 API 行为：
const canPlayMP4 = !!document.createElement('video').canPlayType('video/mp4');const supportsWebM = document.createElement('video').canPlayType('video/webm; codecs="vp9"') !== '';- 对
MediaDevices，用navigator.mediaDevices?.getUserMedia存在性 +try/catch调用双重验证
检测结果用于动态选择源、隐藏不支持的控件（如 Safari 不支持 captureStream() 就禁用录屏按钮）。
服务器 MIME 类型与响应头不可忽略
即使前端代码完美，若服务器返回 Content-Type: application/octet-stream，Safari 和 Firefox 会拒绝解析视频流。必须确保：
- .mp4 →
video/mp4 - .webm →
video/webm - 对 HLS 流（
.m3u8），需配application/vnd.apple.mpegurl - 推荐加
Accept-Ranges: bytes响应头，否则 Safari 可能无法拖拽或显示进度条
