Velo开发：视频切换后加载完成却无法播放（isPlaying显示为true）

核心问题排查 #

1. 变量名大小写不一致：代码里定义了const videobox = $w("#videoBox1");，但后续事件回调里用的是videoBox（首字母大写），这会导致未定义错误，先修正这个基础问题。
2. 内置行为与代码逻辑冲突：你在编辑器里给VideoBox设置了“结束时停止”，这个内置行为会在视频播放结束时自动停止，和代码里onEnded事件中调用play()的逻辑冲突，导致状态异常。
3. 视频切换后未等待加载完成：直接设置src后立即调用play()，此时视频可能还未完成加载，虽然isPlaying返回true，但视频实际上还没准备好播放，视觉上无反应。

修正后的代码 #

$w.onReady(function () {
  const video1 = "wix:video"; // 替换为你的实际视频路径
  const video2 = "wix:video"; // 替换为你的实际视频路径

  const videobox = $w("#videoBox1");
  const button = $w("#Button1");
  let firstPlay = true;

  // 关闭VideoBox内置行为，避免与自定义逻辑冲突
  videobox.clickToPlay = false;
  videobox.pauseOnClick = false;
  videobox.stopOnEnd = false;

  button.onMouseIn(() => {
    videobox.show();
    // 确保视频加载完成后再播放
    if (videobox.readyState >= 2) {
      videobox.play();
    } else {
      videobox.once("canplay", () => {
        videobox.play();
      });
    }
  });

  button.onMouseOut(() => {
    videobox.hide();
    videobox.stop();
    // 可选：如需再次悬停时从video1开始，取消下方注释
    // if (!firstPlay) {
    //   videobox.src = video1;
    //   firstPlay = true;
    // }
  });

  videobox.onEnded(() => {
    if (firstPlay) {
      firstPlay = false;
      videobox.src = video2;
      // 等待video2加载完成后播放
      videobox.once("canplay", () => {
        videobox.play();
      });
    } else {
      // video2循环播放
      videobox.play();
    }
  });
});

额外说明 #

• 确保video1和video2使用Wix视频的完整wix:video://v1/xxx格式路径。
• 取消内置行为是关键，避免系统自带逻辑和自定义代码互相干扰。
• 通过canplay事件监听视频加载状态，确保只有视频准备就绪后才触发播放，解决isPlaying显示true但实际不播放的问题。

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