Cha*_*lye 1 html javascript jquery html5 youtube-api
在jlmcdonald的一些明智的输入后,我重新写了这篇文章
最终目标是使用YouTube API做一些有趣的事情.今天的目标是让它发挥作用.
我在这里做了youtube dev java-scrip API教程:
https://developers.google.com/youtube/v3/code_samples/javascript#my_uploads
但是,我没有使用单独的文档,而是根据需要调整了一个大文件.
无法让它工作......想法？
以下是Google的API代码(如果需要)http://d.pr/i/Ybcx
<!doctype html>
<html>
<head>
<title>My Uploads</title>
<link rel="stylesheet" href="my_uploads.css" />
<style>
.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;
}
</style>
<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: '',
part: 'contentDetails'
});
request.execute(function(response) {
playlistId = response.result.items[0].contentDetails.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 9
};
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.
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) {
var titleEl = $('<h3>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.medium.url;
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
$('#video-container').append(div);
}
// 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>
<div id="login-container" class="pre-auth">This application requires access to your YouTube account.
Please <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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
由于你的问题主要是关于"入门",我会指出你的某些方向,希望这足以让你到达你想去的地方.首先,有几种不同的YouTube API - 有数据 API,用于检索有关供稿,活动,视频等的信息,还有播放器 API,用于嵌入视频和控制它.(还有一个分析API和一个直播API,但这里并不重要.)如果您的唯一目标是获取信息关于你最近的上传(你提到标题和描述),那么你只需要数据API.如果您还希望视频本身嵌入iFrame(首选方式),那么您将需要两个...您将首先使用数据API,然后使用您从中检索到的视频ID调用播放器API元数据包.
还有一点需要指出的是,生产中有两个版本的数据API; v2和v3.v2有时被称为gdata API(因为它使用旧的gdata XML模式).我建议使用数据API的v3,因为它更容易使用,完全符合REST和CORS,更符合逻辑布局等.话虽如此,v3中还有一些东西尚未提供(例如评论)检索),所以如果你最终需要v3没有提供的东西,你将不得不暂时破解它.
因此,要从数据API检索最近的上传,一般策略是调用REST端点,该端点为您提供上传源的ID,然后调用REST端点,该端点为您提供属于该源的视频.幸运的是,数据API的v3文档为您提供了一个确切的示例:
https://developers.google.com/youtube/v3/code_samples/javascript#my_uploads
(请注意,该示例使用javascript gapi客户端,主要用于处理您需要的OAuth2身份验证.每当您对需要身份验证的数据API发出请求时,使用gapi客户端可能非常有用,因此您无需处理所有令牌都通过自己.有javascript,python,php,go等的gapi客户端.但是如果你得到的数据只需要阅读,而且不需要在授权墙后面,您可以获得API密钥并直接调用端点.)
获得最新上传的数据后,您可以将标题和说明放在HTML中的任何位置,然后获取视频ID(也通过数据API调用返回)并在播放器API中使用它.您上面发布的代码就是一个很好的例子.
当您开始讨论这个问题时,您可以发布有关您可能遇到的特定问题的新问题.
| 归档时间： |
|
| 查看次数： |
7044 次 |
| 最近记录： |