我能够在我的Angular 6应用程序中使用Youtube Iframe API(不知何故)。但是,我想从我控制的列表中提供动态videoIds。我的计划是从播放器收听事件,然后在播放完当前视频后加载另一个视频。但我似乎无法解决这个问题。我还在学习Typescript和Angular,我很好奇为什么我从IFrame API播放器中调用的任何函数调用的任何方法都会得到一个Uncaught TypeError:
这是我的代码:
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Video } from '../shared/model/video.model';
import { Subscription } from 'rxjs';
import { VideoPlayerService } from '../shared/services/video-player.service';
@Component({
selector: 'ntv-video-player',
templateUrl: './video-player.component.html',
styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit, AfterViewInit {
player;
video: Video;
videos: Video[];
videoSubscription: Subscription;
constructor(private videoService: VideoPlayerService) { }
ngAfterViewInit() {
const doc = (<any>window).document;
const playerApiScript = doc.createElement('script');
playerApiScript.type = 'text/javascript';
playerApiScript.src = 'https://www.youtube.com/iframe_api';
doc.body.appendChild(playerApiScript);
}
ngOnInit() {
(<any>window).onYouTubeIframeAPIReady = () => {
this.player = new (<any>window).YT.Player('player', {
height: '100%',
width: '100%',
// videoId: this.getVideo(),
events: {
'onReady': this.onPlayerReady,
'onStateChange': this.onPlayerStateChange
},
playerVars: {
autoplay: 1,
controls: 0,
modestbranding: 1,
// playlist: 'UG3sfZKtCQI,ALZHF5UqnU4,x9ZkC3OgI78',
rel: 0,
showInfo: 0
}
});
};
}
// The API calls this function when the player's state changes.
onPlayerStateChange(event) {
console.log('onPlayerStateChange');
console.log(event.data);
}
// The API will call this function when the video player is ready
onPlayerReady(event) {
console.log(event);
const videoId = this.getVideo();
event.target.cueVideoById({
'videoId': videoId
});
event.target.playVideo();
}
getVideo() {
return '60ItHLz5WEA';
}
}
这是我得到的错误:
Uncaught TypeError: Cannot read property 'getVideo' of undefined
at push../src/app/video-player/video-player.component.ts.VideoPlayerComponent.onPlayerReady (video-player.component.ts:63)
at M.h.G (www-widgetapi.js:48)
at Y.h.o (www-widgetapi.js:92)
at Y.h.H (www-widgetapi.js:105)
at Wa.g (www-widgetapi.js:81)
at Oa.f (www-widgetapi.js:70)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
at invokeTask (zone.js:1540)
push../src/app/video-player/video-player.component.ts.VideoPlayerComponent.onPlayerReady @ video-player.component.ts:63
h.G @ www-widgetapi.js:48
h.o @ www-widgetapi.js:92
h.H @ www-widgetapi.js:105
Wa.g @ www-widgetapi.js:81
Oa.f @ www-widgetapi.js:70
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback
如果我从'videoId'属性调用它,this.getVideo()似乎工作,但我希望能够将它调用onPlayerReady或onPlayerStateChange,这样我就可以使它更具动态性。以前有人这样做过吗? Angular没有很多文档。
提前致谢。
我认为您的体验是范围问题,您的OnPlayerReady函数不是在您的类的范围内执行,而是在youtube播放器的范围内执行。我从错误消息“无法读取未定义的属性'getVideo'中推断出这一点”。在这个执行点上,“这个”不是它看起来的样子。
尝试更改您的事件分配代码,如下所示:
events: {
'onReady': (event) => { this.onPlayerReady(event); },
'onStateChange': (event) => { this.onPlayerStateChange(event); }
},
谢谢乔尔!这有助于我解决这个问题。我一开始遇到错误,因为我没有传递参数。所以我这样做了,它有效!
events: { 'onReady': (event) => { this.onPlayerReady(event); },
'onStateChange': (event) => { this.onPlayerStateChange(event); }
},
我想我很难理解API的文档并尝试将其翻译成Typescript。我只是希望他们在那里添加更多文档。也做像这样的(<any>window).onYouTubeIframeAPIReady = () => {
只是觉得有点hacky对我来说。有没有更好的方法呢?
抱歉,由于我还没有足够的重复点,我无法回答你的回答。