javascript - Youtube API显示随机视频和缩略图

Question

我已加载并播放视频，但无法在视频旁边显示缩略图。

这是代码:

<script>
function rotateYT() {
    var videos = ['usewkEuDVjU',
                  'IL9iemWe_g8',
        'gGMi60M5O98',
        'SN3CgQvqzAo',
        'W1YFnHjjG8s',
        'l9qMYZvG7EE',
        'j_ljOjr54gc',
        'MhczSQtIgNM',
        'j_ljOjr54gc',
        'T-GPePrh7rw',
        'LTNQFYARFOk',
        'ehciyVuCyvs',
        'g4xSmh0LF6Y',
        'shM7cV-fR9o',];

    var index=Math.floor(Math.random() * videos.length);
    return videos[index];
}
</script>

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





    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
    var videoID = rotateYT();
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          border: '0',
          version: '3',
          showinfo: '0',
          rel: '0',
          controls: '0',
          loop: '0',
          allowfullscreen: '0',
          videoId: videoID,



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

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

  // autoplay video
    function onPlayerReady(event) {

    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            window.location="mainvids1computers.html" // redirect


        }
    }
</script>



<div id="player" style="position:fixed; top:0%; left:0%; width:100px; height:100px;">


<img src="http://img.youtube.com/vi/'+videos[index]+'1.jpg/" style="top:100px; left:100px; width:120px; height:180px;">


</div>

我的问题是附加 +videos[index]+ 与 img 标签。我目前得到的只是默认的 img，所以它显然没有正确获取视频 id 和附加。我该如何解决这个问题？

Answer 1

要在视频和缩略图之间进行匹配，请添加 videoID外部函数，对于您的播放器缩略图，不应像 <img src="http://img.youtube.com/vi/'+videos[index]+'1.jpg/" style=... 那样调用它这不是有效的 JavaScript。最后onYouTubePlayerAPIReady应该在window上对象。

function rotateYT() {
  var videos = ['usewkEuDVjU',
    'IL9iemWe_g8',
    'gGMi60M5O98',
    'SN3CgQvqzAo',
    'W1YFnHjjG8s',
    'l9qMYZvG7EE',
    'j_ljOjr54gc',
    'MhczSQtIgNM',
    'j_ljOjr54gc',
    'T-GPePrh7rw',
    'LTNQFYARFOk',
    'ehciyVuCyvs',
    'g4xSmh0LF6Y',
    'shM7cV-fR9o',
  ];

  var index = Math.floor(Math.random() * videos.length);
  return videos[index];
}
// get random video ID
var videoID = rotateYT();

document.getElementById('player-thumb').src = 'https://img.youtube.com/vi/'+ videoID +'/1.jpg';

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

// create youtube player
var player;

window.onYouTubePlayerAPIReady = function() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    border: '0',
    version: '3',
    showinfo: '0',
    rel: '0',
    controls: '1',
    loop: '0',
    allowfullscreen: '0',
    videoId: videoID,

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

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

// autoplay video
function onPlayerReady(event) {

}

// when video ends
function onPlayerStateChange(event) {
  if(event.data === 0) {
    window.location = "mainvids1computers.html" // redirect
  }
}

<div id="player" style="position:fixed; top:0%; left:0%; width:240px; height:180px;" allowfullscreen>

<img id="player-thumb" src="https://img.youtube.com/vi/default.jpg" style="top:100px; left:100px; width:240px; height:180px;">

</div>