使用 Youtube iFrame API 强制同时播放两个视频？

Question

我正在创建一个应用程序，它基本上可以并排比较两个 Youtube 视频（当然是静音）。

我在 html/javascript 方面更胜一筹，所以我使用 Phonegap Build 将这些东西放在一起。感谢 iOS 10.3，我现在可以内联播放两个 html5 视频元素，这是一个很好的开始（请参阅 http://codepen.io/hay/pen/xERaVB）。

现在的挑战是用 Youtube iframe 替换 html5 视频标签，并同时在两个视频上保留相同的内联、自动播放行为。

我当前的代码：

//Load the IFrame Player API code asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytPlayerVars = {
			'autoplay': 1,
			'controls': 0,
			'rel': 0,
			'modestbranding': 1,
			'showinfo': 0,
			'loop': 1
		};

function onYouTubeIframeAPIReady() {
  createIframes('div_one','div_two');
}

function createIframes(divElementOne, divElementTwo){
  var iframeOne = new YT.Player(divElementOne, { // Replace div_one with an iframe
		height: '200',
		width: '200',
		videoId: 'uENITui5_jU',
		playerVars: ytPlayerVars,
		events: {
			'onReady': onIframeReady
		}
	});
  var iframeTwo = new YT.Player(divElementTwo, { // Replace div_two with an iframe
		height: '200',
		width: '200',
		videoId: 'NmS6h_fkPgk',
		playerVars: ytPlayerVars,
		events: {
			'onReady': onIframeReady
		}
	});
}

function onIframeReady(event){
  event.target.playVideo();
}

div{
  width:200px;
  height:200px;
  float:left;
  margin:0;
}

<div id="div_one" class="embed-responsive-item"></div>
<br />
<div id="div_two" class="embed-responsive-item"></div>

在 Chrome 和 Safari 上测试并运行良好，但一旦我使用 PhoneGap 构建它并在 iOS 上尝试它就不行了。

任何帮助都非常感谢:)

Answer 1

WARD -> PLZ，当你得到答案时回答这个评论。

如果您不能多次调用 API，您可以尝试使用 iframe 并对其进行自定义。