Youtube 嵌入 - 播放视频 2 时暂停视频 1答案

【问题标题】：Youtube embed - pause video 1 when video 2 is playedYoutube 嵌入 - 播放视频 2 时暂停视频 1
【发布时间】：2014-08-02 23:29:07
【问题描述】：

我正在尝试通过 Youtube API 找到一种方法来在播放另一个视频时暂停一个视频，我在同一页面上有多个 Youtube 嵌入。有没有我完全错过的简单代码？

      <div id="video_youtube" style="min-height:600px; margin-top:1%;">
        <iframe id='player1' style="margin-right:2%; padding-bottom:1%;" width="500px" height="281px" src="http://www.youtube.com/embed/rZye11nxOOQ" frameborder="0" allowfullscreen>
          </iframe>
        <iframe id='player2' style="padding-bottom:1%;" width="500px" height="281px" src="http://www.youtube.com/embed/8Q89hEnkYH4" frameborder="0" allowfullscreen>
          </iframe>
     </div>

我找到了一个代码，它允许您对两个视频执行相同的操作，但我认为如果我必须添加更多视频，这段代码太手动了，会变得更长更复杂。

 <div id="player1"></div>
 <div id="player2"></div>
 <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', {
        height: '293',
        width: '520',
        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();
    }
}
</script>

【问题讨论】：

标签： video youtube youtube-api embed

【解决方案1】：

如果您创建了一个包含所有玩家对象的对象，并确保引用每个玩家的属性名称与该玩家的 ID 相匹配，该怎么办？然后你的 stop 方法可以做一个简单的 javascript for ... in ... 循环（循环通过属性名称而不是值）：

 <div id="player1"></div>
 <div id="player2"></div>
 <!-- add as many as you need -->
 <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() {
    player.player1 = new YT.Player('player1', {
        height: '293',
        width: '520',
        videoId: 'zXV8GMSc5Vg',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    player.player2 = new YT.Player('player2', {
        height: '293',
        width: '520',
        videoId: 'LTy0TzA_4DQ',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    // add more here, ensuring that in player.[whatever] the 'whatever' is the same as the ID. You could very easily script this process as well so you don't repeat yourself.
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        stopVideos(event.target.a.id);
    }
}

function stopVideos(player_id) {
    for (p in player) {
        if (p!==player_id) {
          player[p].stopVideo(); // all videos will stop playing except the one that triggered the event
        }
    }
}
</script>

【讨论】：