By changing
function onYouTubeIframeAPIReady() {
// ...
}
into
window.onYouTubeIframeAPIReady = function() {
// ...
}
It now works! Found the clue here Youtube iframe api not triggering onYouTubeIframeAPIReady
题
I have a Backbone App where I have a View in which I want to display a youtube player:
so in my View, in afterRender
- I did this:
afterRender: function() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('vid', {
height: '390',
width: '640',
videoId: '',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
}
But its not rendering anything but I also dont get errors and in my console I can see that Youtube API is loaded... So what am I doing wrong here?
Please help..
解决方案 2
By changing
function onYouTubeIframeAPIReady() {
// ...
}
into
window.onYouTubeIframeAPIReady = function() {
// ...
}
It now works! Found the clue here Youtube iframe api not triggering onYouTubeIframeAPIReady
其他提示
See this related question: Youtube iframe api not triggering onYouTubeIframeAPIReady
I think the problem is that your onYouTubeIframeAPIReady
function needs to be declared globally, not nested inside another function. (In your code, it's only defined within the scope of the afterRender
method.)