javascript - 从 YT API JSON 获取 YouTube 横幅

Question

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

我正在使用以下格式:

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>

Answer 1

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 +" />";