{"id":29533,"date":"2021-06-17T15:34:00","date_gmt":"2021-06-17T12:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29533"},"modified":"2021-10-18T03:31:36","modified_gmt":"2021-10-18T00:31:36","slug":"uzyskaj-liste-filmow-z-youtube-wedlug-slow-kluczowych-za-pomoca-interfejsu-api-wyszukiwania-youtube-i-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/uzyskaj-liste-filmow-z-youtube-wedlug-slow-kluczowych-za-pomoca-interfejsu-api-wyszukiwania-youtube-i-javascript\/","title":{"rendered":"Uzyskaj list\u0119 film\u00f3w z YouTube wed\u0142ug s\u0142\u00f3w kluczowych za pomoc\u0105 interfejsu API wyszukiwania YouTube i JavaScript"},"content":{"rendered":"<p>W przesz\u0142o\u015bci opublikowa\u0142em artyku\u0142 <a href=\"https:\/\/themewp.inform.click\/pl\/uzyskaj-liste-filmow-z-youtube-wedlug-slow-kluczowych-za-pomoca-interfejsu-api-wyszukiwania-youtube\/\" title=\"Jak uzyska\u0107 list\u0119 film\u00f3w z YouTube wed\u0142ug s\u0142\u00f3w kluczowych za pomoc\u0105 API wyszukiwania YouTube,\" >Jak uzyska\u0107 list\u0119 film\u00f3w z YouTube wed\u0142ug s\u0142\u00f3w kluczowych za pomoc\u0105 API wyszukiwania YouTube,<\/a> kt\u00f3ry zosta\u0142 napisany dla programist\u00f3w PHP. Jeden z naszych czytelnik\u00f3w szuka\u0142 tego samego rozwi\u0105zania w JavaScript.<\/p>\n<p>W tym artykule dowiemy si\u0119, jak wyszukiwa\u0107 filmy w YouTube wed\u0142ug s\u0142owa kluczowego za pomoc\u0105 JavaScript za pomoc\u0105 interfejsu API wyszukiwania YouTube. U\u017cytkownik mo\u017ce korzysta\u0107 z tego rozwi\u0105zania w swoich aplikacjach JavaScript zbudowanych na ReactJS, AngularJs, NodeJS itp.<\/p>\n<h3>Uzyskaj klucz API<\/h3>\n<p>Aby rozpocz\u0105\u0107, musisz najpierw utworzy\u0107 klucz API na swoim koncie Konsoli Google. Ten klucz jest niezb\u0119dny podczas interakcji z interfejsami API YouTube. Bez tego klucza YouTube traktuje wszystkie przychodz\u0105ce wywo\u0142ania API jako nieautoryzowane.<\/p>\n<p>Poni\u017cej znajduj\u0105 si\u0119 kroki, aby pobra\u0107 klucz API.<\/p>\n<ul>\n<li>Przejd\u017a do Konsoli programisty Google <a href=\"https:\/\/console.developers.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><a href=\"https:\/\/console.developers.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/console.developers.google.com<\/a>.<\/li>\n<li>Utw\u00f3rz nowy projekt. Opcjonalnie mo\u017cesz r\u00f3wnie\u017c wybra\u0107 istniej\u0105cy projekt.<\/li>\n<li>Nadaj nazw\u0119 swojemu projektowi. Konsola Google utworzy dla Ciebie unikalny identyfikator projektu.<\/li>\n<li>Tw\u00f3j nowo utworzony projekt pojawi si\u0119 na g\u00f3rze lewego paska bocznego.<\/li>\n<li>Kliknij Biblioteka z lewego menu. Zobaczysz list\u0119 interfejs\u00f3w Google API. W\u0142\u0105cz interfejs API danych YouTube.<\/li>\n<li>Nast\u0119pnie z lewego menu kliknij Po\u015bwiadczenia. Wybierz klucz API w obszarze Utw\u00f3rz po\u015bwiadczenia.<\/li>\n<li>Skopiuj ten klucz API.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" alt=\"Uzyskaj list\u0119 film\u00f3w z YouTube wed\u0142ug s\u0142\u00f3w kluczowych za pomoc\u0105 interfejsu API wyszukiwania YouTube i JavaScript\" ><\/a><\/p>\n<h3>Utw\u00f3rz interfejs u\u017cytkownika<\/h3>\n<p>Poniewa\u017c zamierzamy uzyska\u0107 list\u0119 film\u00f3w YouTube wed\u0142ug s\u0142owa kluczowego, zbudujmy prosty formularz, w kt\u00f3rym u\u017cytkownik mo\u017ce wpisa\u0107 swoje s\u0142owo kluczowe. Dodaj\u0119 te\u017c dwa kolejne pola, aby wpisa\u0107 liczb\u0119 film\u00f3w do zwr\u00f3cenia i wybra\u0107 opcj\u0119 wyszukiwania wed\u0142ug. Mo\u017cesz wyszukiwa\u0107 filmy w YouTube na podstawie daty, oceny, trafno\u015bci, tytu\u0142u lub liczby wy\u015bwietle\u0144.<\/p>\n<p>Utw\u00f3rz <code>index.html<\/code>plik i dodaj do niego nast\u0119puj\u0105cy kod.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"UTF-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;title&gt;Get YouTube Video by Keyword&lt;\/title&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.css\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;style&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.paginate {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin-right: 5px;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0li {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: inline-block;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/head&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form id=\"yt-form\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"text\" id=\"keyword-input\" placeholder=\"Enter keyword\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"number\" id=\"maxresult-input\" placeholder=\"Max Results\" min=\"1\" max=\"50\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;select id=\"order-input\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"\"&gt;--SELECT ORDER--&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"date\"&gt;Date&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"rating\"&gt;Rating&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"relevance\"&gt;Relevance&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"title\"&gt;Title&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"viewCount\" selected&gt;View Count&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/select&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"submit\" value=\"Submit\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div id=\"videoListContainer\"&gt;&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/apis.google.com\/js\/api.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"js\/custom.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>W powy\u017cszym kodzie doda\u0142em \u201eid&quot; do ka\u017cdego wej\u015bcia formularza, kt\u00f3re zostanie u\u017cyte do uzyskania warto\u015bci wej\u015bciowych. Ma r\u00f3wnie\u017c pusty div z identyfikatorem, <code>videoListContainer<\/code>w kt\u00f3rym wy\u015bwietli si\u0119 nasza lista film\u00f3w. Do\u0142\u0105czy\u0142em dwa pliki JS \u2013 jeden pochodzi z Google, a drugi to nasz w\u0142asny JS, w kt\u00f3rym napiszemy kod dla API wyszukiwania YouTube. Do\u0142\u0105czy\u0142em r\u00f3wnie\u017c Fancybox CSS i JS przez CDN, kt\u00f3re b\u0119d\u0105 odtwarza\u0107 filmy z YouTube w wyskakuj\u0105cym okienku.<\/p>\n<h3>YouTube Search API w JavaScript<\/h3>\n<p>Je\u015bli chodzi o JavaScript, najpierw musimy za\u0142adowa\u0107 klienta Google API. Po za\u0142adowaniu klienta API Google umo\u017cliwiaj\u0105 nam wywo\u0142ywanie ich interfejs\u00f3w API. Utw\u00f3rzmy <code>js\/custom.js<\/code>plik i za\u0142adujmy klienta interfejsu API Google w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n<pre><code>gapi.load(\"client\", loadClient);\n\u00a0\u00a0\nfunction loadClient() {\n\u00a0\u00a0\u00a0\u00a0gapi.client.setApiKey(\"YOUTUBE_API_KEY\");\n\u00a0\u00a0\u00a0\u00a0return gapi.client.load(\"https:\/\/www.googleapis.com\/discovery\/v1\/apis\/youtube\/v3\/rest\")\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then(function() { console.log(\"GAPI client loaded for API\"); },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function(err) { console.error(\"Error loading GAPI client for API\", err); });\n}<\/code><\/pre>\n<p>Pami\u0119taj, aby doda\u0107 sw\u00f3j klucz API do <code>setApiKey<\/code>metody. Je\u015bli ustawisz to poprawnie to w konsoli przegl\u0105darki powiniene\u015b zobaczy\u0107 komunikat 'Klient GAPI za\u0142adowany dla API&#8217;. To znaczy, \u017ce mo\u017cemy i\u015b\u0107 do przodu.<\/p>\n<h3>Wywo\u0142aj interfejs API i wynik renderowania<\/h3>\n<p>Wszyscy mamy zamiar wywo\u0142a\u0107 interfejs API wyszukiwania YouTube i wy\u015bwietli\u0107 wynik w kodzie HTML. S\u0105 2 rzeczy, w kt\u00f3rych musimy wywo\u0142a\u0107 API. Wyszukiwanie powinno rozpocz\u0105\u0107 si\u0119 po klikni\u0119ciu przycisku przesy\u0142ania i link\u00f3w do stronicowania. YouTube zwraca pewn\u0105 liczb\u0119 film\u00f3w do wyszukiwania s\u0142\u00f3w kluczowych. Dodamy wi\u0119c paginacj\u0119, aby przej\u015b\u0107 do nast\u0119pnego i poprzedniego zestawu film\u00f3w.<\/p>\n<p>Aby obs\u0142u\u017cy\u0107 te scenariusze, nasz kod b\u0119dzie wygl\u0105da\u0142 nast\u0119puj\u0105co. Poni\u017cszy kod r\u00f3wnie\u017c wchodzi do <code>js\/custom.js<\/code>pliku.<\/p>\n<pre><code>const ytForm = document.getElementById('yt-form');\nconst keywordInput = document.getElementById('keyword-input');\nconst maxresultInput = document.getElementById('maxresult-input');\nconst orderInput = document.getElementById('order-input');\nconst videoList = document.getElementById('videoListContainer');\nvar pageToken = '';\n\u00a0\u00a0\nytForm.addEventListener('submit', e =&gt; {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0execute();\n});\n\u00a0\u00a0\nfunction paginate(e, obj) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0pageToken = obj.getAttribute('data-id');\n\u00a0\u00a0\u00a0\u00a0execute();\n}\n\u00a0\u00a0\n\/\/ Make sure the client is loaded before calling this method.\nfunction execute() {\n\u00a0\u00a0\u00a0\u00a0const searchString = keywordInput.value;\n\u00a0\u00a0\u00a0\u00a0const maxresult = maxresultInput.value;\n\u00a0\u00a0\u00a0\u00a0const orderby = orderInput.value;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0var arr_search = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"part\": 'snippet',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": 'video',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"order\": orderby,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"maxResults\": maxresult,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"q\": searchString\n\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if (pageToken != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0arr_search.pageToken = pageToken;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0return gapi.client.youtube.search.list(arr_search)\n\u00a0\u00a0\u00a0\u00a0.then(function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle the results here (response.result has the parsed body).\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const listItems = response.result.items;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (listItems) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let output = '&lt;h4&gt;Videos&lt;\/h4&gt;&lt;ul&gt;';\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0listItems.forEach(item =&gt; {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const videoId = item.id.videoId;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const videoTitle = item.snippet.title;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += `\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;&lt;a data-fancybox href=\"https:\/\/www.youtube.com\/watch?v=${videoId}\"&gt;&lt;img src=\"http:\/\/i3.ytimg.com\/vi\/${videoId}\/hqdefault.jpg\" \/&gt;&lt;\/a&gt;&lt;p&gt;${videoTitle}&lt;\/p&gt;&lt;\/li&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += '&lt;\/ul&gt;';\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (response.result.prevPageToken) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += `&lt;br&gt;&lt;a class=\"paginate\" href=\"#\" data-id=\"${response.result.prevPageToken}\" onclick=\"paginate(event, this)\"&gt;Prev&lt;\/a&gt;`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (response.result.nextPageToken) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += `&lt;a href=\"#\" class=\"paginate\" data-id=\"${response.result.nextPageToken}\" onclick=\"paginate(event, this)\"&gt;Next&lt;\/a&gt;`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Output list\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0videoList.innerHTML = output;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0function(err) { console.error(\"Execute error\", err); });\n}<\/code><\/pre>\n<p>Tutaj najpierw pobieramy warto\u015bci wej\u015bciowe z formularza i przechowujemy je w zmiennych. W <code>execute<\/code>metodzie piszemy kod, kt\u00f3ry wywo\u0142uje API YouTube. W odpowiedzi otrzymujemy list\u0119 film\u00f3w wraz z prevPageToken lub nextPageToken lub obydwoma. Te tokeny s\u0142u\u017c\u0105 do pobierania zestawu nast\u0119pnych lub poprzednich film\u00f3w wed\u0142ug s\u0142\u00f3w kluczowych. Do\u0142\u0105czamy te tokeny jako atrybuty danych do link\u00f3w stronicowania. Teraz, gdy klikniemy \u0142\u0105cza stronicowania, wywo\u0142anie API inicjuje si\u0119 ponownie, wykonuje swoje zadanie i daje nam odpowied\u017a. Z odpowiedzi API wy\u015bwietlamy informacje wideo w div, kt\u00f3ry ma identyfikator <code>videoListContainer<\/code>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" alt=\"Uzyskaj list\u0119 film\u00f3w z YouTube wed\u0142ug s\u0142\u00f3w kluczowych za pomoc\u0105 interfejsu API wyszukiwania YouTube i JavaScript\" ><\/a><\/p>\n<p>W naszym samouczku wy\u015bwietlamy miniatury film\u00f3w i tytu\u0142y film\u00f3w na li\u015bcie. Mo\u017cesz r\u00f3wnie\u017c wydrukowa\u0107 inne informacje wideo zgodnie z wymaganiami. U\u017cytkownik mo\u017ce wydrukowa\u0107 zmienn\u0105, <code>listItems<\/code>aby sprawdzi\u0107, jakie informacje YouTube API zwraca w odpowiedzi. Poza tym w powy\u017cszym kodzie u\u017cy\u0142em Fancyboxa u\u017cywaj\u0105c <code>data-fancybox<\/code>atrybutu. Ten atrybut b\u0119dzie odtwarza\u0142 wideo w wyskakuj\u0105cym okienku.<\/p>\n<p>Mam nadziej\u0119, \u017ce wiesz, jak uzyska\u0107 list\u0119 film\u00f3w na YouTube wed\u0142ug s\u0142\u00f3w kluczowych w JavaScript. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n<h4>Powi\u0105zane artyku\u0142y<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/youtube-api-jak-uzyskac-liste-filmow-z-youtube-na-swoim-kanale\/\" title=\"YouTube API \u2013 jak uzyska\u0107 list\u0119 film\u00f3w z YouTube na swoim kanale\">YouTube API \u2013 jak uzyska\u0107 list\u0119 film\u00f3w z YouTube na swoim kanale<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-uzyskac-tagi-wideo-youtube-za-pomoca-interfejsu-api-youtube\/\" title=\"Jak uzyska\u0107 tagi wideo YouTube za pomoc\u0105 interfejsu API YouTube\">Jak uzyska\u0107 tagi wideo YouTube za pomoc\u0105 interfejsu API YouTube<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-korzystac-z-interfejsu-api-youtube-do-przesylania-filmow-na-kanal-youtube\/\" title=\"Jak korzysta\u0107 z interfejsu API YouTube do przesy\u0142ania wideo na kana\u0142 YouTube?\">Jak korzysta\u0107 z interfejsu API YouTube do przesy\u0142ania wideo na kana\u0142 YouTube?<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym artykule dowiemy si\u0119, jak uzyska\u0107 filmy z YouTube wed\u0142ug s\u0142\u00f3w kluczowych za pomoc\u0105 interfejsu API wyszukiwania YouTube i JavaScript. Dodamy r\u00f3wnie\u017c paginacj\u0119, aby uzyska\u0107<\/p>\n","protected":false},"author":1,"featured_media":20180,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[249],"tags":[847],"class_list":["post-29533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-8","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/29533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=29533"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/29533\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=29533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=29533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=29533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}