如何通过视频标题获取youtube播放列表视频ID

时间:2017-02-13 10:00:06

标签: javascript google-api youtube-data-api

enter image description here

我需要如何使用API​​密钥检索YouTube播放列表视频ID和视频标题,只要我们需要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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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

enter image description here

&#13;
&#13;
<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>
&#13;
&#13;
&#13;