HTMLMediaElement.play()是控制音视频播放的原生方法，需用户手势触发，动态设src后须监听canplay等事件再调用，并注意Blob URL清理及Safari兼容性。
html5play 函数本身不存在，别被误导
HTML 标准里没有叫 html5play 的函数。这大概率是某段自定义 JS 封装、老旧教程里的误称，或是混淆了 play() 方法和某个库的命名。真实能控制播放的是原生 HTMLMediaElement.play()，它只作用于 <audio> 或 <video> 元素。
动态设置 src 后调用 play() 会失败？这是常见坑
直接改 src 属性后立刻调 play()，浏览器大概率报错 DOMException: play() failed because the user didn't interact with the document first —— 这不是 bug，是现代浏览器的自动播放策略限制。
- 必须由用户手势（如 click、touchend）触发整个流程，不能靠定时器或 onload 自动启动
-
src更换后，需监听loadeddata或canplay事件再调play()，否则可能因未加载完成而静默失败 - 若源是 Blob URL（比如通过
URL.createObjectURL()生成），记得在不再需要时调URL.revokeObjectURL()防内存泄漏
动态生成源的典型写法（以 Blob + video 为例）
假设你用 fetch 拿到二进制流，转成 Blob 再播放：
const video = document.getElementById('myVideo');
button.addEventListener('click', async () => {
const res = await fetch('/api/stream');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
video.src = url;
video.load(); // 触发重新加载元数据
video.addEventListener('canplay', () => video.play(), { once: true });
});
注意：video.load() 不可省略，否则部分浏览器不会识别新 src；{ once: true } 避免重复绑定。
立即学习“前端免费学习笔记（深入）”；
兼容性与 fallback 要点
动态源在 Safari（尤其 iOS）上更敏感：它不支持对 blob: URL 调 play()，除非该 Blob 是通过 File 或 fetch 明确获得且上下文可信。遇到问题时优先检查：
- 是否在用户点击后 1 秒内发起
play() - 目标格式是否被该设备原生支持（如 iOS 不支持 WebM）
- 服务端是否返回了正确的
Content-Type（如video/mp4） - 考虑降级为
<iframe>嵌入或使用 MSE（Media Source Extensions）处理分片流
动态源不是“设了 src 就能播”，关键在时机、上下文、格式三者对齐。漏掉任一环，play() 都会静默拒绝或抛异常。
