У меня проблема со следующим кодом, но я не уверен, где проблема.
На моей главной странице, в javascript, у меня есть массив, определяемый для хранения списка объектов YouTubePlayer
, которые я создаю. Я также загружаю API YouTube.
У меня также есть (иногда несколько) пользовательский элемент YouTube, содержащий div YouTube в модуле bootstrap. Он также содержит JavaScript для нажатия нового объекта YouTubePlayer
на массив на главной странице js. Наконец, в пользовательском элементе управления я определяю методы автоматического запуска и остановки видео в "показанных" и "скрытых" событиях модальности bootstrap.
Наконец, чтобы (надеюсь) решить условие гонки между загружаемым документом и загружаемым API YouTube, я установил две переменные bool (один для документа, один для API) и проверил оба значения true перед вызовом функции initVideos который выполняет итерацию через массив объектов YouTubePlayer
и инициализирует их, устанавливая объект YT.Player
в окне. Я думаю, что часть проблемы состоит в том, что я не могу статически устанавливать window.player1
и т.д., Потому что я никогда не знаю, сколько пользовательских элементов YouTube будет загружено.
Проблема заключается в том, что каждый раз, когда запускаются модальные события bootstrap, объект YT.Player
, который я извлекаю из окна, не содержит методов для playVideo()
и pauseVideo()
.
На моей главной странице:
$(document).ready(function () {
window.docReady = true;
if (window.apiReady)
initVideos();
});
function onYouTubeIframeAPIReady() {
window.apiReady = true;
if (window.docReady)
initVideos();
initVideos();
}
function initVideos() {
if (typeof ytPlayerList === 'undefined')
return;
for (var i = 0; i < ytPlayerList.length; i++) {
var player = ytPlayerList[i];
var pl = new YT.Player(player.DivId, {
playerVars: {
'autoplay': '0',
'controls': '1',
'autohide': '2',
'modestbranding': '1',
'playsinline': '1',
'rel': '0',
'wmode': 'opaque'
},
videoId: player.VideoId,
events: {
'onStateChange': player.StateChangeHandler
}
});
window[player.Id] = pl;
}
}
И в элементе управления пользователя:
window.ytPlayerList.push({
Id: "<%=ClientID%>player",
DivId: "<%=ClientID%>player",
VideoId: "<%=VideoId%>",
StateChangeHandler: hide<%=ClientID%>Player
});
function hide<%=ClientID %>Player(state) {
if (state.data == '0') {
hide<%=ClientID %>Video();
}
}
function show<%=ClientID %>Video() {
$('#<%=ClientID %>video-modal').modal('show');
}
function hide<%=ClientID %>Video() {
$('#<%=ClientID %>video-modal').modal('hide');
}
$(document).ready(function() {
$("#<%=ClientID%>Video").click(function() {
show<%=ClientID%>Video();
});
$("#<%=ClientID %>video-modal").on('shown', function () {
window["<%=ClientID%>player"].playVideo();
});
$("#<%=ClientID %>video-modal").on('hide', function () {
window["<%=ClientID%>player"].pauseVideo();
});
});
Это может быть недостаток опыта js, но я абсолютно застрял. Любая помощь будет принята с благодарностью. Кроме того, для справки, я получаю исключение
Uncaught TypeError: window.ctl100_phContent_ctl100player.playVideo is not a function