Slimbox | HNKweb

↑↓

16/08Mostrando los Vídeos de forma más Ligera

A partir de ahora voy a intentar usar el método que utilicé en el post de Doug Henning para mostrar los videos en el blog.

Básicamente no mostrar el flash con el video directamente, sino que se muestra una imagen y al pulsar sobre ella lanza el Slimbox con el video en cuestión.

Para montar esto he usado la versión Slimbox Extended y le he añadido lo siguiente al script:

Ver Texto Plano

JAVASCRIPT:

// En las líneas 184 y 192
this.preload.s = this.matchOrDefault(rev, new RegExp(“scroll=(\d+%?)”, “i”), 1);
// En la línea 216
var ss = (this.preload.s == 1) ? “yes” : “no”;
// En la línea 219
…scrolling:ss…

Así puedo usar la propiedad “rev” para indicarle, además del ancho y alto, si quiero que se vean las barras de scroll.

El segundo paso es crear la página que cargará el video. Para ello, nos creamos un PHP con el siguiente contenido:

Ver Texto Plano

PHP:

<html>
<head>
<title>YouTube Video</title>
</head>
<body style=“margin:0;padding:0;”>
<?php
if (isset($_GET[‘v’])) {
$video = $_GET[‘v’];
?>
<object width=“480” height=“368” type=“application/x-shockwave-flash” data=“http://www.youtube.com/v/”>
<param name=“movie” value=“http://www.youtube.com/v/” />
</param></object>
<?php } ?>
</body>
</html>

Con esto ya solo nos quedaría meter en el post el código necesario para lanzar el Slimbox con el video. Como todos los videos de YouTube tienen una imagen “default.jpg” asociada, lo único que variará será el código del video. Un ejemplo sería:

Ver Texto Plano

HTML:

<! — Modificariamos el código ‘JsTgQb7qcmo’ por el de nuestro video — >
<a href=“http://www.hnkweb.com/video/youtube.php?v=JsTgQb7qcmo” rev=“width=480, height=370, scroll=0” rel=“lightbox[]” title=“Video de YouTube”>
<img src=“http://img.youtube.com/vi/JsTgQb7qcmo/default.jpg” alt=“Pulsa para ver el video” />
</a>