是否有一种方法使用更少的代码使用Youtube API

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

本文关键字：代码 API Youtube 方法 一种 是否      更新时间：2023-09-26

我做了一些测试，找到一种方法来播放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多个嵌入视频的页面，按照我编码的方式，我必须为每个视频编码相同的代码，这将需要一行又一行。因为我想了很多，找不到更简单的方法。有人能给我点化一下这个情况吗?有人能找到更好的方法吗?

谢谢

为所有玩家调用相同的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具有.video类。

你不需要每个iframe都有一个id，但我把它们留在那里，以防你在其他地方使用它们

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对象中有更多关于玩家的信息，你甚至可能不需要像我这样从工厂创建处理程序。

相关文章：