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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter