Мне нужно загрузить более одного видео с помощью API-интерфейса youtube. Это мой первый раз, используя его, поэтому я не уверен, что я делаю неправильно, но это то, что я пытаюсь:
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: 'hdy78ehsjdi'
});
player2 = new YT.Player('player', {
videoId: '81hdjskilct'
});
}
Так как функция onYouTubeIframeAPIReady должна вызываться только один раз, можно использовать следующий подход:
инициализировать и сохранять информацию о видеоплеерах
(ControlId,width,height,VideoId) в массиве
вызов onYouTubeIframeAPIReady для создания всего видео
игроки
var playerInfoList = [{id:'player',height:'390',width:'640',videoId:'M7lc1UVf-VE'},{id:'player1',height:'390',width:'640',videoId:'M7lc1UVf-VE'}];
function onYouTubeIframeAPIReady() {
if(typeof playerInfoList === 'undefined')
return;
for(var i = 0; i < playerInfoList.length;i++) {
var curplayer = createPlayer(playerInfoList[i]);
}
}
function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
height: playerInfo.height,
width: playerInfo.width,
videoId: playerInfo.videoId
});
}
Первым параметром нового YT.Player должен быть идентификатор элемента HTML (например, DIV), который должен быть заменен iframe на видео. Когда вы используете "плеер" для обоих этих объектов, вы загружаете оба в один и тот же элемент.
<div id="ytplayer1"></div>
<div id="ytplayer2"></div>
<script>
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer1', {
height: '390',
width: '640',
videoId: 'hdy78ehsjdi'
});
player2 = new YT.Player('ytplayer2', {
height: '390',
width: '640',
videoId: '81hdjskilct'
});
}
</script>
Параметры функций описаны в документации API Youtube:
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player (EDIT: изменено на правильную ссылку)
Мне нужно было то же самое в React. Развернувшись на Вадиме, вы можете сделать что-то вроде следующего и добавить их к объекту, а затем создать игрока, если не знаете, как будет выглядеть массив игроков.
const YoutubeAPILoader = {
_queue: [],
_isLoaded: false,
load: function (component) {
// if the API is loaded just create the player
if (this._isLoaded) {
component._createPlayer()
} else {
this._queue.push(component)
// load the Youtube API if this was the first component added
if (this._queue.length === 1) {
this._loadAPI()
}
}
},
_loadAPI: function () {
// load the api however you like
loadAPI('//youtube.com/player_api')
window.onYouTubeIframeAPIReady = () => {
this._isLoaded = true
for (let i = this._queue.length; i--;) {
this._queue[i]._createPlayer()
}
this._queue = []
}
}
}
У меня была более широкая проблема, которая сводилась к этой же проблеме. Требования, которые у меня были, заключались в том, чтобы написать класс JS для управления одним или несколькими (количество может варьироваться от 1 до бесконечности). Бэкэнд-системой является ExpressionEngine (но это не имеет значения здесь). Основная цель состояла в том, чтобы создать платформу для аналитики, которая подталкивает отдельные данные к нашей платформе Adobe Analytics. Здесь показана только часть, которая дает игровой счет, его можно значительно расширить отсюда.
CMS позволяет редакторам создавать модули на странице с изображением видео. Одно видео на модуль. Каждый модуль в основном представляет собой раздел HTML, организованный через Bootstrap 3 (не относится к этому вопросу).
Соответствующий HTML выглядит следующим образом:
<div id="js_youTubeContainer_{innov_mod_ytplayer:id}" class="embed-responsive embed-responsive-16by9">
<div id="js_youTubeFrame_{innov_mod_ytplayer:id}" class="embed-responsive-item"></div>
</div>