I’m trying to achieve this functionality on my page using Velo:

There is a button and a videobox on the page. The videobox is hidden by default, and the video file loaded in the Editor is video1. The videobox Behaviour settings are set to: “starts to play On Click”, “No Pause”, “Stops when it ends”.

When the button is hovered over, the videobox shows and starts to play. When video1 has played to the end, the videobox loads and plays video2, and video2 continues to play on a loop.

$w.onReady(function () {
  const video1 = "wix:video";
  const video2 = "wix:video";

//I have redacted the paths of the videos for this post

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

  button.onMouseIn(() => {
    videoBox.show();
    videoBox.play();
  });

  button.onMouseOut(() => {
    videoBox.hide();
  });

  videoBox.onEnded(() => {
    if (firstplay) {
      videoBox.src = video2;
      firstplay = false;
    }
    videoBox.play();
  });
});

When previewing, everything is normal until video2 gets loaded, and it seems that it gets loaded but never plays. What am I doing wrong?