我要使用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();
}
最佳答案
如果您考虑使用新的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等。
关于angular - 带有div切换播放暂停的ngx-youtube-player Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52179754/