无法动态更新Vimeo播放器中的视频url

Question

使用Vimeo (https://developer.vimeo.com/player/sdk/embed)，我将Vimeo添加到了角(8)组件中。视频URL是通过来自我的父组件的@URL()传入的。

它在初始负载时工作得很好。

当我在列表中选择另一个视频时--这是一个单独的组件--它用所选视频的更新Url更新@Input() videoUrl。

然而，尽管正确地更新了@Input() videoUrl，但我不能动态地更新Vimeo options.url。

我试过两件事：

1变化检测。我可以点击列表中的新视频，控制台也可以登录新的视频URL @ out ()。我使用这个URL来更新我的Vimeo options.url，但是HTML没有用新的视频更新。

2/我还尝试将我的@ url () videoUrl绑定到div元素，这同样不会更新players url。

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只是JavaScript，而不是角，所以它没有连接到角的更新周期。我想你需要打电话给vimeo play loadVideo方法

就像这样

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

如果您没有从url中提取视频标识，这可以帮助您。

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
  });
}