请帮我用js写一段视频自动切换不闪屏效果

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

HTML 代码：

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

JS 代码：

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

// 定义一个函数，用于自动切换视频
function switchVideoAutomatically() {
  // 获取当前正在播放的视频和另一个视频的 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;

    // 继续自动切换视频
    setTimeout(switchVideoAutomatically, 5000);
  }, { once: true });
}

// 页面加载完成后，开始自动切换视频
window.addEventListener('load', () => {
  switchVideoAutomatically();
});

这段代码中，我们首先在 HTML 中添加了两个视频标签。然后，在 JS 中定义了一个变量 currentVideo，用于记录当前正在播放的视频。还定义了一个函数 switchVideoAutomatically，用于自动切换视频。

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

最后，我们监听下一个视频的 canplaythrough 事件，表示它已经可以无缝地切换了。当这个事件触发时，我们移除当前视频的 DOM 元素，并将变量 currentVideo 切换到另一个视频。然后，我们使用 setTimeout 函数，延迟 5000 毫秒后再次调用 switchVideoAutomatically 函数，实现视频的自动切换。

在页面加载完成后，我们调用 switchVideoAutomatically 函数，开始自动切换视频。这样就完成了视频的自动切换，而且不会出现闪屏的问题。