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>

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

Answer 1

在视频和缩略图之间匹配添加videoID外部功能，对于您的播放器缩略图，它不应被称为<img src="http://img.youtube.com/vi/'+videos[index]+'1.jpg/" style=...这不是有效的javascript。最后onYouTubePlayerAPIReady应位于window对象上。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

关于ewwink对任何人的回答的更新，这个人和我一样爬上了同样的梯子......

现在，您可以在不加载视频的情况下看到缩略图1。然后在鼠标事件上视频加载......

继承代码......

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

<div id="ewwinkthumbnailed-it">
<img id="player-thumb" src="https://img.youtube.com/vi/default.jpg" style="position:absolute; top:0px; left:120px; width:100px; height:100px;" onmouseover="change();">
</div>


<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];
}
// 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.



function change() {
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: '100px',
    width: '100px',
    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
  }
}
};

</script>

Youtube API显示随机视频＆amp;缩略图

2 个答案: