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

【问题标题】：Is there a way to use the Youtube API using less code?有没有办法使用更少的代码来使用 Youtube API？
【发布时间】：2016-01-04 00:57:38
【问题描述】：

我做了一些测试，以找到一种方法来播放来自 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 多个嵌入视频的页面，并且按照我的编码方式，我必须为每个视频编写相同的代码和线条。因为我想了很多，我想不出一个更简单的方法来做到这一点。有人可以告诉我这种情况吗？有没有人认为更好的方法可以做到这一点？

谢谢

【问题讨论】：

你只是在使用 javascrit？，没有像 php 这样的服务器端？
请参阅：循环（用于将操作添加到 n 个项目）、DOM 操作（用于添加元素，尽管 iframe 很可能应该被重用）。已经添加的 JQuery 对两者都有帮助。
@Shocklo 为什么他需要为此使用 PHP？
@Vinay 只是要求让事情变得简单，可以用 javascript 完成，但我认为如果他使用像 php 这样的服务器端，那就更容易了。
我能看到 PHP 帮助的唯一方法是多个客户端之间需要发生协调逻辑。看起来这个脚本完全是客户端逻辑，所以 javascript 似乎最适合。如果播放了其他视频，则此处的 javascript 会尝试在屏幕上停止另一个视频。不确定 PHP 将如何帮助那里或使事情变得更容易。

标签： javascript iframe video youtube youtube-api

【解决方案1】：

为所有玩家调用相同的 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 具有 .video 类，此代码就会自动将新播放器添加到 players 数组。

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

【讨论】：

非常感谢，伙计。这是我试图找到的东西，但我无法仅使用一个 yt.player 以功能方式对其进行编码。而 iframe 的 id 将真正用于另一部分。

【解决方案2】：

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 对象中有更多关于播放器的信息，您甚至可能不必像我创建的那样从工厂创建处理程序。

【讨论】：

谢谢老哥的回答。
没问题！正如我所说，如果event 对象中有更多关于播放器的信息，您可以摆脱工厂/索引。 :-)