У меня возникают проблемы с постановкой плейлиста в очередь с помощью API YouTube IFrame. (https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions)
Я использую flash для показа видео на YouTube. Использование HTML5 показывает еще одну проблему, когда вызов видеовоспроизведения вызывается несколько раз перед загрузкой видео.
При загрузке плейлиста само видео не загружается. Он отображается на вкладке сети как вызов воспроизведения видео, который находится в состоянии ожидания, пока не истечет время ожидания через 7,5 минут, после чего он попытается снова, и все работает. Плейлист, кстати, успешно загрузился — при наведении на iframe ютуба показывается загруженный плейлист.
Код для репликации приведен ниже, и проблема обнаруживается после следующих шагов: 1. Щелкните канал. 2. Если канал загружается, перейдите к пункту 1, в противном случае проверьте вкладку сети.
Я знаю, что метод репликации надуман, однако я вижу это «иногда» при первой загрузке.
Воспроизводимый канал не виноват - это было замечено на многих разных каналах.
Это мой код? Есть ли обходной путь? Есть ли исправление?
Протестировано на 32-разрядной версии Windows 7 с использованием Chrome 28, Firefox 22.0 и IE 10.
<!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>
При использовании флэш-памяти и ожидании истечения времени ожидания видеосоединения и повторной попытке на вкладке сети отображается следующее. Как вы можете видеть, он «ожидает», потерпел неудачу, а затем повторил попытку через 7,5 минут.
Вкладка сети Chrome после начала воспроизведения видео: вкладка сети Chrome при воспроизведении видео
Больше изображений, когда я наберу 10 очков репутации...
