有没有一种方法可以使用更少的代码来使用 Youtube API？

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>

上面的代码满足了我对play/stop视频的初衷，我的问题来了。我只用了三个视频，三个视频不太好，但我有一个页面有超过 20 个嵌入视频，按照我的编码方式，我必须为每个视频编写相同的代码，它需要几行和线条。因为我想了很多，我想不出更简单的方法来做。有人可以告诉我这种情况吗？有没有人看到更好的方法来做同样的事情？

谢谢

Answer 1

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

如果您在 event 对象中有更多关于玩家的信息，您甚至可能不必像我创建的那样从工厂创建处理程序。

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>

此代码会自动将新玩家添加到 players 数组，只要包含玩家的 iframe 具有 class .video.

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

有没有一种方法可以使用更少的代码来使用 Youtube API？

Is there a way to use the Youtube API using less code?

javascript

youtube

video

iframe

youtube-api