Ionic5+Angular中Vimeo播放器切换视频后事件失效求助

问题描述 #

初始状态下Vimeo播放器及所有功能正常，但向iframe传入新视频链接后，视频可播放，但play、pause事件无法触发，需刷新页面才恢复。播放器代码位于独立组件，由主页面调用，点击项目时传入新链接。

问题原因 #

切换视频链接时，原有的Vimeo Player实例仍绑定在旧iframe元素上，新iframe加载后，原实例的事件监听并未关联到新播放器实例，导致事件无法触发。

解决方案 #

视频链接更新时，需销毁旧Player实例并创建新实例，同时重新绑定事件监听，具体实现如下：

组件类代码 #

import { Component, Input, ViewChild, ElementRef, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import Player from '@vimeo/player';

@Component({
  selector: 'app-vimeo-player',
  templateUrl: './vimeo-player.component.html',
  styleUrls: ['./vimeo-player.component.scss']
})
export class VimeoPlayerComponent implements OnInit, OnChanges, OnDestroy {
  @Input() videoUrl: string;
  @ViewChild('playerContainer', { static: false }) playerContainer: ElementRef;
  private player1: Player;

  ngOnInit() {
    this.initPlayer();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.videoUrl && !changes.videoUrl.firstChange) {
      this.destroyPlayer();
      setTimeout(() => {
        this.initPlayer();
      }, 100);
    }
  }

  ngOnDestroy() {
    this.destroyPlayer();
  }

  private initPlayer() {
    if (!this.playerContainer?.nativeElement) return;
    this.player1 = new Player(this.playerContainer.nativeElement);
    this.bindPlayerEvents();
  }

  private bindPlayerEvents() {
    this.player1.on('play', (data) => {
      console.log('played the video!', data);
    });

    this.player1.on('pause', (data) => {
      console.log('paused the video!', data);
    });
  }

  private destroyPlayer() {
    if (this.player1) {
      this.player1.off('play');
      this.player1.off('pause');
      this.player1.destroy().catch(err => console.error('销毁播放器失败:', err));
      this.player1 = null;
    }
  }
}

模板代码 #

<div #playerContainer>
  <iframe [src]="videoUrl" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

关键说明 #

• 用ngOnChanges监听videoUrl变化，触发播放器重置逻辑
• 调用destroy()方法清理旧实例的资源与事件监听，避免内存泄漏
• 用setTimeout等待新iframe渲染完成后再初始化新实例，确保绑定有效
• 组件销毁时执行清理逻辑，防止内存泄漏

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