React SPA如何留存用户交互实现带音视频自动播放（类YouTube方案）

浏览器对带音视频的自动播放限制，完全绑定用户激活（User Activation） 状态：

• 用户点击、触摸等有效交互产生的激活令牌，仅在两个场景下生效：一是交互事件的同步调用栈内直接调用play()，二是交互触发的原生页面导航会把令牌带到新页面上下文。
• 你遇到NotAllowedError的根本原因：当前使用的React路由默认拦截了原生a标签跳转，走纯JS修改路由、局部更新DOM的SPA逻辑，打断了用户点击到视频播放的激活链路，浏览器判定视频播放动作未获得用户授权，直接拦截。
• YouTube能实现该效果没有黑科技，本质是没有完全切断原生导航的激活链路，或是在点击事件的同步栈内提前完成了播放权限绑定，不存在所谓“跨路由留存交互状态”的特殊API。

按体验优先级排序，全场景兼容iOS Safari、Chrome等主流浏览器：

• 方案1：保留原生跳转行为（和YouTube实现逻辑一致）
  视频播放页的入口链接不要绑定e.preventDefault()拦截默认跳转，让浏览器执行原生同域页面导航。这种由用户主动点击触发的原生导航，会自动携带激活状态到新页面，页面加载完成后直接调用video.play()不会被拦截。若需优化加载体验避免白屏，可配合资源预取、页面预渲染能力，加载体验和纯SPA无差异。
• 方案2：必须保留纯SPA无刷新体验时，在点击事件同步栈内提前占位激活
  不要等路由切换完成、视频组件挂载后再调用play()，要在用户点击入口的click回调同步逻辑内完成权限占位：
  1. 提前创建一个临时隐藏的video元素，不设置muted属性
  2. 在click事件的同步执行栈内，直接调用临时video的play()，随即调用pause()
  3. 等路由切换完成、正式视频组件挂载后，对齐视频源再调用play()即可正常带音播放

  注意：占位操作必须放在click事件的同步调用栈中，不能包裹在setTimeout、await、requestAnimationFrame等异步逻辑里，否则激活状态会立即失效。

• 方案3：激活状态前置校验
  调用播放方法前先判断navigator.userActivation.isActive标识，若为false说明激活状态已丢失，不要强行调用play触发报错。SPA场景下可在路由跳转守卫中标记跳转是否由用户点击触发，在激活有效期（用户点击后约5s内）完成视频元素挂载和播放调用。

• 不要在组件挂载的useEffect里直接调用play，这个时机已经脱离了用户点击的同步调用栈，必然触发权限拦截
• 不需要为了过权限默认给视频加muted属性，只要激活链路完整，带声音播放完全符合浏览器规则
• iOS Safari对激活链路的校验比桌面端Chrome更严格，哪怕是极短的异步延迟打断调用栈，都可能导致播放被拦截

内容的提问来源于stack exchange，提问作者Anthony