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

Calendario de cubo

Calendario de cubo

Árbol arcoíris creciente

Árbol arcoíris creciente

FastClick para eliminar el delay de los 300ms

FastClick para eliminar el delay de los 300ms

Algunos artículos que te pueden interesar

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados.

Andrés Cruz 15-05-2014

Generando reportes PDFs con JavasCript

Generando reportes PDFs con JavasCript

La reportería es un tema fundamental que hay que llevar a cabo en cualquier sistema; querer importar datos desde una página web a otro formato como PDF es una tarea de lo más habitual que puede ser fácilmente realizado a través de librerías JavaScript.

Andrés Cruz 09-04-2015

Primeros pasos con la APi de Soundcloud con JavaScript

Primeros pasos con la APi de Soundcloud con JavaScript

Se explica como emplear la API de Soundcloud para crear widget de canciones en nuestra página web controlar los widgets en base a eventos.

Andrés Cruz 27-04-2017