移除WordPress Elementor播放列表中的下载按钮问题求助

在WordPress中用Elementor制作视频播放列表后，播放视频时会显示下载按钮，使用以下jQuery代码仅对第一个视频生效，切换视频后下载按钮依然存在：

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

问题原因 #

代码仅在页面初始加载时执行一次，Elementor切换视频时会动态更新视频元素（修改src或替换节点），新生成的视频元素没有被添加controlsList="nodownload"属性，导致下载按钮仍然显示。

解决方案 #

方案1：监听播放列表切换事件

通过监听Elementor播放列表项的点击事件，每次切换后重新为视频添加属性：

jQuery(document).ready(function($) {
    // 统一处理视频控件的函数
    function updateVideoControls() {
        $("video").attr('controlsList', 'nodownload');
        // 重新加载视频使属性生效
        $("video").each(function() {
            this.load();
        });
    }

    // 页面加载时先处理第一个视频
    updateVideoControls();

    // 监听播放列表项的点击，切换后延迟执行处理
    $(document).on('click', '.elementor-video-playlist-item', function() {
        setTimeout(updateVideoControls, 300);
    });
});

方案2：监听DOM动态变化（更可靠）

使用MutationObserver监听DOM中视频元素的新增或属性修改，自动处理所有视频：

jQuery(document).ready(function($) {
    function updateVideoControls(videoElement) {
        $(videoElement).attr('controlsList', 'nodownload');
        videoElement.load();
    }

    // 初始处理所有视频
    $("video").each(function() {
        updateVideoControls(this);
    });

    // 监听DOM变化
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 处理新增的视频元素
            if (mutation.addedNodes.length) {
                $(mutation.addedNodes).find('video').each(function() {
                    updateVideoControls(this);
                });
            }
            // 处理视频src属性修改的情况
            if (mutation.type === 'attributes' && mutation.target.tagName === 'VIDEO') {
                updateVideoControls(mutation.target);
            }
        });
    });

    // 监听整个页面的DOM变化（可缩小范围到播放列表容器，如.elementor-video-playlist）
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['src']
    });
});

补充：CSS辅助隐藏（兼容更多浏览器）

controlsList="nodownload"仅支持Chromium系浏览器，可配合CSS隐藏下载按钮：

/* 隐藏Chrome等浏览器的视频下载按钮 */
video::-webkit-media-controls-download-button {
    display: none !important;
}

使用说明 #

• 将JS代码添加到Elementor的「自定义代码」面板（或主题的自定义JS功能中）
• CSS代码添加到Elementor的「自定义CSS」面板

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