影片資訊取得
Playlist : 影片列表資訊
[Url]
列表:
https://www.googleapis.com/youtube/v3/playlists? part=contentDetails%2Csnippet &channelId=[channel ID] &maxResults=[每頁筆數] &key=[金鑰]簡單資訊
https://www.googleapis.com/youtube/v3/playlistItems? part=contentDetails%2Csnippet &playlistId=[影片 ID] &key=[金鑰]
[參數分析]
playlists
part:
contentDetails
snippet
channelId
頻道編號
maxResults
分頁筆數
playlistItems
- part:
contentDetails
snippet
- playlistId
影片編號
[頁面範例]
<html>
<head>
<script>
function makeRequest_playlists() {
var request = gapi.client.youtube.playlists.list({
'channelId': '頻道編號',
'part': 'contentDetails',
'maxResults':50
});
request.then(function(response) {
console.log(response.result);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
}
function makeRequest_playlistItems() {
var request = gapi.client.youtube.playlistItems.list({
'playlistId': '影片編號',
'part': 'contentDetails,snippet',
'maxResults':50
});
request.then(function(response) {
console.log(response.result);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
}
function init() {
gapi.client.setApiKey('金鑰');
gapi.client.load('youtube', 'v3').then(makeRequest_playlistItems);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body>
<div id="results"></div>
</body>
</html>
Videos : 詳細影片資訊
[Url]
https://www.googleapis.com/youtube/v3/videos?id=[影片ID]&key=[金鑰]&part=snippet
[參數分析]
[頁面範例]
- html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>YouTube API Uploads via CORS</title>
</head>
<body>
<div class="box_head">
<h1>Youtube Test</h1>
</div>
<div class="box_search">
<span>影片編號:</span><input type="text" id="video_id" value="IygN2Nt0jW4" placeholder="請輸入影片編號" />
<br>
<button onclick="search();">send</button>
</div>
<div class="box_main">
</div>
</body>
</html>
- css
.paging-button {
visibility: hidden;
}
.button-container {
clear: both;
background-color:#C33;
}
.button-container .paging-button {
background-color:#3C3;
}
.msg_box{
clear: both;
padding:5px;
}
- javascript
function show_content(msg){
$('.box_main').append('<div class="msg_box">'+msg+'</div>');
console.log(msg);
}
function search(){
if($('#video_id').val() !== ''){
var videoId = $('#video_id').val();
YoutubeDataTool.getVideoInfo(videoId);
}
}
/**
* YouTube video uploader class
*
* @constructor
*/
var YoutubeDataTool = function(){
/**
* youtube api key(https://console.developers.google.com/apis/credentials?project=develop-1350&authuser=2)
*
* @attribute api_key
* @type string
*/
this.api_key = 'AIzaSyCzNFRHjVKEdyRhi2BT0Sx5oc-IDRg6ghI';
/**
* The id of the new video.
*
* @attribute videoId
* @type string
* @default ''
*/
this.videoId = '';
}; //end of YoutubeDataTool
YoutubeDataTool.prototype.getVideoInfo = function(videoId) {
if(typeof videoId == 'undefined' || videoId === ''){
show_content('請輸入影片編號');
return false;
}
this.videoId = videoId;
var url = 'https://www.googleapis.com/youtube/v3/videos?id='+videoId+'&key='+this.api_key+'&part=snippet';
$.ajax({
type: 'GET',
async: false,
url: url,
success :function(rp){
console.log(rp);
}
});
};
var YoutubeDataTool = new YoutubeDataTool();