使用 onYouTubeIframeAPIReady() 加载两个 YouTube 视频答案

【问题标题】：Load two YouTube videos with onYouTubeIframeAPIReady()使用 onYouTubeIframeAPIReady() 加载两个 YouTube 视频
【发布时间】：2019-01-06 14:34:46
【问题描述】：

我正在将带有 JS 的 YT 视频加载到 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
}
});
}

我该如何进行这项工作？

我为什么要这样做？我想用JS同时控制两个YouTube视频。

【问题讨论】：

您必须修改：1) player 变量应该与您的 video2 不同。 2）不清楚是否要同时播放和暂停所有带有JS的YouTube视频，对于后者，我已经添加了答案。

标签： api youtube

【解决方案1】：

首先，您应该为要应用的每个 iframe 设置不同的变量。这意味着，如果您想要两个 YouTube iframe，则必须添加两个变量。

下一个示例显示了两个 YouTube iframe（每个都有不同的视频）和两个按钮：“恢复”和“暂停”。

您必须在自己的环境中进行测试，因为看起来 code-sn-p 不允许加载 YouTube iframe API，我不能到目前为止制作了一个功能齐全的jsfiddle，但这段代码将给你一个提示，我是如何管理这两个 YouTube 的“控制”的加载的 iframe：

/*
	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>

【讨论】：

【解决方案2】：

这个技巧似乎对我有用。如果您正在制作部分精选视频，这可能会起作用

<div id="DIV ID" class="youtube-videos" data-id="YOUTUBE ID"></div>
<div id="DIV ID2" class="youtube-videos" data-id="YOUTUBE ID2"></div>

var all_IDs = [];
$('div.youtube-videos').each(function(){
   all_IDs.push($(this).data('id')+":"+$(this).attr('id'));
});
    
var player = [],
time_update_interval = 0;
    
function onYouTubeIframeAPIReady() {
        for (i = 0; i < all_IDs.length; ++i) {
           var init_i = all_IDs[i];
           var all_data = init_i.split(':');
           console.log(all_data[1]+" --- "+all_data[0]);
           player[i] = new YT.Player(all_data[1], {
              width: 600,
              height: 400,
              videoId: all_data[0],
              playerVars: {
                  'autoplay': 0,
                  color: 'white',
                  rel: 0,
                  showinfo: 0,
                  ecver: 2
              }
          }); 
        }
      
}

【讨论】：