• Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
Mi Blog

Espera, espera... ¿no has visitado todavía mi portfolio?

Entra y descubre algunos de
mis trabajos...
Fotografías
Edición de Vídeos
Diseño web
y + cosas...

 

 

 

x

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

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

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.

 

¿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 VimeoVimeo con allow_url_fopen permitido

 

 

Thumbnails Youtube o VimeoYoutube con allow_url_fopen permitido

 

 

Thumbnails Youtube o VimeoUsando Curl para Vimeo

 

 

Thumbnails Youtube o VimeoUsando 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!


Raúl Prieto Fernández

Sitio Web: /

Si quieres ir rápido, ve solo. Si quieres llegar lejos, ve acompañado.

Escribir un comentario

Código de seguridad
Refescar

LOGIN / ENTRAR

BUSCAR EN EL BLOG

TWITTER TIMELINE

Booking.com

ENCUESTA

¿Cual es el mejor Sistema Operativo?

Como es lógico, esta web utiliza cookies propias y de terceros para elaborar información estadística y mostrar publicidad personalizada a través del análisis de tu navegación, conforme a la política de cookies.

  Si continúas navegando, aceptas su uso.