Uso de la API de YouTube para manipulación de videos embebidos
Posteado Por CatrianEl uso de videos de YouTube embebidos en nuestras páginas web es algo común, ya sea que se incluyan en línea dentro del contenido o como apoyo a otros elementos a través de ventanas emergentes. En muchas ocasiones la visualización de estos videos se genera a través de un botón que abre el video en una nueva capa y, tras su reproducción, la capa y el video quedan en pantalla, obstruyendo la visibilidad del resto del contenido de la página. Gracias a la API de YouTube, es posible controlar tanto el video como otros componentes de la página que se verán afectados por la reproducción.
Como ejemplo, tenemos este caso:
- Un botón debe desplegar una capa con el video.
- Dentro de esta capa tenemos un «cerrar» que permite ocultar la capa y al mismo tiempo debe detener la reproducción.
- Al finalizar la reproducción del video, la capa se debe ocultar de forma automática.
Cuando usamos videos embebidos a través de la etiqueta <iframe> sólo podemos activar las dos primeras funcionalidades, pero para activar la tercera, es necesario hacer uso de la API.
Uso de la API de YouTube
Lo primero que debemos hacer es incluir la librería de la API en nuestro código:
1 | <script src="http://www.youtube.com/player_api"></script> |
A continuación usamos un elemento <div> como referencia para que se incluya el video:
1 | <div id="player"></div> |
Finalmente, creamos la función que va a mostrar el video y las funciones adicionales para mostrar la capa y ocultarla.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | var player; // se crea la variable player function onYouTubePlayerAPIReady() { player = new YT.Player('player', { // la variable player se referencia con el elemento player del HTML height: '450', // alto del elemento width: '800', // ancho del elemento videoId: '1234567wrrt', // id del video de youtube playerVars: {rel: 0}, // variables adicionales para el video events: { // eventos 'onReady': onPlayerReady, // llamado a la función para cuando el video está listo 'onStateChange': onPlayerStateChange // llamado a la función para cuando el video cambia } }); } function onPlayerReady(event) { // función cuando el video está listo $(".play-icon").click(function(){ // botón de play que realiza la funcionalidad 1 $(".video-popup").fadeIn(); // muestra la capa que contiene al video $(this).fadeOut(); // oculta el botón player.playVideo(); // inicia la reproducción del video }); } function onPlayerStateChange(event) { // función cuando el video cambia, para realizar la funcionalidad 3 if(event.data === 0) { // condición que revisa si los datos del video están en 0, es decir, detenido $(".video-popup").fadeOut(); // oculta la capa que contiene al video $(".play-icon").fadeIn(); // muestra nuevamente el botón play } } |
Para la funcionalidad 2, usamos una función por fuera de la API así:
1 2 3 4 5 6 7 8 9 10 11 12 | $(".close").click(function(){ // botón que detiene el video y oculta la capa $(".video-popup").FadeOut(); $(".play-icon").fadeIn(); stopVideo($("#player")); // llamado a la función que detiene el video }); var stopVideo = function(player) { // función para detener el video (genérica) var vidSrc = player.prop("src"); // creamos una variable con la url del video vidSrc = vidSrc.replace("?autoplay=1", ""); // quitamos el autoplay de la url del video player.prop("src", ""); // indicamos que la url del video será vacío (se borra del DOM) player.prop("src", vidSrc); // recuperamos la url del video de la variable ya guardada }; |
Básicamente, lo que hace esta última función es guardar la url del video en una variable, luego borrar esa url del DOM y volverla a crear, así nos aseguramos que el video vuelve a su posición inicial.
Como vemos, es bastante sencillo usar la API de YouTube y nos permite manipular elementos de nuestra página con la reproducción del video, podemos crear eventos que se ejecuten en ciertos momentos del video para crear presentaciones más interactivas, mostrar mensajes cuando el usuario interactúe con el video, etc.
