嵌入带有索引的 youtube 播放列表；缩略图始终是第一个视频
Posted
技术标签:
【中文标题】嵌入带有索引的 youtube 播放列表；缩略图始终是第一个视频【英文标题】：Embed youtube playlist with index; thumbnail is always first video 【发布时间】：2015-12-03 18:41:23 【问题描述】：我正在嵌入一个带有特殊调整的 Youtube 播放列表 - 起点应该是随机选择的 - 通过以下两个 sn-ps：
HTML：
<iframe id="juliacon-player"
align="center"
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>
这很有效，因为它从播放列表中选择一个随机视频并从该点开始（给人的印象是在每个页面视图中从列表中嵌入一个随机视频），但按下播放之前的缩略图始终是第一个视频.
我能找到的关于如何更改播放列表缩略图的所有资源都是永久且静态的 - 有没有办法更改它，以便我可以动态更改缩略图？我当然希望这是半自动发生的，但是如果我必须以某种方式编写参数脚本也没关系。
【问题讨论】：
【参考方案1】：我认为这与 youtube 根据视口大小选择缩略图有关。如果 iframe 的宽度为 430 像素或更小，我认为您会发现缩略图将正确显示。当它高于此值时，由于某种原因，它只会显示播放列表的第一个缩略图。
iframe( src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)
对
iframe( src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)
相同的播放列表。不同的缩略图。请注意，280px 显示的是正确的缩略图。
如果您只嵌入视频并将播放列表附加到其中，则缩略图将是正确的。
iframe( 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 东西，可以从播放列表中提取所有 videoId；将它们添加到数组中；然后从数组中选择一个随机视频；并将其放入 iframe src。
这里是代码。您必须将自己的 API-Key 放在那里。 http://codepen.io/anon/pen/vLoRyL
我在这方面完全是菜鸟。因此，对我的代码的任何建设性批评将不胜感激。希望这对其他人有帮助。
$(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();
);
);
【讨论】：
以上是关于嵌入带有索引的 youtube 播放列表；缩略图始终是第一个视频的主要内容，如果未能解决你的问题，请参考以下文章
如何嵌入带有 4000 多个视频的缩略图的 youtube 频道
YouTube 嵌入播放器：缩略图对于小型播放器是像素化的，但对于大型播放器来说看起来不错