具有div切换播放暂停的ngx-youtube-player角度组件

Question

[我正在尝试使用ngx-youtube-player的方法是使div透明，然后单击可切换播放和暂停视频。我之所以这样做，是因为我的Angular项目包含许多组件，并且一种导航方式是使用键盘（上下箭头）。使用任何类型的YouTube播放器，这些控件都会被阻止。

如何实现？

在video.component.html中

<div class="content" (click)="playVideo()"></div>
  <div class="video">
    <youtube-player [videoId]="id" (ready)="savePlayer($event)"(change)="onStateChange($event)">
    </youtube-player>
  </div>

video.component.ts

id = 'btfgGf2wDgI';
 private player;
 private ytEvent;

playVideo() {
    this.player.playVideo();
  }

pauseVideo() {
    this.player.pauseVideo();
  }

Answer 1

[如果您考虑使用新的Angular 9组件'youtube-player'，那很容易！

npm install @angular/youtube-player

app.module：

imports: [    YouTubePlayerModule ]

html：

<youtube-player videoId={{videoId}} [width]=300 [height]=150 
            [startSeconds]=9
            (apiChange)="OnApiChange($event)"
            (stateChange)="videoStateChange($event)"
            (ready)="videoReady($event)"></youtube-player>

然后输入打字稿：

videoStateChange( e ) {
       console.log( "videoStateChange: ", e
    if( e.data == 5 ) {
      console.log( "VIDEO STATE == 5")
        e.target.playVideo();
    }
}

检查console.log以查看所有其他可用功能，例如pauseVideo等。>