跨浏览器html5媒体加载需同时满足：提供mp4（h.264+aac）与webm（vp9+opus）多源、显式设置autoplay+muted+playsinline、监听loadedmetadata与error事件并设8秒超时兜底、用户手势后调用play()并捕获domexception。
编写跨浏览器的 HTML5 媒体加载逻辑，核心在于规避浏览器对 <video></video> / <audio></audio> 的差异化支持，尤其在格式兼容性、API 行为、错误处理和自动播放策略上。不能只依赖 canPlayType() 或简单 fallback，需结合特征检测、渐进增强与降级路径设计。
识别并适配主流媒体格式支持
不同浏览器对编码格式（如 H.264、VP9、AV1）和容器（MP4、WebM、Ogg）的支持差异显著。Chrome 和 Edge 支持 VP9/WebM 与 H.264/MP4；Safari 长期仅支持 H.264/MP4（AV1 支持从 macOS 13/iOS 16.4 开始有限启用）；Firefox 全面支持 VP9 和 AV1，但对某些 H.264 变体（如高 profile）可能拒绝解码。
- 优先提供
.mp4（H.264 baseline/main profile + AAC）作为基础 fallback，覆盖 Safari、旧 Edge、iOS 全系 - 追加
.webm（VP9 + Opus）提升 Chrome/Firefox/新版 Edge 的压缩效率与 AV1 过渡能力 - 避免仅用
src属性单源加载，改用<source></source>多源声明，由浏览器自主选择最优项 - 不要依赖
canPlayType('video/mp4')返回'probably'—— 实际解码能力需运行时验证，建议结合loadedmetadata事件确认元数据加载成功
统一处理加载失败与回退机制
浏览器对 error 事件的触发时机不一致（如 Safari 可能延迟触发，或对网络中断不敏感），单纯监听 error 容易漏判。
- 为每个
<source></source>绑定独立的onerror回调，或监听<video></video>的error事件后检查networkState === HTMLMediaElement.NETWORK_NO_SOURCE - 设置超时兜底：若
loadstart后 8–10 秒仍未触发loadeddata或canplay，视为加载失败，主动切换备用源或提示用户 - 准备纯静态降级方案：例如加载失败时显示封面图 + “点击播放”按钮，点击后手动调用
play()（绕过自动播放限制）
应对自动播放策略与用户交互约束
所有现代浏览器均限制无用户手势（gesture）触发的自动播放，且对静音/非静音媒体区别对待。Safari 对 muted 自动播放更宽松，Chrome 要求 muted + autoplay + playsinline 三者共存才允许内联自动播放。
- 始终设置
muted和autoplay，并在<video></video>上显式声明playsinline（iOS 必需） - 监听
play拒绝异常（DOMException: play() failed because the user didn't interact...），捕获后引导用户点击操作 - 避免在页面 onload 时立即调用
play()；可绑定到首个用户交互事件（如click、touchstart）后再尝试播放
封装轻量级兼容层辅助控制
直接操作原生 media API 易受浏览器 bug 影响（如 Firefox 中 preload="metadata" 有时不触发 loadedmetadata）。建议封装最小兼容层，屏蔽部分差异。
- 统一暴露
load()、play()、pause()方法，内部做 Promise 化处理，失败时 reject 带明确原因（如'no-source'、'play-blocked'） - 对
duration、buffered等属性读取做防错：Safari 在未加载元数据前返回NaN，应配合readyState >= HAVE_METADATA判断 - 避免依赖
seekable范围判断拖拽能力——部分 Android 浏览器返回空TimeRanges，可用duration > 0+readyState >= HAVE_FUTURE_DATA间接推断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
