优酷 API；随机播放列表？答案

【问题标题】：Youtube API; shuffle playlist?优酷 API；随机播放列表？
【发布时间】：2018-03-14 21:05:22
【问题描述】：

所以一段时间以来，我正在尝试使用 youtube api 制作一个适当的随机播放脚本，以便播放我的 youtube 播放列表。我找到了很多例子，但似乎没有一个能很好地工作。有些会随机播放列表，但不会播放第一首歌曲，有些则恰恰相反。

我想要的是随机播放完整的播放列表，然后开始播放。所以第一首播放的歌曲应该是随机的，下一首播放的歌曲也应该是随机/随机播放的。

我找到了下面的脚本来随机播放列表。但是，播放的第一首歌曲不会随机播放。有人可以帮我解决这个问题吗？谢谢一百万！

<html>
  <body>
    <div id="player"></div>
    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        function onYouTubeIframeAPIReady() {
            var player = new YT.Player("player", {
                height: '390',
                width: '640',
                events: {
                    'onReady': function (event) {
                        event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
                        event.target.playVideo();
                        setTimeout(function() {
                            event.target.setShuffle({'shufflePlaylist' : true});
                        }, 1000);
                    }
                }
            });
        }
    </script>
  </body>
</html>

【问题讨论】：

标签： youtube youtube-api shuffle

【解决方案1】：

这对我有用！

<html>
  <body>
    <div id="player"></div>
    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        function onYouTubeIframeAPIReady() {
            var numPl = Math.floor((Math.random() * 50) + 1);
            var player = new YT.Player("player", {
                height: '390',
                width: '640',
                playerVars: {
                    listType:'playlist',
                    list:'PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT',
                    index: numPl,
                    autoplay: 1,
    },
                events: {
                    'onReady': function (event) {
                        //event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
                        //event.target.playVideo();
                        setTimeout(function() {
                            event.target.setShuffle({'shufflePlaylist' : true});
                        }, 1000);
                    }
                }
            });
        }
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

这使用 youtube api 工作。和用户 youtube 创建了播放列表。每次刷新页面时将播放列表重新排序

加载 YT 播放器 API。
加载 YT 播放列表用户播放列表 ID“**.youtube.com/playlist?list=PLo16_*******”
使用随机播放列表 > player.setShuffle(true);
要在随机播放列表中的视频 1 处启动 YT 播放器，请使用 > player.playVideoAt(0)

工作演示Responsive shuffled YouTube Playlist on Google sites

代码jsfiddle.net

<!DOCTYPE html>
<html>
<!-- Responsive YouTube shuffled playlist player -->
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag.  
style =  replaces  size in the player script makes it responsive -->

<div style=" top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
id='player'>
</div>
</body>

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

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: {
  autoplay: 0,
  loop: 1,
  controls: 1,
  showinfo: 1,
  frameborder: 1,
  'listType': 'playlist',
  'list': "PLo16_DLriHp4A8BvkJFZfO_4KDVv7yGgy", // your YouTube playlist id here
 },

 events: {
  'onReady': onPlayerReady,
  'onStateChange': onPlayerStateChange
 }
 });
 }

  // 4. The API will call this function when the video player is ready.

 function onPlayerReady(event) {
  // first shuffle play list 

 player.setShuffle(true); 

  // Onload and on refresh shuffles the users YT playlist but always starts playing 
  // the first video in the original list at its new index position 
  //ie. video (1) = video( new shuffled pos ?)
  // to get over this we can start the player at the new shuffled playlist 
  //video 1(index=0) this changes every time it's refreshed

 player.playVideoAt(0) 

 }
  // 5. The API calls this function when the player's state changes.
  //  option to to add bits         
 function onPlayerStateChange(event) {
  const player = event.target;
 }

 </script>

 </html>

【讨论】：