Question

我的编码知识大多是自学和限制的。

我有一个论坛，我已设置用iframe嵌入视频替换帖子中的youtube网址。它的一个独特之处在于它强制嵌入式以720p质量（如果可用）发挥，即使播放器小于youtube推荐。＆＃34;为什么＆＃34;这是一个很长的故事，但我想继续这样做。我尝试使用新API进行同样的操作。

在下面的示例代码中，我可以将其用于页面上的一个视频，但不能同时在同一页面上。我想它与复制函数或其他东西有关。

＆＃13;

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

＆＃13;

Answer 1

因为您的代码正在加载库两次，所以第二次加载会覆盖您在第一次加载时定义的函数，因此第一次加载的函数将永远不会被处理。尝试将玩家创建组合成一个单一的方法......这样的事情（这样两个嵌入的玩家都可以听到他们的事件）：

＆＃13;

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

＆＃13;

使用youtube api嵌入多个iframe

1 个答案: