Question

我创建的应用程序基本上会并排比较两个Youtube视频（当然是静音）。

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

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

我目前的代码：

＆＃13;

//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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

在Chrome和Safari上经过测试并正常运行，但只要我使用PhoneGap构建并在iOS上试用它就不行了。

任何帮助都非常感谢：）

Answer 1

WARD - ＆gt; PLZ，得到答案时回答此评论。

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

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

1 个答案: