点击视频无法弹出弹窗问题求助（jQuery）

Hey there! No worries at all—we all start somewhere with jQuery and JavaScript 😊 Let's fix up your code so that clicking a video opens the lightbox and starts playing the video automatically.

原代码的几个小问题 #

• 每次点击视频都会给$lightbox绑定新的click事件，导致关闭时可能触发多次fadeOut
• 没有调用视频的play()方法，所以弹窗出现后不会自动播放
• 缺少基础的CSS让弹窗初始隐藏并居中显示

修正后的完整方案 #

首先添加必要的CSS来让弹窗正常显示：

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.lightbox video {
  max-width: 90%;
  max-height: 90%;
}
.lightbox .caption {
  color: white;
  text-align: center;
  margin-top: 10px;
}

然后是修正后的jQuery代码：

(function() {
  // 初始化弹窗元素，确保只创建一次
  var $lightbox = $("<div class='lightbox'></div>");
  var $videoContainer = $("<div></div>"); // 用容器包裹视频，方便后续替换
  var $caption = $("<p class='caption'></p>");
  
  // 组装弹窗并添加到页面
  $lightbox.append($videoContainer).append($caption);
  $('body').append($lightbox);

  // 绑定弹窗关闭事件（只绑定一次）
  $lightbox.on('click', function() {
    // 关闭时暂停视频并清空src，避免继续播放
    var $currentVideo = $videoContainer.find('video');
    if ($currentVideo.length) {
      $currentVideo[0].pause();
      $currentVideo.remove();
    }
    $lightbox.fadeOut('fast');
  });

  // 绑定视频点击事件
  $('.lightbox-gallery video').click(function(e) {
    e.preventDefault();
    var $targetVideo = $(this);
    var src = $targetVideo.attr("src");
    var cap = $targetVideo.attr("alt") || ""; // 兼容没有alt的情况

    // 创建新的视频元素（避免复用旧元素的播放状态问题）
    var $newVideo = $("<video controls></video>");
    $newVideo.attr('src', src);
    
    // 清空容器并添加新视频
    $videoContainer.empty().append($newVideo);
    $caption.text(cap);

    // 显示弹窗并自动播放视频
    $lightbox.fadeIn('fast', function() {
      // 弹窗显示后再播放，确保视频已加载
      $newVideo[0].play().catch(function(error) {
        console.log("自动播放失败：", error);
        // 浏览器可能阻止自动播放，这里可以提示用户手动点击播放
      });
    });

    // 阻止事件冒泡，避免点击视频时直接关闭弹窗
    e.stopPropagation();
  });
}());

关键改动说明 #

• 只绑定一次关闭事件：把$lightbox的点击事件移到视频点击事件外面，避免重复绑定
• 自动播放处理：在弹窗fadeIn完成后调用play()，同时处理浏览器可能阻止自动播放的情况（现在很多浏览器需要用户交互才能自动播放，所以加了catch处理）
• 视频元素复用优化：每次点击创建新的视频元素，避免旧视频的播放状态残留，关闭时移除视频并暂停
• 阻止事件冒泡：点击视频本身不会触发弹窗的关闭事件，提升用户体验
• 基础CSS：让弹窗全屏覆盖、背景半透明，视频居中显示

这样修改后，点击视频就能弹出弹窗并自动尝试播放视频啦！

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