DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
01-05-2017

Siguiendo trabajando con las APIs de audio (Primeros pasos con la APi de Soundcloud con JavaScript) ahora le toca al turno al gigante Google y su plataforma YouTube la cual sirve para mucho más que reproducir música y ver videos de gatos... YouTube cuenta con una API que se encuentra disponible para JavaScript desde la cual podemos tener un gran control sobre los videos de YouTube integrados en nuestra web.

Incluir la API de JavaScript en nuestra web

Lo primero que debemos hacer es incluir dicha API, la cual no es más que un archivo JavaScript:

<script src="http://www.youtube.com/player_api"></script>

Cargando un video de YouTube

Una vez incluida nuestra librería lo siguiente que tenemos que hacer es cargar un video de manera programática con JavaScript empleando el siguiente código JavaScript:

        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: $($('.lista_canciones li')[index]).attr("data-href"),
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

De una vez definimos dos eventos que se ejecutarán una vez esté preparado y listo el video de YouTube para su reproducción (onPlayerReady) y cuando el video cambie de estatus -por ejemplo- termine la reproducción del mismo (onPlayerStateChange):

        function onPlayerReady(event) {
            event.target.playVideo();
        }

        function onPlayerStateChange(event) {

            if (event.data === 0) {
               //video finalizado
            }
        }

Reproduciendo un nuevo video al finalizar la reproducción de un video en YouTube

También necesitaremos incluir el evento que nos indicará cada vez que presente un cambio en el video, en nuestro caso nos interesa saber cuando se terminó la reproducción de un video para cargar otro mediante el método loadVideoById que recibe el identificador de un video en YouTube:

        function onPlayerStateChange(event) {

            if (event.data === 0) {
                
                event.target.loadVideoById({
                    videoId: $($('.lista_canciones li')[index]).attr("data-href")
                });
            }
        }

Con esto tenemos los elementos básicos para crear nuestra propia lista de reproducción automatizada y personalizada desde nuestra web; puedes consultar la documentación oficial en el siguiente enlace: YouTube Player API Reference for iframe Embeds.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Circunferencia animada con Canvas

Circunferencia animada con Canvas

FastClick para eliminar el delay de los 300ms

FastClick para eliminar el delay de los 300ms

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Algunos artículos que te pueden interesar

Cómo incrustar un video de Youtube en Android

Cómo incrustar un video de Youtube en Android

Se explica cómo incrustar un video de Youtube en una aplicación Android empleando la API nativa de Youtube creada por Google.

Andrés Cruz 20-10-2016

Detectando los eventos de teclado con Canvas

Detectando los eventos de teclado con Canvas

En esta entrada veremos un pequeño experimento en donde con el Canvas mediante los eventos de teclados específicamente emplearemos las flechas de direcciones del teclado.

Andrés Cruz 07-12-2015

La API de archivos en JavaScript - accediendo al contenido

La API de archivos en JavaScript - accediendo al contenido

En esta entrada presentaremos una API para la lectura de los archivos cargados mediante input type="file" u otros métodos como el Drag and Drop con JavaScript.

Andrés Cruz 09-02-2016