Question

使用Vimeo SDK（https://developer.vimeo.com/player/sdk/embed），我已将Vimeo播放器添加到Angular（8）组件中。视频URL通过我的父组件的@Input（）传入。

在初始加载时效果很好。

当我在列表中选择另一个视频（它是一个单独的组件）时，它会使用选定视频的更新后的网址更新@Input() videoUrl。

但是，尽管正确更新了@Input() videoUrl，但我无法动态更新Vimeo Player options.url。

我尝试了两件事：

1 /更改检测。我可以单击列表中的新视频，然后控制台注销新视频URL @Input（）。我使用此URL更新我的Vimeo播放器options.url，但是HTML元素不会随新视频一起更新。

2 /我还尝试将@Input（）videoUrl绑定到div元素，这同样不会更新播放器的网址。

video.component.ts

import Player from '@vimeo/player';

@Input() videoUrl: string;

videoPlayer: Player;
options = {
  url: this.videoUrl,
  width: 800
};

ngAfterViewInit(): void {
  this.videoPlayer = new Player('vimeo-player', this.options);
}

ngOnChanges(changes: SimpleChanges): void {
  this.options.url = changes.videoUrl.currentValue;
}

video.component.html

<div id="vimeo-player"></div>

请注意，我还尝试过动态更新模板：

<div id="vimeo-player" [attr.data-vimeo-url]="videoUrl"></div>

我希望Vimeo播放器使用我提供的@Input（）值动态更新其videoUrl选项

Answer 1

Vimeo SDK只是JavaScript，而不是Angular，因此它没有加入Angular的更新周期。我认为您需要致电vimeo play loadVideo method

类似这样的东西

ngOnChanges(changes: SimpleChanges): void {

    // probably need to get the videoId from the url

    player.loadVideo(videoId).then(function(id) {
      // The new video is loaded
    }).catch(function(error) {
      switch (error.name) {
          case 'TypeError':
              // The ID isn't a number
              break;

          case 'PasswordError':
              // The video is password-protected
              break;

          case 'PrivacyError':
              // The video is private
              break;

          default:
              // Some other error occurred
              break;
      }
    });
}

Answer 2

如果您没有从网址中提取视频ID，这可以为您提供帮助。

ngAfterViewInit(): void {
  this.vimeoPlayer();
}
ngOnChanges(changes: SimpleChanges): void {
    this.vimeoplayer();
}
vimeoPlayer() {
  if (this.player) {
    this.player.destroy();
  }
  this.player = new Player(this.vimeoContainerElement.nativeElement, {
    url: this.vimeoVideoURL
  });
}

无法使用Angular中的视频网址动态更新Vimeo播放器

2 个答案: