优化网页视频播放的内存占用：动态加载与卸载视频源

<button id="jana-hilmert-thomas">打开视频</button>

<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;">
    <div style="position: relative;">
        <video id="jana-hilmert-thomas-video" width="640" height="360" controls autoplay></video>
        <button class="image-popup-close" style="position: absolute; top: 10px; right: 10px; background: white; border: none; padding: 5px 10px; cursor: pointer;">X</button>
    </div>
</div>

/**
 * 管理视频弹窗的打开、关闭和内存优化。
 *
 * @param {string} clickSelector - 触发视频弹窗打开的点击元素的jQuery选择器。
 * @param {string} popupSelector - 视频弹窗容器的jQuery选择器。
 * @param {string} videoSelector - 视频元素的jQuery选择器。
 * @param {string} videoSourceUrl - 视频文件的URL。
 */
function memberVideo(clickSelector, popupSelector, videoSelector, videoSourceUrl) {
    $(clickSelector).on('click', function(event) {
        event.preventDefault(); // 阻止默认行为
        event.stopPropagation(); // 阻止事件冒泡

        // 1. 设置视频源并开始加载
        $(videoSelector)[0].setAttribute('src', videoSourceUrl);

        // 2. 显示弹窗
        $(popupSelector)[0].style.display = "flex";

        // 3. 播放视频
        $(videoSelector)[0].play();

        // 绑定关闭按钮事件
        $(".image-popup-close").on('click', function() {
            // 1. 暂停视频
            $(videoSelector)[0].pause();

            // 2. 清空视频源，释放内存
            $(videoSelector)[0].setAttribute("src", "");

            // 3. 隐藏弹窗
            $(popupSelector)[0].style.display = "none";
        });
    });
}

// 调用函数，传入相应的选择器和视频URL
memberVideo(
    "#jana-hilmert-thomas", 
    "#jana-hilmert-thomas-popup", 
    "#jana-hilmert-thomas-video", 
    "https://assets.agentur-kaufmann.de/ergotherapie-brackwede/interview-jana-hilmert-thomas.mp4"
);

// 如果有多个视频，可以多次调用此函数
// memberVideo("#another-member", "#another-popup", "#another-video", "path/to/another-video.mp4");