问题：
YouTube API以5 x 3网格列出播放列表图标，而不是单列列表
宋宇
下面是我的代码...Javascript和JQuery位于头部，但CSS是一个外部文档。
有一个带有cookie的额外代码段存储了一个名称...忽略它...
它的YouTube API拉我最近的上传。所有的工作都很好，除了我最后有一个15的视频播放列表在一个单一的列，我还没能弄清楚如何让它排序成任何一种网格排列(5x3或什么）。播放列表中加载的视频数量可以调整为5x3,4x3,无论x什么都可以工作。
看到此页面直播在此:98.255.116.178
有什么想法或指导将这些视频纳入网格排列吗？
<!DOCTYPE HTML>
<html>
<head>
<title>My Sandbox</title>
<link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>
jQuery(function($){
$("#video-container").on('click', '.video_select', function(e){
console.log(e);
var buttonSource = $(this).data('video');
var embededVideo = $('#youTube_video');
embededVideo.attr('src', buttonSource);
return false;
});
});
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(){
var username=getCookie("username");
if (username!=null && username!=""){
alert("Welcome back " + username);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
else{
username=prompt("Please enter your name:","");
if (username!=null && username!=""){
setCookie("username",username,365);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
}
}
</script>
<script>
//This is the Authorization by Client ID http://d.pr/i/mEmY
// The client id is obtained from the Google APIs Console at https://code.google.com/apis/console
// If you run access this code from a server other than http://localhost, you need to register
// your own client id.
var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
var OAUTH2_SCOPES = [
'https://www.googleapis.com/auth/youtube'
];
// This callback is invoked by the Google APIs JS client automatically when it is loaded.
googleApiClientReady = function() {
gapi.auth.init(function() {
window.setTimeout(checkAuth, 1);
});
}
// Attempt the immediate OAuth 2 client flow as soon as the page is loaded.
// If the currently logged in Google Account has previously authorized OAUTH2_CLIENT_ID, then
// it will succeed with no user intervention. Otherwise, it will fail and the user interface
// to prompt for authorization needs to be displayed.
function checkAuth() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);
}
// Handles the result of a gapi.auth.authorize() call.
function handleAuthResult(authResult) {
if (authResult) {
// Auth was successful; hide the things related to prompting for auth and show the things
// that should be visible after auth succeeds.
$('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
// Make the #login-link clickable, and attempt a non-immediate OAuth 2 client flow.
// The current function will be called when that flow is complete.
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
// Loads the client interface for the YouTube Analytics and Data APIs.
// This is required before using the Google APIs JS client; more info is available at
// http://code.google.com/p/google-api-javascript-client/wiki/GettingStarted#Loading_the_Client
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
handleAPILoaded();
});
}
//This is the uploads script
// Some variables to remember state.
var playlistId, nextPageToken, prevPageToken;
// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
requestUserUploadsPlaylistId();
}
//Retrieve the uploads playlist id.
function requestUserUploadsPlaylistId() {
// https://developers.google.com/youtube/v3/docs/channels/list
var request = gapi.client.youtube.channels.list({
// mine: '' indicates that we want to retrieve the channel for the authenticated user.
// mine: false,
id: 'UCziks4y-RixDhWljY_es-tA',
part: 'contentDetails'
});
request.execute(function(response) {
console.log(response);
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 15
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
// Only show the page buttons if there's a next or previous page.
console.log (response);
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
var playlistItems = response.result.items;
if (playlistItems) {
// For each result lets show a thumbnail.
jQuery.each(playlistItems, function(index, item) {
createDisplayThumbnail(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no uploaded videos');
}
});
}
// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
console.log(videoSnippet);
var titleEl = $('<h3>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.medium.url;
var videoLink=$('<a>');
videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
videoLink.append(div)
videoLink.addClass('video_select')
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
videoLink.append(div)
$('#video-container').append(videoLink);
}
// Retrieve the next page of videos.
function nextPage() {
requestVideoPlaylist(playlistId, nextPageToken);
}
// Retrieve the previous page of videos.
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}
</script>
</head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
<h1 id="title_script">Welcome to my Sandbox</h1>
</div>
<div class="wrap">
<iframe id='youTube_video' width="853" height="480" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="login-container" class="pre-auth">Please click <a href="#" id="login-link">authorize</a> to continue.
</div>
<div id="video-container">
</div>
<div class="button-container">
<button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
<button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
当然还有CSS：
.wrap{
width: 1000px;
margin: auto;
text-align: center;
}
.background_color{
background-color: #AABF94;
}
h1{
}
.paging-button {
visibility: hidden;
}
.video-content {
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
float: left;
position: relative;
margin: 5px;
}
.video-title {
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: white;
top: 50%;
left: 50%;
position: absolute;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.video-content:nth-child(3n+1) {
clear: both;
}
.button-container {
clear: both;
}
共有2个答案
邵文乐
这不是修复相关的，但我对HTML进行了一些清理：
<div class="wrap">
<h1 id="title_script">Welcome to my Sandbox</h1>
<div class="wrap">
<iframe id='youTube_video' width="853" height="480" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="login-container" class="pre-auth">Please click <a href="#" id="login-link">authorize</a> to continue.
</div>
<div id="video-container">
</div>
<div class="button-container">
<button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
<button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
</div>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
并且在CSS中,将换行宽度从1000更改为1060,并添加了以下两行：
#video-container a {
float: left;
}
#video-container{
width: 100%;
}
像魅力一样工作：屏幕快照
梁丘洲
这似乎对我管用。
您的代码更改为：
（如果不是您的，不要忘记更改代码行：var OAUTH2_CLIENT_ID='your-id'；）
<!DOCTYPE HTML>
<html>
<head>
<title>My Sandbox</title>
<link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>
jQuery(function($){
$("#video-container").on('click', '.video_select', function(e){
console.log(e);
var buttonSource = $(this).data('video');
var embededVideo = $('#youTube_video');
embededVideo.attr('src', buttonSource);
return false;
});
});
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(){
var username=getCookie("username");
if (username!=null && username!=""){
alert("Welcome back " + username);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
else{
username=prompt("Please enter your name:","");
if (username!=null && username!=""){
setCookie("username",username,365);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
}
}
</script>
<script>
//This is the Authorization by Client ID http://d.pr/i/mEmY
// The client id is obtained from the Google APIs Console at https://code.google.com/apis/console
// If you run access this code from a server other than http://localhost, you need to register
// your own client id.
var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
var OAUTH2_SCOPES = [
'https://www.googleapis.com/auth/youtube'
];
// This callback is invoked by the Google APIs JS client automatically when it is loaded.
googleApiClientReady = function() {
gapi.auth.init(function() {
window.setTimeout(checkAuth, 1);
});
}
// Attempt the immediate OAuth 2 client flow as soon as the page is loaded.
// If the currently logged in Google Account has previously authorized OAUTH2_CLIENT_ID, then
// it will succeed with no user intervention. Otherwise, it will fail and the user interface
// to prompt for authorization needs to be displayed.
function checkAuth() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);
}
// Handles the result of a gapi.auth.authorize() call.
function handleAuthResult(authResult) {
if (authResult) {
// Auth was successful; hide the things related to prompting for auth and show the things
// that should be visible after auth succeeds.
$('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
// Make the #login-link clickable, and attempt a non-immediate OAuth 2 client flow.
// The current function will be called when that flow is complete.
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
// Loads the client interface for the YouTube Analytics and Data APIs.
// This is required before using the Google APIs JS client; more info is available at
// http://code.google.com/p/google-api-javascript-client/wiki/GettingStarted#Loading_the_Client
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
handleAPILoaded();
});
}
//This is the uploads script
// Some variables to remember state.
var playlistId, nextPageToken, prevPageToken;
// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
requestUserUploadsPlaylistId();
}
//Retrieve the uploads playlist id.
function requestUserUploadsPlaylistId() {
// https://developers.google.com/youtube/v3/docs/channels/list
var request = gapi.client.youtube.channels.list({
// mine: '' indicates that we want to retrieve the channel for the authenticated user.
// mine: false,
id: 'UCziks4y-RixDhWljY_es-tA',
part: 'contentDetails'
});
request.execute(function(response) {
console.log(response);
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 15
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
// Only show the page buttons if there's a next or previous page.
console.log (response);
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
var playlistItems = response.result.items;
if (playlistItems) {
// For each result lets show a thumbnail.
jQuery.each(playlistItems, function(index, item) {
createDisplayThumbnail(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no uploaded videos');
}
});
}
// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
console.log(videoSnippet);
var titleEl = $('<h3>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.medium.url;
var videoLink=$('<a>');
videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
videoLink.append(div)
videoLink.addClass('video_select')
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
videoLink.append(div)
$('#video-container').append(videoLink);
}
// Retrieve the next page of videos.
function nextPage() {
requestVideoPlaylist(playlistId, nextPageToken);
}
// Retrieve the previous page of videos.
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}
</script>
</head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
<h1 id="title_script">Welcome to my Sandbox</h1>
</div>
<div class="wrap">
<iframe id='youTube_video' width="853" height="480" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="login-container" class="pre-auth">Please click <a href="#" id="login-link">authorize</a> to continue.
</div>
<div id="video-container" class="box_wrapper">
</div>
<div class="button-container">
<button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
<button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
并且您的CSS更改为：
.wrap{
width: 1000px;
margin: auto;
text-align: center;
}
.background_color{
background-color: #AABF94;
}
h1{
}
.paging-button {
visibility: hidden;
}
.box_wrapper {
margin: 0;
height: 100%;
width: 1000px;
overflow: hidden;
}
.video_select {
float: left;
display: table-cell;
}
.video-content {
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
float: left;
position: relative;
margin: 5px;
display: table-cell;
}
.video-title {
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: white;
top: 50%;
left: 50%;
position: absolute;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.video-content:nth-child(3n+1) {
clear: both;
}
.button-container {
clear: both;
}
类似资料：
-
我是YouTube频道的内容所有者。当我从YouTube网页生成视频报告时，我得到的是304k总视频的结果。但是当我使用YouTube数据API使用此处讨论的方法查询如何使用API v3列出YouTube频道的所有上传视频（URL）时？，我得到的计数较少（~270k）。当我手动查找时，其中一些丢失的视频是从YouTube中删除的视频。 当我查询API时，其他视频丢失的原因可能是什么？是因为它们可能
-
我试图访问MyModelClass上的getter方法，但我的代码返回
-
我如何在play store上获得我的应用程序，就像在红框中的所有这些东西上面一样？ 但我的应用程序是这样的，所以我该如何管理它。 有谁能帮我弄清楚这玩意的工作原理吗？ 谢谢.
-
进入具体播放器编辑页面，点击播放列表标签，设置播放列表样式。 设置播放列表的样式：选择视频封面缩略图、文本框和文字列表； 设置播放列表的位置：上、下、左、右，文字列表形式只有左右两种位置。
-
创建播放列表，可以按照设定的顺序自动连续播放多个视频。 创建播放列表 进入播放列表页面，点击添加列表按钮，在弹出的添加播放列表页面，按照提示进行填写，点击保存按钮保存即可。 播放列表管理页面： 添加播放列表页面： 为播放列表添加视频 1) 进入播放列表页面，选择要添加视频的播放列表，点击管理，进入播放列表管理页面； 2) 点击添加视频按钮，在弹出的窗口中，通过搜索视频标题或视频ID进行添加操作；
-
我有一个像这样的xsd- 当我使用XJC生成类绑定时，我看到教师是List类型的 如何生成字符串列表而不是对象？任何帮助都很感激。 更新：使用“vamsilp”提供的解决方案——在删除“教师”元素上的“minOccurs”后，它工作得很好！XSD是由泽西从以下代码自动生成的： 我不知道如何删除“minOccurs”属性。我是否需要修改代码以忽略它？