Question

因此，有一段时间我正在尝试使用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>

Answer 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>

Answer 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>

Youtube API;随机播放列表？

2 个答案: