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

Question

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

它在初始加载时工作正常。

当我 select 列表中的另一个视频（它是一个单独的组件）时，它会使用 selected 视频的更新 Url 更新 @Input() videoUrl。

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

我试过两件事：

1/ 变化检测。我可以单击列表中的新视频，然后控制台注销新视频 URL @Input() 就可以了。我使用这个 URL 来更新我的 Vimeo 播放器 options.url，但是 HTML 元素没有随着新视频更新。

2/ 我还尝试将我的@Input() 视频Url 绑定到div 元素，同样这不会更新播放器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() 值动态更新其视频Url 选项

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

如果您没有从 url 中提取视频 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 中的视频 url 动态更新 Vimeo 播放器

Cannot dynamically update the Vimeo player with video url in Angular

vimeo

angular