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

【问题标题】：ngx-youtube-player angular component with div toggle play pause带有 div 切换播放暂停的 ngx-youtube-player 角度组件
【发布时间】：2018-09-05 07:45:29
【问题描述】：

我想用 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();
  }

【问题讨论】：

标签： angular youtube components toggle video-player

【解决方案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 等。

【讨论】：