核心问题是解码能力差异，必须用多格式兜底：音频用+，视频用mp4(h.264+aac)+webm(vp9+opus)双源，并精确声明type、起http服务、加muted与手势授权。
核心问题不在标签写法，而在解码能力差异——浏览器内核（WebKit、Blink、Gecko）调用的底层解码器不同，同一文件在Chrome能播、Safari黑屏，本质是编码格式不被对应引擎支持。
必须用多格式兜底，不能只靠src
单写<audio src="a.mp3"></audio>或<video src="v.mp4"></video>，等于把解码选择权全交给浏览器猜。而WebKit（Safari/iOS）对MIME type极其严格，没声明type就跳过加载；旧Android WebView甚至不触发canplay事件。正确做法是显式提供多个源，并标注准确type：
- 音频优先组合：
<source src="a.mp3" type="audio/mpeg"></source>+<source src="a.ogg" type="audio/ogg"></source> - 视频推荐双源：
<source src="v.mp4" type="video/mp4; codecs=" avc1.42e01e mp4a.40.2></source>+<source src="v.webm" type="video/webm; codecs=" vp9 opus></source> - type值必须精确：写
audio/mp3会失败，正确是audio/mpeg；video/avi基本无用，现代浏览器不支持AVI容器
编码格式比容器名更重要
MP4不是万能钥匙。一个.mp4文件可能用H.265（HEVC）编码，但iOS 13以下、大部分Android设备不支持；也可能用AAC-LC音频，但某些老版Firefox只认MP3。真正起作用的是编解码器组合：
- 最稳视频编码：H.264（AVC）视频 + AAC音频 → 兼容所有主流平台
- 可选替代：VP9视频 + Opus音频 → Chrome/Edge/Firefox友好，但iOS Safari不支持
- 音频避坑：避免WAV（体积大）、FLAC（兼容差），MP3和Opus已覆盖99%场景
iOS和Android需针对性补丁
WebKit引擎对生命周期控制极严，而Android低版本WebView事件机制残缺，纯HTML无法统一处理：
- iOS上设置播放位置必须等
canplay事件，currentTime在之前设无效；Android可直接设再play() - 自动播放强制加
muted，且iOS要求页面已获用户手势授权（如click/touchstart后才允许play()） - 调用
play()必须用Promise捕获拒绝：video.play().catch(e => console.warn('play failed:', e))，否则静默失败
本地开发别用file://协议
Chrome和Firefox在file://下禁用音视频解码（安全策略），导致本地双击HTML文件必黑屏。必须起HTTP服务：
- VS Code装Live Server插件一键启动
- 命令行用
npx http-server或python3 -m http.server 8000 - 确保控制台无
Cross-origin request blocked报错，否则加CORS头或配代理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
