鼠标悬停视频缩略图时播放器闪烁问题求助（附代码）

问题描述 #

开发网站双栏区域时，左侧带三个缩略图的视频模块，鼠标悬停缩略图切换对应视频时，主视频播放器出现短暂闪烁的不良视觉效果。

问题根源 #

当前实现直接修改主视频的src后立即调用load()和play()，浏览器需要重新请求、加载解码视频资源，这个过程中播放器会出现空白，进而导致闪烁。同时没有预加载机制，每次切换都要重新发起请求，加剧了闪烁问题。

解决方案 #

1. 预加载所有视频资源 #

提前加载需要切换的视频，确保切换时资源已缓存，避免网络等待

2. 改用<source>元素切换 #

通过修改<source>的src，并监听视频的canPlayThrough事件，确保视频可播放后再开始播放，减少空白时间

3. 添加加载过渡效果 #

在视频加载过程中显示加载状态，或保留上一视频的最后一帧，优化视觉体验

4. 防抖处理hover事件 #

避免快速滑动缩略图时频繁触发切换请求，减少无效加载

优化后的完整代码 #

<!-- Seccion 2 -->
<section class="info-section">
  <div class="info-container">
    <!-- Columna 1: video -->
    <div class="info-video">
      <div class="video-wrapper">
        <video id="mainVideo" controls loop>
          <source id="mainVideoSource" src="https://03611272-ecf7-4144-a70d-2ff3752f0722.mdnplay.dev/shared-assets/videos/flower.mp4" type="video/mp4">
          Tu navegador no soporta el video.
        </video>
        <div class="loading-overlay" id="loadingOverlay">
          <span>Cargando...</span>
        </div>
      </div>
    </div>

    <div class="miniaturas">
      <video class="miniatura" muted loop data-src="https://03611272-ecf7-4144-a70d-2ff3752f0722.mdnplay.dev/shared-assets/videos/flower.mp4"></video>
      <video class="miniatura" muted loop data-src="https://03611272-ecf7-4144-a70d-2ff3752f0722.mdnplay.dev/shared-assets/videos/flower.mp4"></video>
      <video class="miniatura" muted loop data-src="https://03611272-ecf7-4144-a70d-2ff3752f0722.mdnplay.dev/shared-assets/videos/flower.mp4"></video>
    </div>

    <!-- Columna 2: Texto -->
    <div class="info-text">
      <h2>Title</h2>
      <p>main text.</p>
      <a href="curso.html" class="btn-info">Ver Cursos</a>
    </div>
  </div>
</section>

<!-- Style seccion 2 -->
<style>
  .info-section {
    padding: 80px 40px;
    background-color: #f0f0f0;
  }

  .info-container {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
  }

  .video-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 450px;
  }

  .info-video video {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: cover;
  }

  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }

  .loading-overlay.active {
    display: flex;
  }

  .miniaturas {
    position: absolute;
    top: 103%;
    left: 13%;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .miniatura {
    width: 100px;
    height: 60px;
    cursor: pointer;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: transform 0.2s, border-color 0.2s;
  }

  .miniatura:hover {
    transform: scale(1.05);
    border-color: #333;
  }

  .info-text {
    max-width: 500px;
  }

  .info-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
  }

  .info-text p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
  }

  .btn-info {
    display: inline-block;
    padding: 10px 20px;
    background-color: #222;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }

  .btn-info:hover {
    background-color: #0056b3;
  }
</style>

<script>
  const mainVideo = document.getElementById("mainVideo");
  const mainVideoSource = document.getElementById("mainVideoSource");
  const miniaturas = document.querySelectorAll(".miniatura");
  const loadingOverlay = document.getElementById("loadingOverlay");
  let debounceTimer = null;
  const videoCache = new Map();

  // 预加载所有视频
  miniaturas.forEach(miniatura => {
    const videoSrc = miniatura.dataset.src;
    if (!videoCache.has(videoSrc)) {
      const cachedVideo = document.createElement('video');
      cachedVideo.src = videoSrc;
      cachedVideo.preload = 'auto';
      videoCache.set(videoSrc, cachedVideo);
    }
    // 给缩略图设置src，显示封面
    miniatura.src = videoSrc;
  });

  // 主视频hover播放
  mainVideo.addEventListener("mouseenter", () => {
    if (!mainVideo.paused) return;
    mainVideo.play();
  });

  // 缩略图hover切换视频（防抖处理）
  miniaturas.forEach((miniatura) => {
    miniatura.addEventListener("mouseenter", () => {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(() => {
        const targetSrc = miniatura.dataset.src;
        if (mainVideo.currentSrc === targetSrc) return; // 避免重复切换

        loadingOverlay.classList.add('active');
        mainVideoSource.src = targetSrc;
        
        mainVideo.load();
        
        // 视频可播放后再显示并播放
        mainVideo.addEventListener('canPlayThrough', playVideo, { once: true });
      }, 100); // 100ms防抖延迟
    });
  });

  function playVideo() {
    loadingOverlay.classList.remove('active');
    mainVideo.play();
  }
</script>

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