Cómo incrustar sólo una parte de un vÃdeo de YouTube
- Internet (Tutoriales y trucos)
- Posted
- ¡Escribe el primer comentario!
- Visto 7644 veces
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
Lo último de Jesús Cáceres
- Falla en los plugins Elementor y Beaver Builder permite que cualquiera piratee sitios web WordPress
- El 78% de la gente olvidó una contraseña en los últimos 90 dÃas
- Nuevo ataque PlunderVolt apunta a Intel SGX ajustando el voltaje de la CPU
- El ransomware Snatch reinicia Windows en Modo seguro para evitar el antivirus
- ¿Qué es una estafa telefónica Wangiri o 'One Ring'?
Deja tus comentarios
- Publicar comentario como invitado. RegÃstrate o ingresaa tu cuenta