鼠标移出缩略图后YouTube视频无法停止播放的技术求助

你的问题出在mouseenter中创建的YT.Player实例是局部变量，mouseleave事件无法访问到它——直接清空videoOverlay的innerHTML只会移除DOM元素，但YouTube播放器的后台进程还在运行，所以视频会继续播放。

修正方案如下：

• 将创建的player实例存储在当前缩略图的作用域内，让mouseleave能获取到实例
• 移出鼠标时先调用player的stopVideo()方法停止播放，再清理DOM和样式

修改后的完整代码：

<div class="thumbnail" data-video-id="D9N7QaIOkG8">
    <img src="assets\meyra.jpg" alt="Thumbnail 1">
    <div class="video-overlay"></div>
</div>

<script>
  function onYouTubeIframeAPIReady() {
    const thumbnails = document.querySelectorAll(".thumbnail");

    thumbnails.forEach(function(thumbnail) {
      const videoOverlay = thumbnail.querySelector(".video-overlay");
      const videoId = thumbnail.dataset.videoId;
      let player; // 声明player变量，作用域覆盖当前缩略图的所有事件回调

      thumbnail.addEventListener("mouseenter", function() {
        player = new YT.Player(videoOverlay, {
          videoId: videoId,
          width: "100%",
          height: "100%",
          playerVars: {
            autoplay: 1,
            controls: 0,
            rel: 0,
            showinfo: 0
          }
        });

        videoOverlay.style.display = "block";
      });

      thumbnail.addEventListener("mouseleave", function() {
        if (player) {
          player.stopVideo(); // 先停止视频播放
          player.destroy(); // 销毁播放器实例，彻底释放资源
        }
        videoOverlay.innerHTML = "";
        videoOverlay.style.display = "none";
      });
    });
  }
</script>

关键改动说明： #

• 在forEach循环内部声明let player，确保mouseenter和mouseleave的回调能共享同一个播放器实例
• mouseleave时先调用stopVideo()停止播放，再调用destroy()销毁实例，避免后台进程残留
• 增加player存在性判断，防止首次鼠标移出时触发无实例的报错

内容的提问来源于stack exchange，提问作者Olubanjo Kolade