NextJS+React项目中VideoJS调用play()需包裹setTimeout才生效问题

核心原因有3个： #

• 第一是自动播放策略的时序冲突
  你的代码中play()调用在muted()设置之前，浏览器非用户交互触发的自动播放要求必须为静音状态，直接调用play()时muted属性还未赋值，触发浏览器自动播放拦截规则，请求被静默拒绝。而setTimeout将play()推入宏任务队列，会等待当前调用栈的muted()设置逻辑执行完成后才运行，刚好符合自动播放的前置条件。
• 第二是VideoJS ready回调的触发时机偏差
  VideoJS的ready回调标记的是播放器核心实例初始化完成，并不代表内部已完成所有配置和原生DOM的同步、也不代表视频元数据已经加载完成。此时直接调用play()，会被VideoJS内部的状态校验逻辑拦截，而1ms延迟刚好等VideoJS完成所有初始化链路的收尾工作，状态对齐后调用即可正常执行。
• 第三是React渲染队列的执行时序问题
  NextJS/React的effect回调运行在React的提交阶段后，此时原生DOM虽然已经挂载，但VideoJS的实例绑定和属性同步属于第三方库的异步逻辑，会和React的渲染后续逻辑抢占执行顺序，setTimeout确保play()执行在所有同步逻辑、微任务执行完成之后，规避了时序竞争。

更优雅的修复方案（替换setTimeout） #

调整调用顺序+利用play返回的Promise做错误兜底，即可不用依赖hack的延迟逻辑：

currentVideoPlayer.ready(async () => {
  // 优先设置静音属性，满足浏览器自动播放要求
  currentVideoPlayer.muted(
    isCurrentVideoMuted || !isCurrentVideoFullScreen
  );
  try {
    await currentVideoPlayer.play();
  } catch (e) {
    // 此处可添加自动播放失败的降级逻辑，比如显示播放按钮引导用户点击触发
    console.warn('视频自动播放失败', e);
  }
});

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