我在使用YouTube IFrame API将播放列表排队时遇到问题。(https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions)
我正在用flash显示youtube视频。使用HTML5显示了另一个问题，即视频播放调用在视频加载之前被调用多次。
加载播放列表时，视频本身不会加载。它显示在网络选项卡中作为对视频播放的调用，它一直处于"挂起"状态，直到7.5分钟后超时，然后它再次尝试，一切正常。顺便说一句，播放列表已经成功加载了——在youtube iframe上鼠标可以显示加载的播放列表。
复制这一点的代码如下，问题是在以下步骤中发现的：1.单击某个频道2.如果信道加载，转到1，否则检查网络选项卡。
我知道复制的方法是人为的，但我"有时"会看到这种情况第一次加载时。
播放频道没有错——这在许多不同的频道中都可以看到。
这是我的密码吗？附近有工作吗？有解决办法吗？
使用Chrome 28、Firefox 22.0和IE 10 在Windows 7 32位上进行测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>
Youtube Test
</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
var collection = [];
var player = null;
var playlistEnqueued = false;
function clear() {
// Removes the iframe.
if (player !== null) {
player.destroy();
}
collection = [];
playlistEnqueued = false;
player = null;
}
function createYT(videoId) {
// Clear anything that's up currently
clear();
// Yes, this could be $.ajax, however this way reduces the dependency on jQuery
// further for the purposes of this test.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
parseJSONResponse(JSON.parse(xmlhttp.responseText));
}
}
xmlhttp.open("GET", "https://gdata.youtube.com/feeds/users/" + videoId + "/uploads?alt=json", true);
xmlhttp.send();
}
function parseJSONResponse(data) {
var feed = data.feed;
$.each(feed.entry, function(index, entry, list) {
collection.push(entry.id.$t.match('[^/]*$')[0]);
});
playVideo();
}
function playVideo(videoId) {
try {
if (videoId === undefined || videoId === null) {
videoId = collection[0];
}
if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
window.onYouTubeIframeAPIReady = function() {
playVideo(videoId);
};
$.getScript('//www.youtube.com/iframe_api');
} else {
if (playlistEnqueued === true) {
player.playVideoAt(0);
} else {
player = new YT.Player('video', {
events: {
'onReady':function(event) {
try {
player.cuePlaylist(collection);
} catch (e) {
console.error(e);
}
},
'onError':function(error) {
console.error(error);
}
},
videoId: videoId,
width: 425,
height: 356,
playerVars: {
autoplay: 1,
}
});
// Attaching event listener after object creation due to
// http://stackoverflow.com/questions/17078094/youtube-iframe-player-api-onstatechange-not-firing
player.addEventListener('onStateChange', function(state) {
try {
stateChanged(state);
} catch (e) {
console.error(e);
}
});
}
}
} catch (e) {
console.error(e);
}
}
function stateChanged(state) {
// This state will be called on enqueueing a playlist
if (state.data == 5) {
playlistEnqueued = true;
playVideo();
}
}
$(document).on('ready', function() {
var player = $(document).find("#player");
$("a").on('click', function() {
var channel = $(this).attr('data-channel');
createYT(channel);
return false;
});
});
</script>
</head>
<body>
<div class='test'>
<div id='video'>
</div>
<a href='#' data-channel='mit'>MIT</a>
<a href='#' data-channel='tedtalksdirector'>TED</a>
<a href='#' data-channel='minutephysics'>Minute Physics</a>
</div>
</body>
</html>
使用flash时，在等待视频连接超时并重试时，网络选项卡中会显示以下内容。正如您所看到的，它处于"挂起"状态，失败，7.5分钟后重试。
视频开始播放后的Chrome网络选项卡：视频播放上的Chrome网络选项卡
当我获得超过10的声誉时，会有更多的图片。。。
我已经在jsFiddle上安装并运行了它(http://jsfiddle.net/3Bm2V/5/)而且它似乎工作正常。我确实不得不更改
$(document).on('ready', function () {
至
$(function() {
为了让它在jsFiddle中工作，请尝试上面的链接，看看它现在是否适合你？