2017-02-13 107 views
-1

enter image description here如何让YouTube播放的视频ID与视频标题

我需要的YouTube播放视频ID和视频标题中使用API​​密钥,只要我们需要在一个YouTube播放列表过去五年更新视频如何检索。如何得到它请给我一个完美的链接,以便我实现这一目标。 我们在下面

enter code here 

<script> 
 
var channelName = 'mipaltan'; 
 
var vidHeight = 350; 
 
var vidWidth = 650; 
 
var vidMaxResult =7; // Maximum can be 50 
 

 
$(document).ready(function() { 
 
$.get("https://www.googleapis.com/youtube/v3/channels", { 
 
part: 'contentDetails', 
 
forUsername: channelName, 
 
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key 
 
}, 
 
function (data) { 
 
$.each(data.items, function (i, item) { 
 
console.log(item); // See in Browser Console 
 
pid = item.contentDetails.relatedPlaylists.uploads; 
 
getVideos(pid); 
 
}) 
 
} 
 
); 
 
function getVideos(pid) { 
 
$.get("https://www.googleapis.com/youtube/v3/playlistItems", 
 
{ 
 
part: 'snippet', 
 
maxResults: vidMaxResult, 
 
playlistId: pid, 
 
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key 
 
}, 
 
function (data) { 
 
var outputVideo; 
 
$.each(data.items, function (i, item) { 
 
console.log(item); // See in Browser Console 
 
vidId = item.snippet.resourceId.videoId; 
 
thumbnails = item.snippet.thumbnails.default.url; 
 
texturl = 'https://www.youtube.com/embed/' + vidId; 
 
mainurl = "'" + texturl + "'"; 
 
outputVideo = '<div style="float:left"><img style="width: 93px;height:65px; border-radius: 5px;margin-right:1px;" src="' + thumbnails + '"onclick="newSrc(' + mainurl + ')" /></div>'; 
 

 
$('#result').append(outputVideo); 
 
}) 
 
} 
 

 
); 
 
} 
 
}); 
 

 
</script> 
 
<script> 
 
function newSrc(testurl) { 
 
document.getElementById("MyFrame").src = testurl; 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div id="container"> 
 
<iframe id="MyFrame"; width="670"; height="350"; src="https://www.youtube.com/embed/Yx9M-6cx8wA" frameborder="0" allowfullscreen></iframe> 
 
<div style="padding-left:5px", id="result" class ="footer-widget"> 
 
</div> 
 
</div> 
 
</body>

+3

你尝试过什么?你的代码到目前为止看起来如何?你有没有收到任何错误信息?请给点配合。 StackOverflow不是让人们为你写代码。 –

回答

0

我复制你的代码,并添加jQuery代码。控制台显示你已经达到了你的目标?

enter image description here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script> 
 
var channelName = 'mipaltan'; 
 
var vidHeight = 350; 
 
var vidWidth = 650; 
 
var vidMaxResult =7; // Maximum can be 50 
 

 
$(document).ready(function() { 
 
$.get("https://www.googleapis.com/youtube/v3/channels", { 
 
part: 'contentDetails', 
 
forUsername: channelName, 
 
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key 
 
}, 
 
function (data) { 
 
$.each(data.items, function (i, item) { 
 
console.log(item); // See in Browser Console 
 
pid = item.contentDetails.relatedPlaylists.uploads; 
 
getVideos(pid); 
 
}) 
 
} 
 
); 
 
function getVideos(pid) { 
 
$.get("https://www.googleapis.com/youtube/v3/playlistItems", 
 
{ 
 
part: 'snippet', 
 
maxResults: vidMaxResult, 
 
playlistId: pid, 
 
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key 
 
}, 
 
function (data) { 
 
var outputVideo; 
 
$.each(data.items, function (i, item) { 
 
console.log(item); // See in Browser Console 
 
vidId = item.snippet.resourceId.videoId; 
 
thumbnails = item.snippet.thumbnails.default.url; 
 
texturl = 'https://www.youtube.com/embed/' + vidId; 
 
mainurl = "'" + texturl + "'"; 
 
outputVideo = '<div style="float:left"><img style="width: 93px;height:65px; border-radius: 5px;margin-right:1px;" src="' + thumbnails + '"onclick="newSrc(' + mainurl + ')" /></div>'; 
 

 
$('#result').append(outputVideo); 
 
}) 
 
} 
 

 
); 
 
} 
 
}); 
 

 
</script> 
 
<script> 
 
function newSrc(testurl) { 
 
document.getElementById("MyFrame").src = testurl; 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div id="container"> 
 
<iframe id="MyFrame"; width="670"; height="350"; src="https://www.youtube.com/embed/Yx9M-6cx8wA" frameborder="0" allowfullscreen></iframe> 
 
<div style="padding-left:5px", id="result" class ="footer-widget"> 
 
</div> 
 
</div> 
 
</body>

+0

谢谢Chris Chen,我非常感谢你的工作。 –