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

  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 的示例或实际工作的示例,我将不胜感激。

问候。

请您参考如下方法:

首先,你必须使用 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 
} 


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!