与YouTube API嵌入多个iFrame

我的编码知识主要是自学成才的。

我有一个论坛，我已经设置了该论坛，可以用视频的iFrame嵌入帖子中替换YouTube URL。它的一个独特方面是，即使播放器小于YouTube的建议，它也强迫嵌入式以720p质量（如果有）播放。"为什么"是一个长篇小说，但我想一直这样做。我正在尝试与新API一起使用同样的东西。

在下面的示例代码中，我可以在页面上使用一个视频，但在同一页面上却不是两者。我想这与重复的功能或沿这些行有关。

<html><body>
<script>
	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 xyzplayer;
	function onYouTubeIframeAPIReady() {
	xyzplayer = new YT.Player('xyzplayer', {
		events: {
			'onStateChange': onPlayerStateChange
			}
		});
	}
	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	event.target.setPlaybackQuality('hd720');
		}
	}
    </script>
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe>
<br><br><br>
<script>
	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 abcplayer;
	function onYouTubeIframeAPIReady() {
	abcplayer = new YT.Player('abcplayer', {
		events: {
			'onStateChange': onPlayerStateChange
			}
		});
	}
	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	event.target.setPlaybackQuality('hd720');
		}
	}
    </script>
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe>
</body></html>

因为您的代码正在加载库两次，因此第二个负载覆盖了您在第一个中定义的函数，因此，从第一个负载将永远无法处理。尝试将播放器创建组合到单个方法中...类似的方法（以便两个嵌入的玩家都会听取事件的聆听）：

<html><body>
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe>
<br/><br/><br/>
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe>
<script>
	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 abcplayer,xyzplayer;
	function onYouTubeIframeAPIReady() {
	  abcplayer = new YT.Player('abcplayer', {
		events: {
		  'onStateChange': onPlayerStateChange
		}
	  });    
	  xyzplayer = new YT.Player('xyzplayer', {
		events: {
			'onStateChange': onPlayerStateChange
		}
	  });
	}
	function onPlayerStateChange(event) {
	  if (event.data == YT.PlayerState.PLAYING) {
	    event.target.setPlaybackQuality('hd720');
	  }
	}
    </script>
</body></html>

相关内容

最新更新

热门标签：