Question

我做了一些测试，找到了一种从youtube播放嵌入视频的方法，它会阻止其他正在播放的页面的视频。我达到了以下代码：

<!DOCTYPE html>
<html>
<head>

  <title>Youtube players test</title>

  <style type="text/css" >

  li {
    list-style: none;
    margin-bottom: 10px;
    }

  </style>

    <script type="text/javascript" src="jquery-2.1.3.min.js"></script>

</head>

<body>

  <ul id="videos">

  <li>Video1</li>

        <iframe id="player1" class="video" type="text/html" width="400" height="225" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0" allowfullscreen></iframe>

  <li>Video2</li>

    <iframe id="player2" class="video" width="400" height="225" src="https://www.youtube.com/embed/3TAUnYZpMbA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

  <li>Video3</li>

    <iframe id="player3" class="video" width="400" height="225" src="https://www.youtube.com/embed/9U38GB2qVWA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

 </div>

    <script type="text/javascript">

    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var primteste = document.getElementsByTagName('script')[0];
    primteste.parentNode.insertBefore(tag, primteste);

    var players = new Array(); 
    function onYouTubeIframeAPIReady() {
        players[0] = new YT.Player('player1', {
            events: {
                'onStateChange': onPlayer1StateChange
            }
        });

        players[1] = new YT.Player('player2', {
            events: {
                'onStateChange': onPlayer2StateChange
                }
            });

      players[2] = new YT.Player('player3', {
        events: {
          'onStateChange': onPlayer3StateChange
        }
      });

        }

      function onPlayer1StateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
          var x = 0;
          for (i=0;i<3;i++) {
          if (i == x) {
            i++;
          }
          players[i].stopVideo();
        }
       }
      }

      function onPlayer2StateChange(event) {
          if (event.data == YT.PlayerState.PLAYING) {
          var x = 1;
          for (i=0;i<3;i++) {
          if (i == x) {
            i++;
          }
          players[i].stopVideo();
        }
       }
      }

      function onPlayer3StateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
          var x = 2;
          for (i=0;i<3;i++) {
          if (i == x) {
            i++;
          }
          players[i].stopVideo();
        }
       }

      }

    </script>

</body>

</html>

上面的代码满足了我最初播放/停止视频的意图，这就是我的问题。我只用了三个视频而且三个不太好，但我有一个页面有超过20个嵌入视频和我编码的方式我必须为每个视频编码相同的它需要线条和线条。因为我想了很多，我无法找到一种更简单的方法。有人能给我一个关于这种情况的消息吗？是否有人看到了更好的方法来做同样的事情？

由于

Answer 1

BufferStrategy

如果您在function _getOnPlayerChangeHandler(playerIndex) { return function (event) { if (event.data === YT.PlayerState.PLAYING) { var i; for (i = 0; i < players.length; i++) { if (i !== playerIndex) { players[i].stopVideo(); } } } }; } function _createPlayer (selector, playerIndex) { return new YT.Player(selector, { onStateChange: _getOnPlayerChangeHandler(playerIndex) }); } players[0] = _createPlayer('player1', 0); players[1] = _createPlayer('player2', 1); players[2] = _createPlayer('player3', 2);对象中有关于该播放器的更多信息，您甚至可能不必像我所做的那样从工厂创建处理程序。

Answer 2

为所有玩家调用相同的onPlayerStateChange回调并停止除当前玩家之外的所有玩家。要检查这是否是当前播放器，请使用event.target != players[i]。

这是你的例子，有一些调整。

<!DOCTYPE html>
<html>
<head>
    <title>Youtube players test</title>
    <style type="text/css">
        li {
            list-style: none;
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
</head>

<body>

    <ul id="videos">
        <li>
            <h4>Video 1</h4>
            <iframe id="player1" class="video" width="400" height="225" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
        </li>

        <li>
            <h4>Video 2</h4>
            <iframe id="player2" class="video" width="400" height="225" src="https://www.youtube.com/embed/3TAUnYZpMbA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
        </li>

        <li>
            <h4>Video 3</h4>
            <iframe id="player3" class="video" width="400" height="225" src="https://www.youtube.com/embed/9U38GB2qVWA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
        </li>
    </ul>

    <script type="text/javascript">

        // Insert youtube API
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var primteste = document.getElementsByTagName('script')[0];
        primteste.parentNode.insertBefore(tag, primteste);

        var players = [];

        function onYouTubeIframeAPIReady() {
            // Populate 'players' with all the youtube iframes
            var videoIframes = document.getElementsByClassName('video');
            for(var i=0; i<videoIframes.length; i++){
                players.push(
                    new YT.Player(videoIframes[i], { // here we can pass an iframe element or an id
                        events: {
                            'onStateChange': onPlayerStateChange
                        }
                    })
                );
            }
        }


        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING) {
                for (i=0; i<players.length; i++) {
                    // Stop all but the current player (the one that triggered the event)
                    if(players[i] != event.target){
                        players[i].stopVideo();
                    }
                }
            }
        }

    </script>

</body>
</html>

只要持有播放器的iframe具有类players，此代码就会自动将新玩家添加到.video数组中。

您不需要为每个iframe设置id，但我将它们留在那里以防您在其他地方使用它们。

有没有办法使用更少的代码使用Youtube API？

2 个答案: