我在网页上嵌入了多个YouTube iFrame.如果其中一部电影已经播放,然后用户决定开始播放另一部电影,是否可以停止播放第一部电影,这样一次只播放一部电影？
我查看过’iframe嵌入的YouTube播放器API参考’https://developers.google.com/youtube/iframe_api_reference,但如果我说实话,我就是不明白.我的开发人员技能非常有限……很明显.
可怜的我知道,但这就是我现在所拥有的(只是iFrames)…… http://jsfiddle.net/YGMUJ/
- <iframe width="520" height="293" src="http://www.youtube.com/v/zXV8GMSc5Vg?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
- <iframe width="520" height="293" src="http://www.youtube.com/v/LTy0TzA_4DQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
我认为我需要做的就是在视频网址的末尾添加’& enablejsapi = 1′.
任何帮助将非常感激.
先感谢您.
解决方法
您实际上想要使用iFrame Player API,而不是使用iframe.根据您实际想要嵌入的视频数量,您可能希望使这个javascript更具动态性,但是这个工作示例应该足以让您开始使用.
基本上我在这里做的是初始化两个玩家,并在玩家状态改变播放时暂停相反的视频.
您可以在http://jsfiddle.net/mattkoskela/Whxjx/播放以下代码
- <script>
- var tag = document.createElement('script');
- tag.src = "//www.youtube.com/iframe_api";
- var firstScriptTag = document.getElementsByTagName('script')[0];
- firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
- var player;
- function onYouTubeIframeAPIReady() {
- player1 = new YT.Player('player1',{
- height: '293',width: '520',videoId: 'zXV8GMSc5Vg',events: {
- 'onStateChange': onPlayerStateChange
- }
- });
- player2 = new YT.Player('player2',videoId: 'LTy0TzA_4DQ',events: {
- 'onStateChange': onPlayerStateChange
- }
- });
- }
- function onPlayerStateChange(event) {
- if (event.data == YT.PlayerState.PLAYING) {
- stopVideo(event.target.a.id);
- }
- }
- function stopVideo(player_id) {
- if (player_id == "player1") {
- player2.stopVideo();
- } else if (player_id == "player2") {
- player1.stopVideo();
- }
- }
