Solemos utilizar las miniaturas para mostrar la vista previa de uno o varios contenidos multimedia en la ventana del explorador. Mediante las miniaturas, estamos informando al usuario de lo que se va a encontrar antes de adentrarse en el contenido en cuestión. En el desarrollo web también se utilizan las miniaturas para el mismo cometido. Por ejemplo, las tiendas online muestran las imágenes de sus productos mediante miniaturas. Además del propósito de informar al usuario, también reducen muy mucho el tiempo de carga en dichos casos. Las plataformas de vÃdeo también muestran miniaturas para que el usuario sepa, sin ver el vÃdeo, de lo que puede tratar.
En este tutorial, mostraremos la miniatura de un vÃdeo de YouTube simplemente con su URL. La URL la recibiremos a través de un campo input que agregaremos a un formulario. Ya en PHP, extraeremos el ID del vÃdeo y lo utilizaremos para conformar la URL de la miniatura. Si quieres mostrar la miniatura dentro de una galerÃa de tus vÃdeos favoritos de YouTube, puedes utilizar también este ejemplo.
Obteniendo la URL del vÃdeo a través de un formulario
Utilizaremos este código HTML para que el usuario pueda ingresar la URL del vÃdeo de YouTube. Después del envÃo del formulario, procesaremos la URL en el script PHP para mostrar la miniatura de la imagen.
<h2>Show Image Thumbnail by YouTube Video URL using PHP</h2> <div class="frm-video-image-thumbnail"> <form method="post" action=""> <input class="input-field" type="text" name="url" placeholder="Enter URL"><br /> <br /> <input class="btn-submit" type="submit" name="submit" value="Submit"> </form> <div class="thumbnail"> <?php if (! empty($videoId)) { ?> <h3 class="thumb-head">Thumbnail Image:</h3> <img src="https://img.youtube.com/vi/<?php echo $videoId; ?>/hqdefault.jpg" width="250" /> <?php } ?> </div> </div>
Confeccionar la URL de la miniatura mediante la URL de YouTube
El código PHP lee la URL del vÃdeo que hemos recibido a través del formulario HTML. Para ello extraemos el ID único del vÃdeo mediante la función explode(). Una vez que tenemos el ID del vÃdeo lo almacenamos la variable $videoID para después utilizarla en nuestro HTML y asÃ, mostrar la imagen.
<?php if (isset($_POST['submit'])) { $url = $_POST['url']; $value = explode("v=", $url); $videoId = $value[1]; } ?>