请用js代码帮我写一个视频切换不闪屏效果

好的，以下是一个简单的视频切换不闪屏效果的 JS 代码示例：

HTML 代码：

<!-- 在 HTML 中添加两个视频标签，分别是要切换的两个视频 -->
<video id="video1" src="video1.mp4"></video>
<video id="video2" src="video2.mp4"></video>

<!-- 添加一个按钮，用于触发视频切换 -->
<button onclick="switchVideo()">切换视频</button>

JS 代码：

// 定义一个变量，用于记录当前正在播放的视频
let currentVideo = 1;

// 定义一个函数，用于切换视频
function switchVideo() {
  // 获取当前正在播放的视频和另一个视频的 DOM 元素
  const currentVideoElement = document.querySelector(`#video${currentVideo}`);
  const nextVideoElement = document.querySelector(`#video${currentVideo === 1 ? 2 : 1}`);

  // 暂停当前正在播放的视频
  currentVideoElement.pause();

  // 设置下一个视频的位置和尺寸，以及禁用掉它的音频
  nextVideoElement.style.position = 'absolute';
  nextVideoElement.style.top = '0';
  nextVideoElement.style.left = '0';
  nextVideoElement.style.width = '100%';
  nextVideoElement.style.height = '100%';
  nextVideoElement.muted = true;

  // 将下一个视频的 DOM 元素插入到当前视频的后面
  currentVideoElement.after(nextVideoElement);

  // 播放下一个视频
  nextVideoElement.play();

  // 监听下一个视频的 canplaythrough 事件，表示它已经可以无缝地切换了
  nextVideoElement.addEventListener('canplaythrough', () => {
    // 移除当前视频的 DOM 元素
    currentVideoElement.remove();

    // 将变量 currentVideo 切换到另一个视频
    currentVideo = currentVideo === 1 ? 2 : 1;
  }, { once: true });
}

这段代码中，我们首先在 HTML 中添加了两个视频标签和一个按钮。当用户点击按钮时，会触发 switchVideo 函数，切换两个视频。

在 switchVideo 函数中，我们首先获取当前正在播放的视频和另一个视频的 DOM 元素，然后暂停当前视频的播放。接着，我们设置下一个视频的位置和尺寸，并禁用它的音频（避免出现重复声音的问题）。然后，我们将下一个视频的 DOM 元素插入到当前视频的后面，并播放下一个视频。

最后，我们监听下一个视频的 canplaythrough 事件，表示它已经可以无缝地切换了。当这个事件触发时，我们移除当前视频的 DOM 元素，并将变量 currentVideo 切换到另一个视频。这样就完成了视频的切换，而且不会出现闪屏的问题。