admin管理员组文章数量:1431420
I making my own subscribe counter and I want to get banner from YouTube Channel. I know how to get channel name, subscribe count from JSON but I pletly don't know how to do that in Javascript when it es to channel banner
I'm using the following format:
;id={CHANNEL-ID}&key={YOUR_API_KEY}
Getting the following info:
{
"kind": "youtube#channelListResponse",
"etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/B7Xtxsb9-7jxNp3CoPWIKeElMuU\"",
"pageInfo": {
"totalResults": 1,
"resultsPerPage": 1
},
"items": [
{
"kind": "youtube#channel",
"etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/2zFpcZbVGlelpdYDk2J-zRsB4Ck\"",
"id": "UCPKqr9qSEXi6r03B18wRj6g",
"brandingSettings": {
"channel": {
"title": "ThePajlok",
"description": "Cześć, siema, witam Was!\nJa jestem ThePajlok inaczej znany jako po prostu Błażej. Szczerze mówiąc nie mam za bardzo pomysłu co by tutaj Wam napisać ale spróbuję... \nNa moim kanale znajdziecie wszelakie gameplaye z gier, vlogi i inne filmy. Mam specyficzny humor do którego trzeba się przyzwyczaić ale mam nadzieję że każdemu z Was oglądających mój kanał się spodoba.Jeśli uważacie że mój kanał jest tego wart to śmiało możecie mnie zasubskrybować! :D\n\nGrupa FB: /\nDiscord: \nInstagram: bazejoo\nSnapchat: bazejoo\nSteam: \n\nCPU: Intel Core i3 4160 3.6 Ghz\nRAM: 8 GB DDR3\nGPU: Nvidia GeForce GTX 750 OC 2GB\nHDD1: 500 GB - System gry\nHDD2: 250 GB - Gry\nHDD3: 1 TB - Nagrywki YT i gry\nSystem: Windows 10 Pro 64-bit",
"keywords": "ThePajlok \"Rocket League\" \"GTA V\" \"GTA Online\" FiveM BeamNG CS:GO",
"defaultTab": "Featured",
"showRelatedChannels": true,
"showBrowseView": true,
"featuredChannelsTitle": "Polecane kanały",
"featuredChannelsUrls": [
"UCEZ9aPZb_gIPinQXNVaYQuA",
"UCw5LLRR_2lv97Mfwmiy-q2Q",
"UCp3tpEjoX--uIlsTVhYETow",
"UCtGnMWpCcoRZVWxkVKp3Ulg"
],
"unsubscribedTrailer": "TD0QfnuDT0w",
"profileColor": "#000000",
"country": "PL"
},
"image": {
"bannerImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletLowImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletHdImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletExtraHdImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileLowImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileMediumHdImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileHdImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileExtraHdImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerTvImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no",
"bannerTvLowImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no",
"bannerTvMediumImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no",
"bannerTvHighImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no"
},
"hints": [
{
"property": "channel.banner.mobile.medium.image.url",
"value": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no"
},
{
"property": "channel.featured_tab.template.string",
"value": "Everything"
},
{
"property": "channel.modules.show_ments.bool",
"value": "True"
}
]
}
}
]
}
part of my code:
<script type="text/javascript">
$(document).ready( function() {
var chanName = "";
loadChannel("UCPKqr9qSEXi6r03B18wRj6g");
function loadChannel(name) {
chanName = name;
var url = ';id='+name+'&key=(MY-API)';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
});
var url1 = ';id='+chanName+'&key=(MY-API)';
$.getJSON(url1, function(data) {
$('#ytName').html(data.items[0].snippet.title);
$('#ytLink').html('<a href="/' + data.items[0].snippet.customUrl + '\">Link</a>');
});
var url2 = ';id='+name+'&key=my key';
$.getJSON(url1, function(data) {
$('#ytBanner').html(data.items[0].brandingSettings.channel.title);
});
}
setInterval( function() {
var url = ';id='+chanName+'&key=(MY-API)';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
});
}, 2000);
});
</script>
I making my own subscribe counter and I want to get banner from YouTube Channel. I know how to get channel name, subscribe count from JSON but I pletly don't know how to do that in Javascript when it es to channel banner
I'm using the following format:
https://www.googleapis./youtube/v3/channels?part=brandingSettings&id={CHANNEL-ID}&key={YOUR_API_KEY}
Getting the following info:
{
"kind": "youtube#channelListResponse",
"etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/B7Xtxsb9-7jxNp3CoPWIKeElMuU\"",
"pageInfo": {
"totalResults": 1,
"resultsPerPage": 1
},
"items": [
{
"kind": "youtube#channel",
"etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/2zFpcZbVGlelpdYDk2J-zRsB4Ck\"",
"id": "UCPKqr9qSEXi6r03B18wRj6g",
"brandingSettings": {
"channel": {
"title": "ThePajlok",
"description": "Cześć, siema, witam Was!\nJa jestem ThePajlok inaczej znany jako po prostu Błażej. Szczerze mówiąc nie mam za bardzo pomysłu co by tutaj Wam napisać ale spróbuję... \nNa moim kanale znajdziecie wszelakie gameplaye z gier, vlogi i inne filmy. Mam specyficzny humor do którego trzeba się przyzwyczaić ale mam nadzieję że każdemu z Was oglądających mój kanał się spodoba.Jeśli uważacie że mój kanał jest tego wart to śmiało możecie mnie zasubskrybować! :D\n\nGrupa FB: https://www.facebook./groups/188269295234714/\nDiscord: https://discordapp./invite/Vxba3YB\nInstagram: bazejoo\nSnapchat: bazejoo\nSteam: https://steammunity./id/thepajlok\n\nCPU: Intel Core i3 4160 3.6 Ghz\nRAM: 8 GB DDR3\nGPU: Nvidia GeForce GTX 750 OC 2GB\nHDD1: 500 GB - System gry\nHDD2: 250 GB - Gry\nHDD3: 1 TB - Nagrywki YT i gry\nSystem: Windows 10 Pro 64-bit",
"keywords": "ThePajlok \"Rocket League\" \"GTA V\" \"GTA Online\" FiveM BeamNG CS:GO",
"defaultTab": "Featured",
"showRelatedChannels": true,
"showBrowseView": true,
"featuredChannelsTitle": "Polecane kanały",
"featuredChannelsUrls": [
"UCEZ9aPZb_gIPinQXNVaYQuA",
"UCw5LLRR_2lv97Mfwmiy-q2Q",
"UCp3tpEjoX--uIlsTVhYETow",
"UCtGnMWpCcoRZVWxkVKp3Ulg"
],
"unsubscribedTrailer": "TD0QfnuDT0w",
"profileColor": "#000000",
"country": "PL"
},
"image": {
"bannerImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1060-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w640-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletLowImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1138-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1707-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2276-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerTabletExtraHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2560-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileLowImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w320-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileMediumHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w960-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1280-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerMobileExtraHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1440-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
"bannerTvImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2120-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
"bannerTvLowImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w854-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
"bannerTvMediumImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1280-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
"bannerTvHighImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1920-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no"
},
"hints": [
{
"property": "channel.banner.mobile.medium.image.url",
"value": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w640-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no"
},
{
"property": "channel.featured_tab.template.string",
"value": "Everything"
},
{
"property": "channel.modules.show_ments.bool",
"value": "True"
}
]
}
}
]
}
part of my code:
<script type="text/javascript">
$(document).ready( function() {
var chanName = "";
loadChannel("UCPKqr9qSEXi6r03B18wRj6g");
function loadChannel(name) {
chanName = name;
var url = 'https://www.googleapis./youtube/v3/channels?part=statistics&id='+name+'&key=(MY-API)';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
});
var url1 = 'https://www.googleapis./youtube/v3/channels?part=snippet&id='+chanName+'&key=(MY-API)';
$.getJSON(url1, function(data) {
$('#ytName').html(data.items[0].snippet.title);
$('#ytLink').html('<a href="http://youtube./' + data.items[0].snippet.customUrl + '\">Link</a>');
});
var url2 = 'https://www.googleapis./youtube/v3/channels?part=brandingSettings&id='+name+'&key=my key';
$.getJSON(url1, function(data) {
$('#ytBanner').html(data.items[0].brandingSettings.channel.title);
});
}
setInterval( function() {
var url = 'https://www.googleapis./youtube/v3/channels?part=statistics&id='+chanName+'&key=(MY-API)';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
});
}, 2000);
});
</script>
- That looks fairly plete? You're making a YouTube API call and processing the data that you get back and getting the channel title - is the problem that you can't get the subscriber count out of that JSON? If the problem is that the API call doesn't work from client side code then you can always write something quick on the server that will make these calls and return the data that the client needs to construct the banner, and cache the results too. (I guess it's safe to put your YouTube API key where the client can see it?) – Rup Commented Nov 26, 2018 at 23:47
1 Answer
Reset to default 2var bannerHtml = "<img title='foo' alt='bar' src=" + data.items[0].image.bannerImageUrl +" />";
$('#ytBanner').html(bannerHtml);
Edit:
var bannerHtml = "<img title='foo' alt='bar' src=" + data.items[0].brandingSettings.image.bannerImageUrl +" />";
本文标签： javascriptGet YouTube Banner from YT API JSONStack Overflow
版权声明：本文标题：javascript - Get YouTube Banner from YT API JSON - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745469220a2659672.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论