视频弹窗内存优化求助：移除src后无法恢复视频播放

问题分析 #

你之前尝试保存视频源时出现功能失效，原因是：

• 若在函数外部初始化const source = $(video)[0].src，可能DOM还未完全加载，视频元素不存在，导致src获取失败
• 关闭弹窗后清空了src，但未持久保存原始地址，再次打开时无法恢复

修改后代码 #

function memberVideo(click, popup, video) {
  // 提前获取元素并保存原始视频地址，确保DOM加载完成后执行此函数
  const $video = $(video);
  const originalVideoSrc = $video[0].src;
  const $popup = $(popup);

  // 绑定关闭弹窗事件，避免重复绑定
  $(".image-popup-close").on('click', function() {
    // 仅处理当前显示的弹窗对应的视频
    if ($popup.css('display') === 'flex') {
      $video[0].pause();
      $video[0].src = ""; // 清空src释放内存
      $popup.css('display', 'none'); // 隐藏弹窗
    }
  });

  $(click).on('click', function(event) {
    console.clear();
    event.preventDefault();
    event.stopPropagation();

    // 恢复视频原始地址并重新加载
    $video[0].src = originalVideoSrc;
    $video[0].load();
    // 显示弹窗并播放视频
    $popup.css('display', 'flex');
    $video[0].play();
  });
};

// 调用函数，确保DOM加载完成后执行
$(document).ready(function() {
  memberVideo("#jana-hilmert-thomas", "#jana-hilmert-thomas-popup", "#jana-hilmert-thomas-video");
});

关键改动说明 #

• 提前保存原始地址：在函数内部初始化时获取视频元素的src，确保元素已加载，避免未定义错误
• 避免重复绑定事件：将关闭弹窗的事件绑定移至外层，防止每次点击触发元素时重复绑定，导致多次执行暂停/清空操作
• 恢复视频流程：打开弹窗时先恢复原始src，调用load()确保视频重新加载，再执行play()，符合浏览器自动播放政策（由用户点击触发）
• 内存优化：关闭弹窗时清空src，释放视频占用的内存，解决低内存设备卡顿问题

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