我正在使用JS,Angular和Meteor开发一个使用Youtube api的网络应用程序。在我的一个控制器的构造函数中,我按照youtube api进程创建了youtube播放器对象。但是,当我试图引用看似全球化的玩家时,#34;对象在同一控制器内的后续函数中,似乎超出了范围。
我正在努力解决这个问题好几天,因为"播放器"变量似乎是全局的(没有var继续它),直到我遇到使用window.variableName的做法不满意。如果我使用window.player =,我只能获得playPause函数来识别播放器对象...有没有人知道为什么播放器对象不是已经包含控制器和函数的全局?
我仍在学习javascript范围错综复杂以及ECMA课程风格,所以任何帮助都会受到赞赏。
我的代码:
import Ionic from 'ionic-scripts';
import { _ } from 'meteor/underscore';
import { Meteor } from 'meteor/meteor';
import { MeteorCameraUI } from 'meteor/okland:camera-ui';
import { Controller } from 'angular-ecmascript/module-helpers';
import { Chats, Messages } from '../../../lib/collections';
export default class ChatCtrl extends Controller {
constructor() {
super(...arguments);
this.currentVideoId = this.$stateParams.videoId;
this.chatId = this.$stateParams.chatId;
this.isIOS = Ionic.Platform.isWebView() && Ionic.Platform.isIOS();
this.isCordova = Meteor.isCordova;
chat = Chats.findOne(this.chatId);
if (chat.playerType == "Y") {
window.player = new YT.Player('video-placeholder', {
videoId: this.currentVideoId,
events: {
'onReady': this.initTimes.bind(this)
}
});
} else if (chat.playerType == "V") {
var options = {
id: this.currentVideoId,
width: 640,
loop: false
};
var player = new Vimeo.Player('vimeo-placeholder', options);
}
playPauseToggle() {
if (player.getPlayerState() == 2 || player.getPlayerState() == 5) {
player.playVideo();
this.playPauseValue = "Pause";
} else if (player.getPlayerState() == 1) {
player.pauseVideo();
this.playPauseValue = "Play";
}
}
ChatCtrl.$name = 'ChatCtrl';
ChatCtrl.$inject = ['$stateParams', '$timeout', '$ionicScrollDelegate', '$ionicPopup', '$log'];
答案 0 :(得分:1)
所以问题是您在类构造函数中将播放器定义为局部变量。因此,该变量在其他任何地方都不可见 - 比如在playPauseToggle函数中。
相反,为什么不让你的播放器成为你的类实例的属性?
this.player = new YT.Player('video-placeholder'...
然后
playPauseToggle() {
if (this.player.getPlayerState() == 2 || this.player.getPlayerState() == 5) {
... // replace all occurrences of 'player' with 'this.player'
希望这有帮助!