从列表/播放列表播放随机 youtube 视频并循环播放

Question

我们有许多拥有 youtube 视频广告的客户。这些当前位于 YouTube 播放列表中，但通过嵌入播放列表，相同的视频始终首先显示在网站上，因此我们希望随机化播放列表中页面加载时显示的视频。我有一个代码 sn-p 它将从输入视频 url 加载一个随机视频但是当视频完成时它不会移动到列表中的下一个视频。谁能建议我如何完成我想做的事情？我的代码如下。

    <!-- Youtube video loop playlist -->
<script>
        var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ", "https://www.youtube.com/embed/CzJ-h7W1hVw"];
        window.onload = function () {
            var playerDiv = document.getElementById("random_player");
            var player = document.createElement("IFRAME");
            var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            player.setAttribute('width', '528');
            player.setAttribute('height', '330');
            player.setAttribute('src', randomVideoUrl);
            playerDiv.appendChild(player);
        };
        onStateChange: function(e){
            var id = 'qzZuBWMnS08';

            if(e.data === YT.PlayerState.ENDED){
                player.loadVideoById(videos);
            }
        }
    </script>
<div id="random_player"></div>

提前谢谢你。 唐娜

Answer 1

函数loadVideoById 可以获取单个ID或对象语法中的单个视频。 它无法接收数组视频或播放列表。

这是我的实现 http://jsfiddle.net/thatkookooguy/e11oy0eu/2247/ （代码也嵌入在最后）

请注意，由于 youtube API 存在错误，因此使用了 setTimeout。如果您立即设置setShuffle 或playVideoAt，则不会发生任何事情（或者播放列表会重置并从头开始）。

您可以在播放器的播放选项（随机播放、循环播放）中添加任何您想要更改的内容。如果它不能按原样工作，请尝试将这些参数也添加到setTimeout。

参考：youtube API - setShuffle don't work

// 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);

var player;

// load the playlist
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    events: {
      'onReady': onPlayerReady
    },
    playerVars: {
      listType: 'playlist',
      list: 'PLOy0j9AvlVZPto6IkjKfpu0Scx--7PGTC'
    }
  });
}

// when the video player is ready, generate a random number, and play from that
function onPlayerReady(event) {
  // create a random number between 0 and 149
  num = Math.floor(Math.random() * 150);

  // the timeout is set because of a bug with the youtube API. if you do any of this line without it, it won't affect anything
  // see: https://stackoverflow.com/questions/12916017/youtube-api-setshuffle-dont-work
  setTimeout(() => {
    player.playVideoAt(num);
  }, 1000);
}

<div id="player"></div>