Angular项目中Clappr播放器移除下载选项的优化方案咨询

问题背景 #

在Angular项目中移除视频下载选项，常规做法是：

• 给video元素绑定oncontextmenu事件并调用event.preventDefault()禁用右键菜单
• 给video元素添加controlslist="nodownload"属性

但使用Clappr播放器时，它会动态构建video元素并挂载到指定ID的<div>上，官方文档未提供自定义video元素controlsList的配置项，也无上下文菜单相关事件接口。尝试在播放器构造函数中绑定onContextmenu事件无效，目前采用定时器轮询获取video元素的临时方案，但不够优雅。

当前临时实现方案 #

let tmrVideoElement: ReturnType<typeof setInterval> ; let cnt = 0;
new Promise((res, rej)=>{
    tmrVideoElement = setInterval(()=>{
        let videoElement = <HTMLVideoElement>document.querySelector('[data-html5-video]');
        cnt++;
        if (videoElement)
            res(videoElement);

        if (cnt > 20) 
            res(undefined)
        
    }, 500);
}).then((videoElement: HTMLVideoElement | undefined)=>{
    clearInterval(tmrVideoElement);
    if (videoElement) {
        videoElement.setAttribute('controlslist', 'nodownload');
        videoElement.oncontextmenu = this.onVideoRightClick.bind(this);
    }
})

更优解决方案 #

方案1：利用Clappr的READY事件 #

Clappr初始化完成后会触发READY事件，此时可安全获取内部video元素，无需轮询：

import { Player } from 'clappr';

// 初始化播放器
const player = new Player({
  source: 'your-video-url',
  parentId: '#player-container'
});

// 监听READY事件处理video元素
player.on(Player.Events.READY, () => {
  const videoElement = player.core?.media?.el as HTMLVideoElement;
  if (videoElement) {
    videoElement.setAttribute('controlslist', 'nodownload');
    videoElement.oncontextmenu = (e) => {
      e.preventDefault();
      // 可按需添加自定义右键逻辑
    };
  }
});

方案2：用MutationObserver监听DOM变化 #

通过MutationObserver监听播放器容器的DOM变更，当video元素被插入时自动处理，不依赖播放器内部事件，兼容性更强：

const playerContainer = document.getElementById('player-container');
if (playerContainer) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.addedNodes.length) {
        const videoElement = playerContainer.querySelector('[data-html5-video]') as HTMLVideoElement;
        if (videoElement && !videoElement.hasAttribute('controlslist')) {
          videoElement.setAttribute('controlslist', 'nodownload');
          videoElement.oncontextmenu = (e) => e.preventDefault();
          observer.disconnect(); // 处理完成后停止监听，避免重复操作
        }
      }
    });
  });

  observer.observe(playerContainer, {
    childList: true,
    subtree: true
  });
}

方案3：自定义Clappr插件（全局复用） #

如果项目多处使用Clappr，可编写自定义插件实现全局生效：

import { BasePlugin, Player } from 'clappr';

class DisableVideoDownloadPlugin extends BasePlugin {
  static get version() { return '1.0.0'; }
  static get playerEvents() {
    return {
      [Player.Events.READY]: 'onReady'
    };
  }

  onReady() {
    const videoElement = this.player.core?.media?.el as HTMLVideoElement;
    if (videoElement) {
      videoElement.setAttribute('controlslist', 'nodownload');
      videoElement.oncontextmenu = (e) => e.preventDefault();
    }
  }
}

// 注册插件
Player.registerPlugin('disableVideoDownload', DisableVideoDownloadPlugin);

// 初始化播放器时启用插件
const player = new Player({
  source: 'your-video-url',
  parentId: '#player-container',
  plugins: [DisableVideoDownloadPlugin]
});

方案说明 #

• 方案1直接利用Clappr内置事件，代码简洁，是首选方案；
• 方案2不依赖播放器内部逻辑，适合对版本兼容性要求高的场景；
• 方案3适合多页面复用，一次注册全局生效。

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