angular - 带有div切换播放暂停的ngx-youtube-player Angular 组件

Question

我要使用ngx-youtube-player进行的操作是使div透明，在单击时可以切换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>

然后在 typescript 中:

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

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