嵌入youtube與索引的播放列表;縮略圖永遠是第一視頻

我在嵌入YouTube播放列表用特殊的調整 - 的起點應該是隨機選擇 - 由以下兩個片段的手段：嵌入youtube與索引的播放列表;縮略圖永遠是第一視頻

HTML：

<iframe id="juliacon-player" 
     align="center" 
     width="560" 
     height="315" 
     frameborder="0" 
     allowfullscreen> 
</iframe>

的JavaScript在<body>的底部：

<script type="text/javascript"> 
    var playlistId = 'PLP8iPy9hna6Sdx4soiGrSefrmOPdUWixM', 
     videoCount = 61, 
     index = Math.floor(Math.random() * videoCount), 
     playlistUrl = 'https://www.youtube.com/embed/videoseries?list=' + playlistId + '&index=' + index, 
     videoPlayer = document.getElementById('juliacon-player'); 

    if (videoPlayer) { 
     videoPlayer.src = playlistUrl; 
    } 
</script>

這種運作良好，因爲它CH從播放列表中隨機播放一段視頻並開始播放（給出從每個頁面視圖的列表中嵌入隨機視頻的印象），但按下播放前的縮略圖始終是第一個視頻。

我可以找到關於如何更改播放列表的縮略圖的所有資源都是永久和靜態的 - 是否有方法可以更改它以便我可以動態更改縮略圖？我當然更喜歡這種情況是半自動的，但如果我必須以某種方式編寫參數的腳本，那也可以。

來源

2015-09-08 Tomas Lycken

我認爲這與YouTube根據視口大小選擇縮略圖有關。我認爲如果iframe的寬度爲430px或更小，您會發現縮略圖將正確顯示。當它高於此值時，出於某種原因，它只會顯示播放列表的第一個縮略圖。

iframe(width="280" height="158" src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)

iframe(width="720" height="405" src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)

同一播放列表。不同的縮略圖。注意280px顯示正確的縮略圖。

如果您僅嵌入視頻並將播放列表附加到該視頻，縮略圖將是正確的。

iframe(width="720" height="405" src="https://www.youtube.com/embed/K-mG66pwQ5M?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE")

這是我看到的東西you've already discovered。你已經手動製作了陣列，所以我想我會更進一步。

並自動生成播放列表中的視頻數組。然後更改您的iframe src以顯示帶有附加到url的播放列表的視頻。

基於此Retrieve all videos from youtube playlist using youtube v3 API我創建了一個JavaScript的東西，從播放列表中拉出所有videoIds;將它們添加到數組中;然後從陣列中選擇一個隨機視頻;並將其放入iframe src中。

這是代碼。你必須在那裏放置你自己的API密鑰。 http://codepen.io/anon/pen/vLoRyL

我是一個總noob在這。因此，我的代碼的任何建設性的批評將不勝感激。希望這可以幫助其他任何人。

$(function() { 

// GET A RANDOM VIDEO FROM ALL PLAYLISTS 
function randomVideo() { 


    // VARIABLES 
     // the playlist 
     var playlistDon = {url:"PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE", count:4, name:"Don's Design Lab"}; 

     // get random video from that playlist 
     var indexRando = Math.floor((Math.random() * playlistDon.count)); 

     // making the array of videos in playlist 
     var sum = 0; 
     var videoArray = []; 


    // CONNECTING TO API 
    function getVids(PageToken){ 
     $.get(
      "https://www.googleapis.com/youtube/v3/playlistItems",{ 
      part : 'snippet', 
      maxResults : 50, 
      playlistId : playlistDon.url, // selecting the random playlist 
      pageToken : PageToken, 
      key: 'YOUR API KEY' 
      }, 
      function(data){ 
       myPlan(data); 
      } 
     ); 
    } 

    // GETTING LIST OF VIDEOiDS FROM PLAYLIST 
    function myPlan(data){ 
     var total = data.pageInfo.totalResults; 
     var nextPageToken = data.nextPageToken; 

     // cycle through the data 
     for(var i=0;i<data.items.length;i++){ 

      // add .items to videoArray 
      videoArray.push(data.items[i].snippet.resourceId.videoId); 
      sum++ ; 


      if(sum === (total)){ // if the current item number equals the total number of items 
       sum = 0; // reset the count 
       updateIframe(); // update the iframe 
       return; 
      } 
     } 

     if(sum < (total)){ 
      getVids(nextPageToken); 
     } 

    } 


    function updateIframe() { 
     // put that video into the iframe 
     var videoUrl = "https://www.youtube.com/embed/" + videoArray[indexRando] +"?list=" + playlistDon.url + "&index=" + indexRando + "&showinfo=1"; 
     $('.video.random iframe').attr("src", videoUrl); 
    } 


    getVids(); 

} 



$('button').on('click', function() { 
    randomVideo(); 
}); 



});

來源

2016-02-24 00:30:25 Pacificano

嵌入youtube與索引的播放列表;縮略圖永遠是第一視頻

回答

相關問題