优化网页视频播放：动态加载与卸载视频源以节省内存

function memberVideo(clickSelector, popupSelector, videoSelector, videoSourceUrl) {
    // ... 函数体 ...
}

$(clickSelector).on('click', function(event) {
    console.clear(); // 清除控制台信息，可选
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 阻止事件冒泡

    // 关键步骤1: 设置视频源
    $(videoSelector)[0].setAttribute('src', videoSourceUrl);
    // console.log("视频源已设置:", $(videoSelector)[0].src); // 调试用

    // 显示视频弹窗
    $(popupSelector)[0].style.display = "flex";
    // 播放视频
    $(videoSelector)[0].play();

    // ... 关闭逻辑 ...
});

    $(".image-popup-close").on('click', function() {
        // 暂停视频
        $(videoSelector)[0].pause();
        // 关键步骤2: 清空视频源，释放内存
        $(videoSelector)[0].setAttribute("src", "");
        // console.log("视频源已清空:", $(videoSelector)[0].src); // 调试用
        // 隐藏视频弹窗
        $(popupSelector)[0].style.display = "none";
    });

/**
 * 控制视频弹窗的显示、播放、暂停和内存优化。
 * @param {string} clickSelector - 触发视频弹窗的元素选择器。
 * @param {string} popupSelector - 视频弹窗容器的选择器。
 * @param {string} videoSelector - `<video>`元素的选择器。
 * @param {string} videoSourceUrl - 视频文件的URL。
 */
function memberVideo(clickSelector, popupSelector, videoSelector, videoSourceUrl) {
    $(clickSelector).on('click', function(event) {
        console.clear(); // 清除控制台，可选
        event.preventDefault(); // 阻止默认的链接跳转等行为
        event.stopPropagation(); // 阻止事件冒泡，避免影响父元素

        // 1. 设置视频源：在播放前动态加载视频文件
        $(videoSelector)[0].setAttribute('src', videoSourceUrl);
        console.log("视频源已设置:", $(videoSelector)[0].src);

        // 2. 显示视频弹窗并播放视频
        $(popupSelector)[0].style.display = "flex";
        $(videoSelector)[0].play();

        // 3. 绑定关闭按钮事件
        $(".image-popup-close").on('click', function() {
            // 暂停视频
            $(videoSelector)[0].pause();
            // 清空视频源：在关闭后卸载视频文件，释放内存
            $(videoSelector)[0].setAttribute("src", "");
            console.log("视频源已清空:", $(videoSelector)[0].src);
            // 隐藏视频弹窗
            $(popupSelector)[0].style.display = "none";
        });
    });
}

// 示例调用：为特定的视频弹窗绑定功能
memberVideo(
    "#jana-hilmert-thomas", // 点击触发器
    "#jana-hilmert-thomas-popup", // 视频弹窗容器
    "#jana-hilmert-thomas-video", // 视频元素
    "https://assets.agentur-kaufmann.de/ergotherapie-brackwede/interview-jana-hilmert-thomas.mp4" // 视频源URL
);

<!-- 触发视频弹窗的元素 -->
<div id="jana-hilmert-thomas">
    <!-- 用户的头像或名字等 -->
    @@##@@
    <p>Jana Hilmert Thomas</p>
</div>

<!-- 视频弹窗容器 -->
<div id="jana-hilmert-thomas-popup" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 1000;">
    <div class="video-wrapper">
        <!-- 视频元素 -->
        <video id="jana-hilmert-thomas-video" controls playsinline></video>
        <!-- 关闭按钮 -->
        <button class="image-popup-close" style="position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer;">&times;</button>
    </div>
</div>