我试图将此代码放入模块函数中:
$(document).ready(function()
{
VIDEO.onYouTubeIframeAPIReady();
}
var VIDEO = (function (my, $){
var tag = document.createElement('script');
var onPlayerStateChange;
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
my.onYouTubeIframeAPIReady =function() {
player = new YT.Player('player', {
height: '490',
width: '880',
videoId: SONG.getArtistId(),
playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': catchError
}
});
}
function onPlayerReady(event) {
if(typeof(SONG.getArtistId()) == undefined)
{
console.log("undefineeeed");
}
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
done = true;
}
if(event.data == YT.PlayerState.ENDED)
{
location.reload();
}
}
function catchError(event)
{
if(event.data == 100) console.log("De video bestaat niet meer");
}
function stopVideo() {
player.stopVideo();
}
return my;
}(VIDEO || {}, jQuery));
问题是:即使它是自动执行的,也没有任何反应,并且 iFrame 也没有显示。 我正在尝试这样做,因为这是作业的一部分。我们必须以模块的形式工作。
最佳答案
您需要简化代码:
HTML
<div id="player"></div>
Javascript
$(document).ready( function() {
console.log( "ready!" );
loadPlayer();
});
function getArtistId() {
return 'l-gQLqv9f4o';
}
function loadPlayer() {
if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubePlayerAPIReady = function() {
onYouTubePlayer();
};
} else {
onYouTubePlayer();
}
}
var player;
function onYouTubePlayer() {
player = new YT.Player('player', {
height: '490',
width: '880',
videoId: getArtistId(),
playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
events: {
'onStateChange': onPlayerStateChange,
'onError': catchError
}
});
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
done = true;
} else if (event.data == YT.PlayerState.ENDED) {
location.reload();
}
}
function onPlayerReady(event) {
//if(typeof(SONG.getArtistId()) == undefined)
//{
// console.log("undefineeeed");
//}
//event.target.playVideo();
}
function catchError(event)
{
if(event.data == 100) console.log("De video bestaat niet meer");
}
function stopVideo() {
player.stopVideo();
}
还有一个实例: http://jsbin.com/maweqahuhi/1/ http://jsbin.com/nipogicide/2/
编辑
关于您的评论,我对代码做了一些更改。
您稍后需要使用 onYouTubePlayerAPIReady()
调用播放器。我编辑了之前的所有代码。
关于javascript - YouTube iFrame API 'YT is undefined',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28149815/