单写src属性常不播放，因浏览器格式支持差异大（如ie9仅认mp4/mp3、safari不支持ogg），导致静默失败；必须用多个显式声明不同格式及准确type类型，由浏览器自主选择首个可解码项。
直接用 <video></video> 和 <audio></audio> 标签就能嵌入，不用 JS 也能播；但想稳定跨浏览器播放，必须提供多格式 <source></source>，且不能只靠 src 属性。
为什么单写 src 属性经常不播？
浏览器对音视频格式支持差异大，比如 IE9 只认 MP3 和 MP4，Safari 不支持 OGG，Firefox 对 WAV 支持不稳定。只写一个 src="song.mp3"，在某些浏览器里会静默失败，连错误提示都没有。
正确做法是用 <source></source> 显式声明多个格式，让浏览器自己选第一个能解码的：
-
<source src="audio.mp3" type="audio/mpeg"></source>（覆盖 Chrome/Firefox/Edge/Safari） -
<source src="audio.ogg" type="audio/ogg"></source>（补 Firefox/Opera） -
<source src="audio.wav" type="audio/wav"></source>（兜底 Safari/旧版）
注意：type 属性必须写准确，audio/ogg 写成 audio/ogv 或漏掉，Chrome 就会跳过该 <source></source>。
autoplay 为什么点了页面也没反应？
现代浏览器（Chrome ≥66、Firefox ≥66、Safari ≥11）默认禁止有声音的自动播放，这是硬性策略，不是 bug。即使写了 autoplay，只要没加 muted，多数情况会静默失败。
两种可行路径：
- 加
muted autoplay：适合背景音乐、引导视频等无需声音的场景 - 等用户交互后再调用
play()：比如监听click或touchstart，然后执行audio.play()—— 这是唯一可靠触发有声自动播放的方式
别试 autoplay="true" 或 autoplay="1"，HTML 属性是布尔型，只写 autoplay 就够了。
怎样避免加载卡顿或播放失败？
关键在 preload 属性和服务器配置：
-
preload="none"：最省流量，但用户点播放时可能卡顿几秒 -
preload="metadata"：推荐默认值，只加载时长、尺寸、封面等元信息，快且轻量 -
preload="auto"：强制全量预加载，移动端慎用，可能被拦截或耗流量
另外，确保音频/视频文件托管在支持 HTTP Range 请求的服务器上。否则 currentTime 跳转、拖拽进度条会失效，控制台报错 DOMException: The video playback was aborted due to a corruption problem 或类似网络错误。
自定义控件时，play() 报错 “NotAllowedError” 怎么办？
这个错误几乎都源于：在没有用户手势（如 click/touch）上下文中调用 play()。例如在 setTimeout、DOMContentLoaded、甚至 canplaythrough 事件里直接调 play()，都会被拒绝。
安全做法只有两种：
- 把
play()绑定到明确的用户操作上，比如button.addEventListener('click', () => audio.play()) - 如果必须初始化播放，先用
muted+autoplay播起来，再等用户点击一次“取消静音”，再调play()（此时已有激活上下文）
别依赖 load() 方法重载——它不会重置播放器状态，也解决不了权限问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
