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> 

我的問題是追加+視頻[指數] +與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>

Answer 2

上ewwink的回答對任何人whome在爬階梯一樣像我只是一個更新...

在這裏，你現在可以看到縮略圖月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>