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

Question

我正在为我的网站添加一个自定义播放器，我有两个问题。

我在YouTube上的播放列表有391首歌曲，而API播放器只能加载200首。
我在使用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您需要提示播放列表以获取整个视频的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
}

使用YouTube API将YouTube播放列表中的所有视频ID转换为PHP阵列

1 个答案:

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

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