Cómo obtener el thumbnail de un vídeo de Youtube o Vimeo

25 Ene 2019

thumbnail php vimeo youtube curl allow_url_fopen web diseno internet

(6 votos)

Obtener el thumbnail de un vídeo de Youtube o Vimeo es muy sencillo. Existen muchas páginas en Internet donde podemos introducir la URL del vídeo y se nos mostrará el/los thumbnails correspondientes. Pero ¿y si queremos crear una página donde enlazar nuestros vídeos con su correspondiente thumbnail? ¿Por ejemplo para crear una galería de vídeos personalizada?

Si queréis aprender como hacerlo utilizando PHP, no lo dudéis y seguid leyendo este tutorial, ¡os gustará!. El tutorial requiere tener un nivel de conocimiento de PHP medio.

⬇️ Compra en Amazon el hardware que utilizo ⬇️

💻 Ordenador Portátil: Descúbrelo aquí
🖥️🖥️ Monitores: Mis 2 súper monitores
⌨️ Teclado: Mini teclado + Lector DNIe
🖱️ Ratón: Mi ratón programable
🎧 Auriculares: Súper Auriculares TOP!
🖨️ Impresora: Mi fantástica impresora
🗄️ NAS Backup: Mi NAS para Backups
🔌 HUB USB: Mi HUB para puertos USB
📱 Smartphone: Mi Smartphone
📲 Tablet: Mi tablet para viajes
⌚ Smartwatch: Mi Smartwatch favorito
📹 Cámara deportiva: Mi cámara para deportes

🔥 ¡DESCÚBRELOS! 🔥

Contenido

¿QUÉ ES UN THUMBNAIL?

Un thumbnail es una imagen de tamaño reducido del original. Los thumbnails se utilizan en muchas plataformas y cada una tiene un tamaño predefinido, por ejemplo:

Google Image Search: para Google Image Search, se recomienda un tamaño de 177 píxeles. Sin embargo, también se pueden utilizar thumbnails más pequeños.
Amazon: En la página de inicio se utilizan thumbnails con una altura de 200 píxeles y un ancho variable. Las imágenes de vista previa en las páginas de categoría tienen una altura de 150 píxeles.
YouTube: los thumbnails de escritorio de YouTube tienen un tamaño de 210 x 118 píxeles en la página de inicio. Esto corresponde al formato de imagen 16:9 común. Para las sugerencias de vídeo a la derecha de un vídeo en ejecución, se utilizan miniaturas con un tamaño de 168 x 94 píxeles.
Pinterest: se orienta con la representación de imágenes de vista previa en el ancho de la imagen. Esto es fijo y tiene 236 píxeles. Cuanto más ancha sea la pantalla del espectador, más imágenes se mostrarán una al lado de la otra.

Thumbnail significa "uña del pulgar"

La principal ventaja de los thumbnails es el reducido tamaño del archivo en comparación con la imagen original. Si el contenido audiovisual en un sitio web se muestra con miniaturas, los tiempos de carga pueden ser muchísimo más rápidos.

El reducido tamaño de archivo de los thumbnails permite a los operadores de sitios web ofrecer a los visitantes una gran cantidad de contenido de un vistazo, sin aumentar el tiempo de carga de la página. Al hacer clic en la miniatura, por ejemplo, accederá al contenido multimedia en tamaño original, que puede abrirse en una nueva pestaña o ventana. Otras ventajas son:

Ahorro de espacio: las imágenes de vista previa permiten a los usuarios de Internet presentar una visión general de los diferentes contenidos multimedia en un espacio reducido.
Útil para el usuario: las imágenes tienen la gran ventaja de que pueden capturarse muy rápidamente. Los thumbnails estructuran un sitio web para que los usuarios puedan orientarse con mayor rapidez.
Interactividad: los thumbnails incitan al usuario a interactuar con el sitio web, generalmente haciendo clic en una miniatura.

Los motores de búsqueda y programas de procesamiento y gestión de imágenes suelen generar automáticamente los thumbnails. En especial, los usuarios que se conectan a Internet con dispositivos móviles como tabletas o smartphones se benefician de un tamaño de archivo más pequeño y de la claridad del sitio web al que acceden.

1.- REQUERIMIENTOS

Los requerimientos para seguir este tutorial son los siguientes:

Servidor Apache/IIS con soporte PHP y Curl
Conexión a Internet

2.- FORMULARIO HTML

El formulario HTML de entrada de datos, constará de un "input text" y un botón de enviar. Como existen dos posibilidades, (que explicaré mas adelante), el código está duplicado en función de si es posible usar curl o allow_url_fopen. Si, lo sé, podría haber duplicado solamente la línea del "submit" y ahorrarme 2 lineas extras de código. El código es sencillo, un "input text" y un "submit" ¡muy sencillo!"

<form method="post" action="<? php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
     <? php
     if (ini_get('allow_url_fopen')) {
         echo "URL: <input type=\"text\" name=\"url\" value=\"$url\" autocomplete=\"off\">";
         echo "<br><br>";
         echo "<input type=\"submit\" name=\"submit\" value=\"OBTENER THUMBNAILS FILE_GET_CONTENTS\">";
     } else {
         echo "URL: <input type=\"text\" name=\"url\" value=\"$url\" autocomplete=\"off\">";
         echo "<br><br>";
         echo "<input type=\"submit\" name=\"submit\" value=\"OBTENER THUMBNAILS CURL\">";
     }
     ?>
</form>

Importante: Si copias el código de arriba, debes eliminar el espacio que hay en todas las etiquetas "<? php"

3.- FUNCIÓN PARA YOUTUBE

Cuando hagamos click en "Obtener Thumbnails", se analizará si el host es de Youtube o de Vimeo. Esta función se llama "video_image" y será llamada solamente si nuestro servidor acepta "allow_url_fopen":

function video_image($url){
    $image_url = parse_url($url);

    if($image_url['host'] == 'www.youtube.com' || $image_url['host'] == 'youtube.com'){
        $array = explode('&', $image_url['query']);
        echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/1.jpg\"></img></p>";
        echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/0.jpg\"></img></p>";
    } else if($image_url['host'] == 'www.vimeo.com' || $image_url['host'] == 'vimeo.com'){
        $hash = file_get_contents('https://vimeo.com/api/v2/video/'.substr($image_url['path'], 1).'.json');
        $hash = json_decode($hash);
        echo "<p><img src=\"" . $hash[0]->thumbnail_small . "\"></img></p>";
        echo "<p><img src=\"" . $hash[0]->thumbnail_medium . "\"></img></p>";
        echo "<p><img src=\"" . $hash[0]->thumbnail_large . "\"></img></p>";
    } else {
        echo "<div id='not_supported'>Video Provider Not Supported. Please, check URL.</div>";
    }
}

4.- FUNCIÓN PARA VIMEO

Cuando hagamos click en "Obtener Thumbnails", se analizará si el host es de Youtube o de Vimeo. Esta función se llama "video_image_curl" y será llamada solamente si nuestro servidor NO acepta "allow_url_fopen" y ten4emos que usar Curl. Solamente, en el caso de Vimeo se usa Curl, para youtube no es necesario el uso de Curl.

function video_image_curl($url) {
    $image_url = parse_url($url);

    if($image_url['host'] == 'www.youtube.com' || $image_url['host'] == 'youtube.com'){
        $array = explode('&', $image_url['query']);
        echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/1.jpg\"></img></p>";
        echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/0.jpg\"></img></p>";
    } else if($image_url['host'] == 'www.vimeo.com' || $image_url['host'] == 'vimeo.com'){
        $url = 'https://vimeo.com/api/v2/video/'.substr($image_url['path'], 1).'.json';
        $curl = curl_init($url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_TIMEOUT, 30);
        curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
        $return = curl_exec($curl);
        curl_close($curl); 
        $return = json_decode($return);
        echo "<p><img src=\"" . $return[0]->thumbnail_small . "\"></img></p>";
        echo "<p><img src=\"" . $return[0]->thumbnail_medium . "\"></img></p>";
        echo "<p><img src=\"" . $return[0]->thumbnail_large . "\"></img></p>";
    } else {
        echo "<div id='not_supported'>Video Provider Not Supported. Please, check URL.</div>";
    }
}

5.- CURL vs ALLOW_URL_FOPEN

La condición que evalúa si el servidor acepta allow_url_fopen es la siguiente. Podemos ver que si allow_url_fopen está permitido, se lanzará la función video_image($url), en caso contrario se llamará a video_image_curl($url):

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    if (!empty($_POST["url"])) {
        $url = $_POST["url"];
    }

    if (ini_get('allow_url_fopen')) {
        video_image($url);
    } else {
        video_image_curl($url);
    }
}

Thumbnails Youtube o Vimeo Vimeo con allow_url_fopen permitido

Thumbnails Youtube o Vimeo Youtube con allow_url_fopen permitido

Thumbnails Youtube o Vimeo Usando Curl para Vimeo

Thumbnails Youtube o Vimeo Usando Curl para Youtube (Realmente no se usa curl para Youtube)

6.- FICHERO COMPLETO

El fichero podemos adornarlo un poco con un poco de CSS para que quede más bonito. Por ejemplo, os dejo un código de ejemplo del fichero final:

<!--
Author: Raúl Prieto Fernández
Website: https://www.raulprietofernandez.net/
Contact: https://www.raulprietofernandez.net/contactar
Subject: Website developed in PHP to get thumbnails from vimeo or youtube.
-->
<!DOCTYPE HTML> 
<html>
<head>
<style>
body {
    text-align: center;
    margin:0px;
    padding:0px;
    font-family: sans-serif;
}
#alert {
    width: 100%;
    background-color: #fefccb;
    line-height: 30px;
    vertical-align: middle;
    margin-bottom: 20px;
}
</style>
</head>

<body>
<div id="alert">
ALLOW_URL_FOPEN FORBIDDEN. USING CURL.
</div> 
<h1>Obtener el Thumbnail de un video de Vimeo/Youtube</h1>

    <form method="post" action="<? php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    <? php
    if (ini_get('allow_url_fopen')) {
        echo "URL: <input type=\"text\" name=\"url\" value=\"$url\" autocomplete=\"off\">";
        echo "<br><br>";
        echo "<input type=\"submit\" name=\"submit\" value=\"OBTENER THUMBNAILS FILE_GET_CONTENTS\">";
    } else {
        echo "URL: <input type=\"text\" name=\"url\" value=\"$url\" autocomplete=\"off\">";
        echo "<br><br>";
        echo "<input type=\"submit\" name=\"submit\" value=\"OBTENER THUMBNAILS CURL\">";
    }
    ?>
    </form>
    <br>
    <strong>Ejemplos:</strong>
    <br>
    <br>https://www.youtube.com/watch?v=_t__LhOZmHs
    <br>
    https://vimeo.com/311618435
    <br><br>
    <? php
    if (!empty($_POST["url"])) {
        echo "<h2>URL Introducida:</h2>";
        echo $_POST["url"];
    }
    ?>

    <? php
    function video_image($url){
    $image_url = parse_url($url);

        if($image_url['host'] == 'www.youtube.com' || $image_url['host'] == 'youtube.com'){
            $array = explode('&', $image_url['query']);
            echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/1.jpg\"></img></p>";
            echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/0.jpg\"></img></p>";
        } else if($image_url['host'] == 'www.vimeo.com' || $image_url['host'] == 'vimeo.com'){
            $hash = file_get_contents('https://vimeo.com/api/v2/video/'.substr($image_url['path'], 1).'.json');
            $hash = json_decode($hash);
            echo "<p><img src=\"" . $hash[0]->thumbnail_small . "\"></img></p>";
            echo "<p><img src=\"" . $hash[0]->thumbnail_medium . "\"></img></p>";
            echo "<p><img src=\"" . $hash[0]->thumbnail_large . "\"></img></p>";
        } else {
            echo "<div>Video Provider Not Supported. Please, check URL.</div>";
        }
    }

    function video_image_curl($url) {
    $image_url = parse_url($url);

        if($image_url['host'] == 'www.youtube.com' || $image_url['host'] == 'youtube.com'){
            $array = explode('&', $image_url['query']);
            echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/1.jpg\"></img></p>";
            echo "<p><img src=\"http://img.youtube.com/vi/" . substr($array[0], 2). "/0.jpg\"></img></p>";
        } else if($image_url['host'] == 'www.vimeo.com' || $image_url['host'] == 'vimeo.com'){
            $url = 'https://vimeo.com/api/v2/video/'.substr($image_url['path'], 1).'.json';
            $curl = curl_init($url);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($curl, CURLOPT_TIMEOUT, 30);
            curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
            $return = curl_exec($curl);
            curl_close($curl); 
            $return = json_decode($return);
            echo "<p><img src=\"" . $return[0]->thumbnail_small . "\"></img></p>";
            echo "<p><img src=\"" . $return[0]->thumbnail_medium . "\"></img></p>";
            echo "<p><img src=\"" . $return[0]->thumbnail_large . "\"></img></p>";
        } else {
            echo "<div>Video Provider Not Supported. Please, check URL.</div>";
        }
    }

    if ($_SERVER["REQUEST_METHOD"] == "POST") {

    if (!empty($_POST["url"])) {
        $url = $_POST["url"];
    }

    if (ini_get('allow_url_fopen')) {
        video_image($url);
    } else {
        video_image_curl($url);
    }
    }

?>

<a href="https://www.raulprietofernandez.net/">https://www.raulprietofernandez.net</a>

</body>
</html>

7.- CONSIDERACIONES DE SEGURIDAD

Por seguridad, muchos hosting tienen allow_url_fopen deshabilitado. Por seguridad es recomendable y en caso de tenerlo deshabilitado, hay que usar curl para poder descargar los thumbnails.

8.- DEMO ONLINE

Si queréis ver una demo online, podéis hacerlo en los siguientes enlaces. Aunque hay 2 urls, el fichero es exactamente el mismo, pero en el caso de curl, se ha creado un fichero php.ini en el mismo directorio indicando que no se permite "allow_url_fopen" con la siguiente línea: allow_url_fopen=Off, forzando de esta manera a usar curl (solamente necesario para Vimeo):

VER DEMO CON ALLOW URL FOPEN

VER DEMO CON CURL

ENJOY!