{"id":28630,"date":"2021-05-29T15:15:00","date_gmt":"2021-05-29T12:15:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28630"},"modified":"2021-10-17T16:36:47","modified_gmt":"2021-10-17T13:36:47","slug":"api-de-youtube-como-obtener-una-lista-de-videos-de-youtube-de-su-canal","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/api-de-youtube-como-obtener-una-lista-de-videos-de-youtube-de-su-canal\/","title":{"rendered":"API de YouTube: c\u00f3mo obtener una lista de videos de YouTube de su canal"},"content":{"rendered":"<p>Recientemente, uno de nuestros lectores pregunt\u00f3 c\u00f3mo obtener una lista de videos de un canal de YouTube. Quer\u00edan mostrar una lista de sus videos en formato tabular. En este art\u00edculo, estudiamos c\u00f3mo usar la API de YouTube para obtener una lista de videos de YouTube de su canal.<\/p>\n<p>Un usuario puede ver todos sus videos en el propio sitio web de YouTube. Pero si desea compartir la lista de videos con otra persona, debe mantener estos datos sin conexi\u00f3n. Por otro lado, algunos usuarios pueden querer mostrar una lista de videos en su sitio web.<\/p>\n<p>Dicho esto, echemos un vistazo a c\u00f3mo obtener una lista de videos de YouTube usando la API de YouTube.<\/p>\n<p><strong>Nota:<\/strong> Con el c\u00f3digo de este art\u00edculo, tambi\u00e9n puede obtener una lista de videos de cualquier canal de YouTube que proporcione una identificaci\u00f3n de canal de YouTube v\u00e1lida.<\/p>\n<h3>Obtenga su clave de API<\/h3>\n<p>Para comenzar con la API de YouTube, primero debe crear una clave API desde su cuenta de Google. Esta clave es necesaria al interactuar con las API de YouTube. Sin esta clave, YouTube considera que todas las solicitudes de API entrantes no est\u00e1n autorizadas.<\/p>\n<p>Siga los pasos a continuaci\u00f3n para crear una clave API.<\/p>\n<ul>\n<li>Vaya a la Consola para desarrolladores de 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>Crea un nuevo proyecto. Tambi\u00e9n puede seleccionar un proyecto existente.<\/li>\n<li>Escriba un nombre de su proyecto. Google Console crear\u00e1 un ID de proyecto \u00fanico.<\/li>\n<li>Despu\u00e9s de crear un proyecto, aparecer\u00e1 en la parte superior de la barra lateral izquierda.<\/li>\n<li>Haga clic en Biblioteca. Ver\u00e1 la lista de API de Google.<\/li>\n<li>Habilita la API de datos de YouTube.<\/li>\n<li>Haga clic en Credenciales. Seleccione la clave API en Crear credenciales.<\/li>\n<li>Copie la clave de API. Lo necesitaremos en un momento.<\/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=\"API de YouTube: c\u00f3mo obtener una lista de videos de YouTube de su canal\" ><\/a><\/p>\n<h3>Obtenga una lista de videos de YouTube<\/h3>\n<p>Una vez que est\u00e9 listo con la clave API, cree 3 archivos en su proyecto. Estos archivos representan los m\u00e9todos de configuraci\u00f3n y ayuda, el manejo de Ajax y muestran el resultado final.<\/p>\n<ul>\n<li><code>config.php<\/code>: En este archivo configuramos la clave API como una constante. Tambi\u00e9n tiene un m\u00e9todo auxiliar que da una llamada a la API y recibe una respuesta.<\/li>\n<li><code>ajax.php<\/code>: Este archivo llamar\u00e1 a la API para obtener el siguiente conjunto de resultados siempre que se obtengan los resultados m\u00e1ximos para devolver.<\/li>\n<li><code>index.php<\/code>: Contiene un formulario, c\u00f3digo para llamada Ajax, muestra la lista de videos.<\/li>\n<\/ul>\n<p>En el <code>config.php<\/code>archivo, declaremos la clave API como una variable constante. Tambi\u00e9n definimos el m\u00e9todo auxiliar que interact\u00faa con los puntos finales de la API.<\/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>Aseg\u00farese de reemplazar el marcador de posici\u00f3n con la clave API real. Tambi\u00e9n necesita tener la extensi\u00f3n cURL habilitada en su servidor.<\/p>\n<h4>Crear un formulario<\/h4>\n<p>A continuaci\u00f3n, necesitamos un formulario simple donde podamos ingresar la identificaci\u00f3n del canal de YouTube y la cantidad de videos para regresar. La API de YouTube devuelve un m\u00e1ximo de 50 videos a la vez.<\/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>Tras el env\u00edo del formulario, env\u00edo la identificaci\u00f3n del canal y max_result mediante el m\u00e9todo GET. Entonces, en la parte superior del mismo archivo, escribir\u00e9 el c\u00f3digo de la siguiente manera:<\/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>Este c\u00f3digo incluye un archivo de configuraci\u00f3n, obtenga los par\u00e1metros, cree una URL de API y luego p\u00e1selo al m\u00e9todo auxiliar que creamos en el paso anterior. Para mostrar el resultado, agregue el siguiente c\u00f3digo despu\u00e9s de su formulario.<\/p>\n<p>No me voy a centrar en el dise\u00f1o de una lista. El objetivo principal del tutorial es buscar videos de YouTube. Lo mostrar\u00e9 en el formato de lista.<\/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>Aqu\u00ed estamos recorriendo los videos e imprimiendo el t\u00edtulo del video y la identificaci\u00f3n del video. Si obtenemos el valor de &#8216;nextPageToken&#8217;, estamos agregando un campo oculto y un elemento Cargar m\u00e1s. Esto se debe a que si tiene m\u00e1s de 50 videos en el canal, podemos obtener el siguiente conjunto de registros usando este valor &#8216;nextPageToken&#8217;. Despu\u00e9s de esto, debemos realizar una llamada Ajax con el clic de Cargar m\u00e1s.<\/p>\n<h4>Llamada Ajax<\/h4>\n<p>Cuando hagamos clic en Cargar m\u00e1s, llamar\u00e1 al <code>ajax.php<\/code>archivo. Este archivo nos dar\u00e1 el siguiente conjunto de registros que luego se agregar\u00e1n a la lista existente. Escriba el siguiente c\u00f3digo JavaScript al final del <code>index.php<\/code>archivo.<\/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>Para este art\u00edculo, estoy usando JavaScript vanilla para la llamada ajax y agrego la respuesta al DOM. Al archivo ajax estoy enviando los valores de id de canal, max_result y &#8216;nextPageToken&#8217;.<\/p>\n<p>En el archivo ajax con la ayuda de estos par\u00e1metros, construimos la URL de la API. Al recibir una respuesta, crearemos un objeto JSON que contiene informaci\u00f3n de video y lo enviaremos de vuelta. Para el JSON final, tambi\u00e9n agrego un valor &#8216;nextPageToken&#8217; para obtener el siguiente conjunto de registros en llamadas Ajax posteriores.<\/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>Nuestro c\u00f3digo JavaScript recibe esta respuesta JSON y agrega el resultado a la lista existente de videos de YouTube. Este proceso contin\u00faa hasta que encontramos el valor de &#8216;nextPageToken&#8217;.<\/p>\n<p>Espero que entiendas c\u00f3mo obtener una lista de videos de un canal de YouTube. Comparta sus pensamientos o sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-usar-la-api-de-youtube-para-cargar-videos-en-el-canal-de-youtube\/\" title=\"C\u00f3mo usar la API de YouTube para cargar videos en el canal de YouTube\">C\u00f3mo usar la API de YouTube para cargar videos en el canal de YouTube<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/obtenga-la-lista-de-videos-de-youtube-por-palabras-clave-usando-la-api-de-busqueda-de-youtube\/\" title=\"C\u00f3mo obtener la lista de videos de YouTube por palabras clave usando la API de b\u00fasqueda de YouTube\">C\u00f3mo obtener la lista de videos de YouTube por palabras clave usando la API de b\u00fasqueda de YouTube<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-agregar-el-inicio-de-sesion-de-google-oauth-en-un-sitio-web-con-php\/\" title=\"C\u00f3mo agregar el inicio de sesi\u00f3n de Google OAuth en un sitio web con PHP\">C\u00f3mo agregar el inicio de sesi\u00f3n de Google OAuth en un sitio web con PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo, estudiamos c\u00f3mo obtener una lista de videos de YouTube usando la API de YouTube. Es posible que desee una lista de videos para mostrarla en un sitio web.<\/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":[271],"tags":[849],"class_list":["post-28630","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/28630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=28630"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/28630\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/21640"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=28630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=28630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=28630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}