Cómo incrustar sólo una parte de un vídeo de YouTube

Internet (Tutoriales y trucos)
Posted May 25, 2013
¡Escribe el primer comentario!
Visto 7542 veces

Modificado por última vez en Domingo, 11 Agosto 2013 00:43

(0 votos)

Dos casos posibles: sólo tiempo de inicio, y tiempo de inicio y final del vídeo

A veces es posible que desees insertar en tus páginas web sólo una parte de un vídeo de YouTube.

Por ejemplo, vas a embeber un vídeo de YouTube, pero quieres que el espectador se centre en una escena en particular que se inicia en el segundo 'x' y termina en el segundo 'y'. Cuando la escena ha terminado, el clip incrustado debería dejar de reproducirse con independencia de la duración del vídeo.

Aquí dejo dos sencillas maneras para ayudarte a integrar una parte de un vídeo de YouTube:

Caso A: Insertar vídeos de YouTube con el tiempo de inicio

Se trata de un escenario en el que se especifica un tiempo de inicio para el vídeo integrado y se deja reproducir hasta el final. Aquí puedes utilizar el código de inserción estándar y añadir el parámetro de hora de inicio a la url de YouTube como se ilustra en el siguiente ejemplo:

<iframe width="500" height="300" frameborder="0" allowfullscreen src="/ http://www.youtube.com/embed/VIDEO_ID#t=1234s"></iframe>

Cambia VIDEO_ID con el ID real de tu vídeo de YouTube y reemplaza 1234s con la hora de inicio (en segundos). Por ejemplo, si deseas que el vídeo inicie la reproducción en la marca 03:24 (mm:ss), deberás especificar el tiempo como t=204s (60*3 + 24).

Caso B: Insertar vídeos de YouTube con tiempo de inicio y final

El siguiente video de YouTube de un evento de Apple tiene más de una hora de duración, pero sólo se ha incorporado el segmento de los 2 minutos más interesantes (22:10 - 24:26), donde Steve Jobs anunció por primera vez el iPhone.

El código de inserción estándar de YouTube no admite el parámetro de tiempo final, pero podemos hacer uso de la API JavaScript de YouTube para incrustar una parte de cualquier vídeo de YouTube. La API ofrece las funciones loadVideoById y cueVideoById las cuales permiten especificar una hora de inicio y fin del vídeo incrustado. Sin aburrirte con los detalles técnicos, mira el código de inserción estándard:

<iframe width="560" height="315" src="http://www.youtube.com/embed/t2MOwQ089eQ" frameborder="0" allowfullscreen></iframe>

Y este sería tu nuevo código de inserción:

<div videoID="t2MOwQ089eQ" startTime="1330" endTime="1466" height="315" width="560" id="youtube-player"></div>
<script src="http://www.xn--apaados-6za.es/youtube-embed.js"></script>

Tiempo que queremos mostrar (22:10 - 24:26) = (startTime=1330 (60*22 + 10) - endTime=1466 (60*24 + 26)

Sólo tienes que sustituir según tus necesidades el ID del vídeo, la hora de inicio (en segundos), la hora de finalización (en segundos), la altura y ancho del reproductor (en píxeles). Observa el código fuente para aprender cómo se controla la reproducción a través de la API de YouTube. En este enlace podéis ver el código javascript proporcionado por Amit Agarwal en www.labnol.org.

Además, si estás planeando utilizar este código de inserción en un sitio muy popular te recomiendo utilices un sitio como googlecode.com que puede ofrecer un ancho de banda ilimitado, entonces sustituye la segunda línea del código de arriba por esta:

<script src="http://labnol.googlecode.com/files/youtube-embed.js"></script>

NOTA: Después de estar probando toda la tarde parece que con esta fórmula no se puede insertar más de un vídeo en la misma página, así que una prueba que he hecho con un vídeo mío de las vaquillas en la playa durante las Fiestas de Peníscola lo podéis ver en el enlace anterior