Angular中Plyr动态设置YouTube视频源失效问题求助

下面是针对该问题的几种有效修复方式：

修复方案1：使用Plyr的source()方法设置源 #

直接赋值player.source无法触发Plyr内部的源更新逻辑，改用官方推荐的source()方法：

ngAfterViewInit(): void {
  this.player = new Plyr('#vplayer', { 
    controls: [], 
    fullscreen: { enabled: true, iosNative: true, container: '#video-container' }, 
    volume: 1
  });

  // 调用source方法设置YouTube源
  this.player.source({
    type: 'video',
    sources: [
      {
        src: 'g2Ok2LSzBlk',
        provider: 'youtube' // 用provider指定平台，而非type
      }
    ]
  });

  this.player.on('ready', (event: any) => {
    this.player.muted = false;
    this.player.play(); 
  });
}

修复方案2：初始化时直接传入源配置 #

在创建Plyr实例的同时指定源，避免后续动态赋值的问题：

ngAfterViewInit(): void {
  this.player = new Plyr('#vplayer', { 
    controls: [], 
    fullscreen: { enabled: true, iosNative: true, container: '#video-container' }, 
    volume: 1,
    // 初始化时直接配置源
    source: {
      type: 'video',
      sources: [
        {
          src: 'g2Ok2LSzBlk',
          provider: 'youtube'
        }
      ]
    }
  });

  this.player.on('ready', (event: any) => {
    this.player.muted = false;
    this.player.play(); 
  });
}

修复方案3：设置源后手动触发刷新 #

如果必须先初始化再动态设置源，设置后调用refresh()方法强制Plyr更新DOM：

ngAfterViewInit(): void {
  this.player = new Plyr('#vplayer', { 
    controls: [], 
    fullscreen: { enabled: true, iosNative: true, container: '#video-container' }, 
    volume: 1
  });

  this.player.source = {
    type: 'video',
    sources: [
      {
        src: 'g2Ok2LSzBlk',
        provider: 'youtube'
      }
    ]
  };

  // 手动刷新播放器
  this.player.refresh();

  this.player.on('ready', (event: any) => {
    this.player.muted = false;
    this.player.play(); 
  });
}

关键说明 #

• YouTube源的正确配置是在sources项中使用provider: 'youtube'，而非type: 'youtube'（type字段用于指定视频的MIME类型，比如MP4的video/mp4）。
• 直接赋值player.source不会触发Plyr的内部更新流程，调用source()方法或refresh()方法才能让播放器识别新的源。

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