javascript - 使用 YouTube API 将 YouTube 播放列表中的所有视频 ID 获取到 PHP 数组中

Question

我正在向我的网站添加自定义播放器，但我遇到了两个问题。

1. 我在 YouTube 上的播放列表有 391 首歌曲，而 API 播放器只能加载 200 首。
2. 我在使用 API 命令打乱列表时遇到问题。

这是我用来调用播放器的代码:

<div class="videoplayer" id="ytplayer"></div>
<script>
    var getRandom = function(min, max) {
      return Math.random() * (max - min) + min;
    };

  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '50',
      width: '400',
      events: {
         'onReady': onPlayerReady
       },
      playerVars:{        
        list:'PLH30k6CwlcgK8C-LET6_ZrAWwYGLqT8R-',
        index:parseInt(0),
        suggestedQuality:'small',
        controls:0,
        autoplay:1
        }
    });
  }

  function onPlayerReady(event) {
     event.target.setShuffle();
     event.target.setLoop();     
   }
</script>

我尝试使用以下方法解决随机播放问题:

function onPlayerReady(event) {
         var num = parseInt(getRandom(1,391));
         event.target.playVideoAt(num);   
       }

但它并没有像我想要的那样工作，所以我想将播放列表中所有视频的 ID 检索到一个数组中，混合它们并传递所有数组以加载每个视频。我试图使用之前问题中的一些示例，但这些示例不再有效，如果你们中的一些人有 YouTube API v3 的示例或实际工作的示例，我将不胜感激。

问候。

Answer 1

首先，你必须使用 iframe API 因为，javascript API 已过时且已弃用

寻找youtube API documentation (左侧菜单中已弃用的 API 列表) https://developers.google.com/youtube/iframe_api_reference?hl=fr

替换

tag.src = "https://www.youtube.com/player_api";
// by 
tag.src = "https://www.youtube.com/iframe_api";

和

function onYouTubePlayerAPIReady()
// by 
function onYouTubeIframeAPIReady()

0 要修复混洗，尝试在每个结束状态随机化

通过使用 onPlayerStateChange 事件监听器和 YT.PlayerState.ENDED 状态。

1 您需要 CUE 播放列表以获取整个视频的 ID

在随机化之前。 并用正确的方法得到它们:getPlaylist()

var player;
var videoList, videoCount;
function onYouTubeIframeAPIReady()
{
    player = new YT.Player('ytplayer',
    {
        height: '50',
        width: '400',
        events:
        {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        },

        playerVars:
        {
            controls:0,
            autoplay:0
        }
    });
}

function onPlayerReady(event)
{
    // cue the playlist, to get the video's ids 
    event.target.cuePlaylist
    ({
        listType: 'playlist',
        list: 'PLH30k6CwlcgK8C-LET6_ZrAWwYGLqT8R-',
        suggestedQuality:'small',
        autoplay: 1,
        index:0,
    });

    event.target.setLoop();
}

function onPlayerStateChange(event)
{
    if(event.data == YT.PlayerState.CUED)
    {
        videoList = event.target.getPlaylist();

        // to prevent adding new video and for the randomize
        videoCount = videoList.length; 

        // get the ids before randomize playlist, send it
        sendIds(videoList);

        // starting the player (like autoplay)
        event.target.playVideo();
    }

    // randomize at each video ending
    if(event.data == YT.PlayerState.ENDED)
    {
        var num = getRandom(1,videoCount);
        event.target.playVideoAt(num);
    }
}

function sendIds(ids)
{
    console.log(ids);
    // make what you want to do with them... ajax call to your php
}