HTML5的play()函数本身不支持互动视频逻辑，仅触发播放，真正的互动需用JavaScript控制currentTime、pause()、play()及DOM层叠来模拟分支；必须由用户手势首次触发play()，否则抛出NotAllowedError。
HTML5 的 play() 函数本身不支持“互动视频”逻辑——它只是触发媒体播放，真正的互动行为（如点击跳转、分支选择、暂停后弹出选项）必须由你用 JavaScript 主动控制。
为什么直接调用 play() 无法实现互动？
浏览器对自动播放有严格限制：play() 必须由用户手势（如 click、touchstart）触发，且不能在异步回调（如 setTimeout、fetch.then）中调用，否则会抛出 NotAllowedError。所谓“互动视频”，其实是把视频拆成片段，靠 JS 控制 currentTime、pause()、play() 和 DOM 层叠来模拟分支。
怎么用 play() 配合事件实现基础互动？
核心是监听视频事件 + 动态修改播放状态和界面。常见做法：
- 给
<video></video>绑定timeupdate，检查当前时间点是否到达预设的“互动节点”（例如 12.5 秒），然后pause()并显示按钮组 - 用户点击某个按钮后，用
video.currentTime = xx跳转到对应片段开头，再调用video.play() - 避免在
canplay或loadeddata回调里直接play()—— 大部分移动端会拒绝 - 务必在用户手势回调中首次调用
play()（哪怕只是静音播放），后续才能自由调用
play() 失败的典型错误和绕过方式
最常遇到的是 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.。解决关键：
立即学习“前端免费学习笔记（深入）”；
- 首次播放必须绑定在
click或touchend上，且不能加preventDefault()（会影响 iOS Safari） - 如果需要静音自动启播，可设
video.muted = true和video.autoplay = true，再在play()Promise resolve 后取消静音 - 不要依赖
video.readyState === 4就调用play()；改用video.oncanplay或await video.play()捕获失败 - 某些安卓 WebView 对
play()返回的 Promise 不兼容，需加.catch(() => {})防止报错中断流程
一个最小可行的分支播放示例
假设视频在 8 秒处暂停，提供“继续”和“重看开头”两个按钮：
<video id="myVideo" src="story.mp4"></video>
<div id="choices" style="display:none">
<button onclick="jumpTo(8)">继续</button>
<button onclick="jumpTo(0)">重看开头</button>
</div>
<p><script>
const video = document.getElementById('myVideo');
const choices = document.getElementById('choices');</p><p>video.addEventListener('timeupdate', () => {
if (Math.abs(video.currentTime - 8) < 0.1) {
video.pause();
choices.style.display = 'block';
}
});</p><p>function jumpTo(time) {
video.currentTime = time;
video.play().catch(e => console.warn('play failed:', e));
choices.style.display = 'none';
}
</script></p>真正难的不是调用 play()，而是管理多个分支的时间轴、状态同步、以及在不同设备上保持响应一致——这些没法靠单个函数解决，得靠状态机或专门的互动视频库（如 shaka-player 扩展或 video.js 插件）来收敛复杂度。
