Fatal编程技术网
  • javascript/
  • Javascript 从YT API JSON获取YouTube横幅

Javascript 从YT API JSON获取YouTube横幅

javascript json api

Javascript 从YT API JSON获取YouTube横幅,javascript,json,api,Javascript,Json,Api,我制作了自己的订阅计数器，我想从YouTube频道获得横幅。我知道如何从JSON获取频道名称、订阅计数，但我完全不知道如何在Javascript中获取频道标题 我使用以下格式： https://www.googleapis.com/youtube/v3/channels?part=brandingSettings&id={CHANNEL-ID}&key={YOUR_API_KEY} 正在获取以下信息： { "kind": "youtube#channelListRespons

我制作了自己的订阅计数器，我想从YouTube频道获得横幅。我知道如何从JSON获取频道名称、订阅计数，但我完全不知道如何在Javascript中获取频道标题

我使用以下格式：

https://www.googleapis.com/youtube/v3/channels?part=brandingSettings&id={CHANNEL-ID}&key={YOUR_API_KEY}
正在获取以下信息：

{
 "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.com/groups/188269295234714/\nDiscord: https://discordapp.com/invite/Vxba3YB\nInstagram: bazejoo\nSnapchat: bazejoo\nSteam: https://steamcommunity.com/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.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1060-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w640-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletLowImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1138-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1707-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletHdImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2276-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletExtraHdImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2560-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileLowImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w320-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileMediumHdImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w960-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileHdImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1280-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileExtraHdImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1440-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerTvImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2120-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvLowImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w854-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvMediumImageUrl": "https://yt3.ggpht.com/8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1280-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvHighImageUrl": "https://yt3.ggpht.com/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.com/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_comments.bool",
      "value": "True"
     }
    ]
   }
  }
 ]
}
我的部分代码：

<script type="text/javascript">
 $(document).ready( function() {

     var chanName = "";

     loadChannel("UCPKqr9qSEXi6r03B18wRj6g");

     function loadChannel(name) {

        chanName = name;
        var url = 'https://www.googleapis.com/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.com/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.com/' + data.items[0].snippet.customUrl + '\">Link</a>');
        });

        var url2 = 'https://www.googleapis.com/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.com/youtube/v3/channels?part=statistics&id='+chanName+'&key=(MY-API)';
        $.getJSON(url, function(data) {
            $("#odometer").html(data.items[0].statistics.subscriberCount);
        });

    }, 2000);
});
</script>


$（文档）.ready（函数（）{
var chanName=“”；
加载通道（“UCPKqr9qSEXi6r03B18wRj6g”）；
函数加载通道（名称）{
chanName=名称；
var url='1〕https://www.googleapis.com/youtube/v3/channels?part=statistics&id=“+name+”&key=（MY-API）”；
$.getJSON（url、函数（数据）{
$（“#里程表”）.html（data.items[0].statistics.subscriberCount）；
});
var url1='1〕https://www.googleapis.com/youtube/v3/channels?part=snippet&id=“+chanName+”&key=（MY-API）”；
$.getJSON（url1，函数（数据）{
$（'#ytName'）.html（data.items[0].snippet.title）；
$（'#ytLink'）.html（''）；
});
var url2=https://www.googleapis.com/youtube/v3/channels?part=brandingSettings&id=“+name+”&key=my key'；
$.getJSON（url1，函数（数据）{
$（'#ytBanner'）.html（data.items[0].brandingSettings.channel.title）；
});
}
setInterval（函数（）{
var url='1〕https://www.googleapis.com/youtube/v3/channels?part=statistics&id=“+chanName+”&key=（MY-API）”；
$.getJSON（url、函数（数据）{
$（“#里程表”）.html（data.items[0].statistics.subscriberCount）；
});
}, 2000);
});

var bannerHtml=“”；
$（'#ytBanner'）.html（bannerHtml）；
编辑：

var bannerHtml=“”；
看起来相当完整吗？您正在进行一个YouTube API调用，处理返回的数据并获取频道标题——问题是您无法从JSON中获取订户计数吗？如果问题是API调用不能从客户端代码中工作，那么您可以始终在服务器上快速编写一些东西来进行这些调用，并返回客户端构建横幅所需的数据，同时缓存结果。（我想把YouTube API密钥放在客户端可以看到的地方是安全的？） 
var bannerHtml = "<img title='foo' alt='bar' src=" + data.items[0].image.bannerImageUrl +" />";
$('#ytBanner').html(bannerHtml);

var bannerHtml = "<img title='foo' alt='bar' src=" + data.items[0].brandingSettings.image.bannerImageUrl +" />";