{"id":28852,"date":"2021-05-29T14:47:00","date_gmt":"2021-05-29T11:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28852"},"modified":"2021-10-17T04:32:20","modified_gmt":"2021-10-17T01:32:20","slug":"youtube-api-hur-far-jag-en-lista-over-youtube-videor-fran-din-kanal","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/youtube-api-hur-far-jag-en-lista-over-youtube-videor-fran-din-kanal\/","title":{"rendered":"YouTube API &#8211; Hur f\u00e5r jag en lista \u00f6ver YouTube-videor fr\u00e5n din kanal"},"content":{"rendered":"<p>Nyligen fr\u00e5gade en av v\u00e5ra l\u00e4sare hur man f\u00e5r en lista med videor p\u00e5 en YouTube-kanal? De ville visa en lista \u00f6ver sina videor i tabellformat. I den h\u00e4r artikeln studerar vi hur du anv\u00e4nder YouTube API f\u00f6r att f\u00e5 en lista \u00f6ver YouTube-videor p\u00e5 din kanal.<\/p>\n<p>En anv\u00e4ndare kan se alla sina videor p\u00e5 sj\u00e4lva YouTube-webbplatsen. Men om du vill dela videolistan med n\u00e5gon annan m\u00e5ste du h\u00e5lla dessa data offline. \u00c5 andra sidan kanske vissa anv\u00e4ndare vill visa en videolista p\u00e5 sin webbplats.<\/p>\n<p>Med det sagt, l\u00e5t oss ta en titt p\u00e5 hur man f\u00e5r en lista \u00f6ver YouTube-videor med YouTube API.<\/p>\n<p><strong>Obs!<\/strong> Med hj\u00e4lp av koden i den h\u00e4r artikeln kan du ocks\u00e5 f\u00e5 en lista med videor p\u00e5 alla YouTube-kanaler som ger ett giltigt YouTube-kanal-id.<\/p>\n<h3>Skaffa din API-nyckel<\/h3>\n<p>F\u00f6r att komma ig\u00e5ng med YouTube API m\u00e5ste du f\u00f6rst skapa en API-nyckel fr\u00e5n ditt Google-konto. Den h\u00e4r nyckeln \u00e4r n\u00f6dv\u00e4ndig n\u00e4r du interagerar med YouTube-API: erna. Utan denna nyckel anser YouTube alla inkommande API-f\u00f6rfr\u00e5gningar som obeh\u00f6riga.<\/p>\n<p>F\u00f6lj stegen nedan f\u00f6r att skapa en API-nyckel.<\/p>\n<ul>\n<li>G\u00e5 till Googles utvecklarkonsol <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>Skapa ett nytt projekt. Du kan ocks\u00e5 v\u00e4lja befintligt projekt.<\/li>\n<li>Skriv ett namn p\u00e5 ditt projekt. Google Console skapar unikt projekt-ID.<\/li>\n<li>N\u00e4r du har skapat ett projekt visas det \u00f6verst i v\u00e4nster sidof\u00e4lt.<\/li>\n<li>Klicka p\u00e5 Bibliotek. Du kommer att se en lista \u00f6ver Google API: er.<\/li>\n<li>Aktivera YouTube Data API.<\/li>\n<li>Klicka p\u00e5 referenser. V\u00e4lj API-nyckel under Skapa referenser.<\/li>\n<li>Kopiera API-nyckeln. Vi beh\u00f6ver det om ett \u00f6gonblick.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20424-6081ef644e221.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-20424-6081ef644e221.png\" alt=\"YouTube API - Hur f\u00e5r jag en lista \u00f6ver YouTube-videor fr\u00e5n din kanal\" ><\/a><\/p>\n<h3>F\u00e5 en lista med YouTube-videor<\/h3>\n<p>N\u00e4r du \u00e4r redo med API-nyckeln skapar du 3 filer i ditt projekt. Dessa filer st\u00e5r f\u00f6r konfigurations- och hj\u00e4lpmetoder, Ajax-hantering och visar det slutliga resultatet.<\/p>\n<ul>\n<li><code>config.php<\/code>: I den h\u00e4r filen st\u00e4ller vi in \u200b\u200bAPI-nyckel som en konstant. Det har ocks\u00e5 hj\u00e4lpmetod som ger ett API-samtal och f\u00e5r svar.<\/li>\n<li><code>ajax.php<\/code>: Den h\u00e4r filen kommer att anropa API: et f\u00f6r att f\u00e5 n\u00e4sta upps\u00e4ttning resultat f\u00f6rutsatt att maximalt resultat returneras.<\/li>\n<li><code>index.php<\/code>: Den inneh\u00e5ller ett formul\u00e4r, kod f\u00f6r Ajax-samtal, visar videolistan.<\/li>\n<\/ul>\n<p>I <code>config.php<\/code>fil, l\u00e5t oss f\u00f6rklara API-nyckeln som en konstant variabel. Vi definierar ocks\u00e5 hj\u00e4lparmetoden som interagerar med API-slutpunkterna.<\/p>\n<p><strong>config.php<\/strong><\/p>\n<pre><code>&lt;?php\ndefine('GOOGLE_API_KEY', 'PASTE_YOUR_API_KEY');\n\u00a0\nfunction getYTList($api_url = '') {\n\u00a0\u00a0\u00a0\u00a0$ch = curl_init();\n\u00a0\u00a0\u00a0\u00a0curl_setopt($ch, CURLOPT_URL, $api_url);\n\u00a0\u00a0\u00a0\u00a0curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n\u00a0\u00a0\u00a0\u00a0$response = curl_exec($ch);\n\u00a0\u00a0\u00a0\u00a0$arr_result = json_decode($response);\n\u00a0\u00a0\u00a0\u00a0if (isset($arr_result-&gt;items)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $arr_result;\n\u00a0\u00a0\u00a0\u00a0} elseif (isset($arr_result-&gt;error)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/var_dump($arr_result); \/\/this line gives you error info if you are not getting a video list.\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n<p>Se till att ers\u00e4tta platsh\u00e5llaren med den faktiska API-nyckeln. Du m\u00e5ste ocks\u00e5 ha cURL-till\u00e4gg aktiverat p\u00e5 din server.<\/p>\n<h4>Skapa ett formul\u00e4r<\/h4>\n<p>D\u00e4refter beh\u00f6ver vi ett enkelt formul\u00e4r d\u00e4r vi kan ange YouTube-kanal-id och antal videor som ska returneras. YouTube API returnerar h\u00f6gst 50 videor \u00e5t g\u00e5ngen.<\/p>\n<p><strong>index.php<\/strong><\/p>\n<pre><code>&lt;form method=\"get\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"text\" name=\"channel\" placeholder=\"Enter Channel ID\" value=\"&lt;?php if(array_key_exists('channel', $_GET)) echo $_GET['channel']; ?&gt;\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"number\" name=\"max_result\" placeholder=\"Max Results\" min=\"1\" max=\"50\" value=\"&lt;?php if(array_key_exists('max_result', $_GET)) echo $_GET['max_result']; ?&gt;\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"submit\" value=\"Submit\"&gt;&lt;\/p&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Vid inl\u00e4mning av formul\u00e4r skickar jag kanal-id och max_result enligt GET-metoden. S\u00e5 p\u00e5 toppen av samma fil skriver jag koden enligt f\u00f6ljande:<\/p>\n<pre><code>&lt;?php\nrequire_once \"config.php\";\n\u00a0\n$arr_list = array();\nif (array_key_exists('channel', $_GET) &amp;&amp; array_key_exists('max_result', $_GET)) {\n\u00a0\u00a0\u00a0\u00a0$channel = $_GET['channel'];\n\u00a0\u00a0\u00a0\u00a0$url = \"https:\/\/www.googleapis.com\/youtube\/v3\/search?channelId=$channel&amp;order=date&amp;part=snippet&amp;type=video&amp;maxResults=\". $_GET['max_result'] .\"&amp;key=\". GOOGLE_API_KEY;\n\u00a0\u00a0\u00a0\u00a0$arr_list = getYTList($url);\n}\n?&gt;<\/code><\/pre>\n<p>Den h\u00e4r koden inneh\u00e5ller en konfigurationsfil, h\u00e4mta parametrarna, bygg en API-URL och skicka den sedan till hj\u00e4lpmetoden som vi skapade i f\u00f6reg\u00e5ende steg. L\u00e4gg till nedanst\u00e5ende kod efter ditt formul\u00e4r f\u00f6r att visa resultatet.<\/p>\n<p>Jag t\u00e4nker inte fokusera p\u00e5 utformningen av en lista. Huvudsyftet med handledningen \u00e4r att h\u00e4mta YouTube-videor. Jag visar det i listformat.<\/p>\n<pre><code>&lt;?php\nif (!empty($arr_list)) {\n\u00a0\u00a0\u00a0\u00a0echo '&lt;ul class=\"video-list\"&gt;';\n\u00a0\u00a0\u00a0\u00a0foreach ($arr_list-&gt;items as $yt) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"&lt;li&gt;\". $yt-&gt;snippet-&gt;title .\" (\". $yt-&gt;id-&gt;videoId .\")&lt;\/li&gt;\";\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0echo '&lt;\/ul&gt;';\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (isset($arr_list-&gt;nextPageToken)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo '&lt;input type=\"hidden\" class=\"nextpagetoken\" value=\"'. $arr_list-&gt;nextPageToken .'\" \/&gt;';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo '&lt;div id=\"loadmore\"&gt;Load More&lt;\/div&gt;';\n\u00a0\u00a0\u00a0\u00a0}\n}\n?&gt;<\/code><\/pre>\n<p>H\u00e4r g\u00e5r vi igenom videor och skriver ut videotitel och video-id. Om vi \u200b\u200bf\u00e5r v\u00e4rdet av &#8217;nextPageToken&#8217; l\u00e4gger vi till ett dolt f\u00e4lt och Load More-element. Detta beror p\u00e5 att om du har mer \u00e4n 50 videor p\u00e5 kanalen kan vi f\u00e5 n\u00e4sta upps\u00e4ttning poster med hj\u00e4lp av detta &#8217;nextPageToken&#8217;-v\u00e4rde. Efter detta m\u00e5ste vi ringa ett Ajax-samtal genom att klicka p\u00e5 Load More.<\/p>\n<h4>Ajax Call<\/h4>\n<p>N\u00e4r vi klickar p\u00e5 Ladda mer kommer det att ringa <code>ajax.php<\/code>filen. Den h\u00e4r filen ger oss n\u00e4sta upps\u00e4ttning poster som sedan kommer att bifogas den befintliga listan. Skriv JavaScript-koden nedan i slutet av <code>index.php<\/code>filen.<\/p>\n<pre><code>&lt;script&gt;\nvar httpRequest, nextPageToken;\ndocument.getElementById(\"loadmore\").addEventListener('click', makeRequest);\nfunction makeRequest() {\n\u00a0\u00a0\u00a0\u00a0httpRequest = new XMLHttpRequest();\n\u00a0\u00a0\u00a0\u00a0nextPageToken = document.querySelector('.nextpagetoken').value;\n\u00a0\u00a0\u00a0\u00a0if (!httpRequest) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Giving up: Cannot create an XMLHTTP instance');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0httpRequest.onreadystatechange = function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (this.readyState == 4 &amp;&amp; this.status == 200) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var list = JSON.parse(this.responseText);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(var i in list) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(list[i].title != undefined &amp;&amp; list[i].id != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var newElement = document.createElement('li');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newElement.innerHTML = '&lt;li&gt;'+ list[i].title +'('+ list[i].id +')&lt;\/li&gt;';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.querySelector('.video-list').appendChild(newElement);\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\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(list[list.length-1].nextPageToken != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.querySelector('.nextpagetoken').value = list[list.length-1].nextPageToken;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var loadmore = document.getElementById(\"loadmore\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0loadmore.parentNode.removeChild(loadmore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0httpRequest.open('GET', 'ajax.php?channel=&lt;?php echo $_GET['channel']; ?&gt;&amp;max_result=&lt;?php echo $_GET['max_result']; ?&gt;&amp;nextPageToken='+nextPageToken, true);\n\u00a0\u00a0\u00a0\u00a0httpRequest.send();\n}\n&lt;\/script&gt;<\/code><\/pre>\n<p>F\u00f6r den h\u00e4r artikeln anv\u00e4nder jag vanilj JavaScript f\u00f6r ajax-samtal och l\u00e4gger till svaret till DOM. Till ajax-filen skickar jag v\u00e4rdena f\u00f6r kanal-id, max_result och &#8217;nextPageToken&#8217;.<\/p>\n<p>I ajax-filen med hj\u00e4lp av dessa parametrar bygger vi API-URL: n. N\u00e4r vi f\u00e5r ett svar skapar vi ett JSON-objekt som inneh\u00e5ller videoinformation och skickar tillbaka det. Till den sista JSON l\u00e4gger jag ocks\u00e5 till ett &#8217;nextPageToken&#8217; -v\u00e4rde f\u00f6r att f\u00e5 n\u00e4sta upps\u00e4ttning poster vid efterf\u00f6ljande Ajax-samtal.<\/p>\n<p><strong>ajax.php<\/strong><\/p>\n<pre><code>&lt;?php\nrequire_once \"config.php\";\n\u00a0\n$url = \"https:\/\/www.googleapis.com\/youtube\/v3\/search?channelId=\". $_GET['channel'] .\"&amp;order=date&amp;part=snippet&amp;type=video&amp;maxResults=\". $_GET['max_result'] .\"&amp;pageToken=\". $_GET['nextPageToken'] .\"&amp;key=\". GOOGLE_API_KEY;\n\u00a0\n$arr_list = getYTList($url);\n\u00a0\n$arr_result = array();\nif (!empty($arr_list)) {\n\u00a0\u00a0\u00a0\u00a0foreach ($arr_list-&gt;items as $yt) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array_push($arr_result, ['title' =&gt; $yt-&gt;snippet-&gt;title, 'id' =&gt; $yt-&gt;id-&gt;videoId]);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0if (isset($arr_list-&gt;nextPageToken)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array_push($arr_result, ['nextPageToken' =&gt; $arr_list-&gt;nextPageToken]);\n\u00a0\u00a0\u00a0\u00a0}\n}\n\u00a0\necho json_encode($arr_result);<\/code><\/pre>\n<p>V\u00e5r JavaScript-kod f\u00e5r detta JSON-svar och l\u00e4gger till resultatet i den befintliga listan med YouTube-videor. Denna process forts\u00e4tter tills vi hittar v\u00e4rdet f\u00f6r &#8217;nextPageToken&#8217;.<\/p>\n<p>Jag hoppas att du f\u00f6rst\u00e5r hur du f\u00e5r en lista med videor fr\u00e5n en YouTube-kanal. Dela dina tankar eller f\u00f6rslag i kommentarsektionen nedan.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-anvander-youtube-api-for-att-ladda-upp-video-pa-youtube-kanal\/\" title=\"Hur man anv\u00e4nder YouTube API f\u00f6r att ladda upp video p\u00e5 YouTube-kanal\">Hur man anv\u00e4nder YouTube API f\u00f6r att ladda upp video p\u00e5 YouTube-kanal<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/skaffa-youtube-videolista-med-nyckelord-med-hjalp-av-youtube-search-api\/\" title=\"S\u00e5 h\u00e4r f\u00e5r du YouTube-videolista med nyckelord med hj\u00e4lp av YouTube Search API\">S\u00e5 h\u00e4r f\u00e5r du YouTube-videolista med nyckelord med hj\u00e4lp av YouTube Search API<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-lagger-till-google-oauth-inloggning-pa-webbplatsen-med-php\/\" title=\"Hur man l\u00e4gger till Google OAuth-inloggning p\u00e5 webbplatsen med PHP\">Hur man l\u00e4gger till Google OAuth-inloggning p\u00e5 webbplatsen med PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I den h\u00e4r artikeln studerar vi hur man f\u00e5r en lista \u00f6ver YouTube-videor med hj\u00e4lp av YouTube API. Du kanske vill ha en lista med videor f\u00f6r att visa den p\u00e5 en webbplats<\/p>\n","protected":false},"author":1,"featured_media":21640,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[279],"tags":[850],"class_list":["post-28852","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/28852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=28852"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/28852\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/21640"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=28852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=28852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=28852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}