I'm trying to create a youtube-playback initiated with javascript.
I initiate a youtubeplayer like this:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '720',
width: '1280',
html5: 0,
videoId: 'i8IXMGHpGBk',
playerVars: {'modestbranding': 1, 'controls': 1,'showinfo': 0 },
events: {
'onStateChange': function(e) {
if (e.data === 0) {
//skrolla här
}
}
}
});
}
Afterwards, I have a function to start the player, like this:
function playvideo(){ player.playVideo(); }
the player object should have this method according to the docs.
For some reason, I get the error
TypeError: Object #<S> has no method 'playVideo'
at Object.Video.$scope.play (file://localhost/Users/kristoffer.nolgren/web/blossa2013dev/js/main.js:7:10)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:74:98
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:156:140
at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:92:272)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:92:379)
at HTMLDivElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:156:122)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:24:49
at Array.forEach (native)
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:6:470)
at HTMLDivElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:24:20)
I assume angular is interfering with the youtube api, but I don't understan how.
here is the first level of the player-object:
Y {b: nb, a: iframe#player, i: div#player, id: 1, d: 2…}
a: iframe#player
b: nb
closure_uid_954797855: 1
d: 3
g: O
h: Object
i: div#player
id: 1
k: Object
o: "player"
s: Array[1]
t: false
It's because the YouTube API is being accessed from the file system
file://
rather thanhttp://
.For anyone else that has this prob: check the ID you're providing to
Actually exists in the document.