如何切换影片剪辑以显示在Button的Mousehover HTML画布上

<button id="videoButton">切换影片剪辑</button>

<canvas id="videoCanvas"></canvas>

// 获取Button元素和HTML画布元素
var videoButton = document.getElementById("videoButton");
var videoCanvas = document.getElementById("videoCanvas");

// 定义影片剪辑的URL列表
var videoUrls = [
  "video1.mp4",
  "video2.mp4",
  "video3.mp4"
];

// 定义当前显示的影片剪辑索引
var currentVideoIndex = 0;

// 监听Button的Mousehover事件
videoButton.addEventListener("mouseover", function() {
  // 切换影片剪辑的显示
  videoCanvas.src = videoUrls[currentVideoIndex];
  
  // 增加当前显示的影片剪辑索引
  currentVideoIndex++;
  
  // 如果索引超过了影片剪辑URL列表的长度，重置为0
  if (currentVideoIndex >= videoUrls.length) {
    currentVideoIndex = 0;
  }
});