Загрузите два видео YouTube с помощью YouTubeIframeAPIReady ()

Question

Я загружаю видео YT с JS в div JS:

function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
width: 600,
height: 400,
videoId: 'pDMwa1NYceY',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
events: {
onReady: initialize
}
});
}

HTML:

<div id="video1"></div>

Это работает, но теперь я хочу загрузить другое видео во второй DIV на той же странице

HTML:

<div id="video1"></div>
<div id="video2"></div>

JS:

function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
width: 600,
height: 400,
videoId: 'XFmRL-Vuwtc',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
player = new YT.Player('video2', {
width: 600,
height: 400,
videoId: 'fQsHVCDn-bs',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
events: {
onReady: initialize
}
});
}

Как мне заставить это работать?

Почему я это делаю? Я хочу одновременно управлять двумя видео на YouTube с помощью JS.

Answer 1

Во-первых, у вас должна быть отдельная переменная для каждого из фреймов, которые вы собираетесь применить. Это означает, что если вы хотите иметь два фрейма YouTube, вам нужно добавить две переменные.

В следующем примере показаны два фрейма YouTube (каждый с разными видео) и две кнопки: «возобновить» и «приостановить».

Вам придется проверить в своей собственной среде, потому что кажется фрагмент кода не позволяет загрузить API iframe YouTube, и я не смог пока сделайте полностью функциональный jsfiddle , но этот код дать вам подсказку о том, как я управляю «контролем» двух YouTube загруженные фреймы:

/*
	Sources:
	https://developers.google.com/youtube/iframe_api_reference?hl=es-419
	https://stackoverflow.com/a/17843719/4092887
	https://stackoverflow.com/a/11284045/4092887
	https://stackoverflow.com/a/17857716/4092887
*/

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Variables of the divs (where the YouTube iframe will load):
var player;
var multip;

function onYouTubeIframeAPIReady() {

  // Div player:
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady
    }
  });

  // Div "multip":
  multip = new YT.Player('multip', {
    height: '360',
    width: '640',
    videoId: '7gwO8-oqwFw',
    events: {
      'onReady': onPlayerReady2
    }
  });

  // Add onclick events to HTML anchor controls for play and 
  // pause the videos.
  document.getElementById('resume').onclick = function() {
    play_video();
  };
  document.getElementById('pause').onclick = function() {
    pause_video();
  };
}

// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

// Div "multip" - The API will call this function when the video player is ready.
function onPlayerReady2(event) {
  event.target.playVideo();
}

// Function for play all the loaded iframes: those div are: ("player" and "multip").
function play_video() {
  player.playVideo();
  multip.playVideo();
}


// Function for pause all the loaded iframes: those div are: ("player" and "multip").
function pause_video() {
  player.pauseVideo();
  multip.pauseVideo();
}

// Function for reset (start at 0:00) all the loaded iframes: those div are: ("player" and "multip").
function reset_video() {
  player.stopVideo();
  multip.stopVideo();
}

<script src="https://www.youtube.com/iframe_api"></script>
<!-- These divs will contain the iframe YouTube player: -->
<div id="player"></div>
<div id="multip"></div>

<a href="#" id="pause">Pause</a>
<a href="#" id="resume">Resume</a>