YouTube + YouTube API + Javascript: El Soundtrack de mi vida

17 de marzo de 2018

Libro electrónico gratis:<br>Federico García Lorca Poemas escogidos

Libro electrónico gratis:
Federico García Lorca
Poemas escogidos

Libro electrónico gratis:<br>Miguel de Cervantes Don Quijote

Libro electrónico gratis:
Miguel de Cervantes
Don Quijote

Libro electrónico gratis:<br>Miguel de Unamuno El espejo de la muerte y otros relatos novelescos

Libro electrónico gratis:
Miguel de Unamuno
El espejo de la muerte y otros relatos novelescos

Con ayuda de YouTube, la API de YouTube y javascript podemos crear un reproductor de videos alimentado con una playlist ( lista de reproducción).

Como prueba de concepto, les presento el soundtrack de mi vida. Y citando a los clásicos: "I know it's only rock and roll... But I like it"

Intérprete:
Título:

El código fuente de esta reproductor de vídeos es:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="margin:auto; width:500px;"> <div id="mi_video_player" style="clear:both; width:500px; height:281px; margin:0px; padding:0px;border:0px;"></div>  <div style="margin:0px; padding:0px;border:0px;"> <strong>Intérprete:</strong> <span id="autor"></span><br> <strong>Título: </strong> <span id="cancion"></span>  </div> </div> <script> var video_a_mostar = 0; // variable para almacenar el video a mostrar var situacion_del_video; // variable para almacenar la situacion del video // la situacion del video la proporciona la api de youtube // los valores posibles son: // 0 el video ha terminado // 1 el video se esta reproduciendo // 2 el video esta pausado // 3 el video esta almacenandose localmente // 4 el video esta listo para reproducirse // -1 el video no ha iniciado // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} // creamos un array multidimensional con la playlist de los videos a reproducir // cada elemnto del array tiene: // ["interperete","nombre de la cancion","youtube video id"], // Ejemplo: // ["Amy Winehouse ","You Know I am No Good ","b-I2s5zRbHg"], // El youtube video id se extrae de la url del video // Ejemplo de url del video: // https://www.youtube.com/watch?v=b-I2s5zRbHg // el valor del parametro v es el youtube video id // En este caso: b-I2s5zRbHg // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} var playlist = [ ["NORTEC COLLECTIVE","Tijuana Sound Machine","iyR6N8ey458"], ["Mano Negra","Santa Maradona","3CUnwPgopIk"], ["Mano Negra","Peligro","d1nSWumUp4I"], ["Manu Chao","Clandestino","ptSYXBlJaZQ"], ["El gran silencio","Dejenme si estoy llorando","znF72EAfGR0"], ["El gran silencio","Chuntaro Style","clfRMPwFxbk"], ["El gran silencio","Lo que no fue no sera","59ijCO_Rne0"], ["El gran silencio","Dormir sonhando","tPdP8DFrwxc"], ["Maldita vecindad","Don Palabras","u1aEpG4Ycz8"], ["Maldita vecindad","Solin","3Y4GyRRxhP0"], ["Maldita vecindad","Kumbala","mkxNgNqc7ps"], ["Maldita vecindad","Un poco de sangre","iv4KkjLfCQQ"], ["Maldita vecindad","Pachuco","N89lzn7in9k"], ["Moenia","Volcan","XhZ2jLJ7Wi8"], ["Enrique Bunbury","El Jinete","IHtNncaMgZE"], ["Elefante","Fugitivo","4HlcZxMkIo0"], ["Panteon Rococo","Asesinos","xh3t948JoTg"], ["Panteon Rococo","La dosis perfecta","JJsc_GGEZ08"], ["Panteon Rococo","Esta Noche","rBgHWAfCeYA"], ["Panteon Rococo","Perdon","XEFkuU33SNw"], ["Panteon Rococo","Tu recuerdo y yo","gfiQ1tB7hLY"], ["Los fabulosos cadillacs","Manuel Santillan","l8cMaNNq-K0"], ["Los fabulosos cadillacs","Siguiendo la luna","94J9VrY9QBA"], ["Los fabulosos cadillacs","Desapariciones","JUCJc4Wu078"], ["Los fabulosos cadillacs","Vasos vacios","ocEoiLepyVg"], ["Los fabulosos cadillacs","Amnesia","WIWSoF3scj8"], ["Los fabulosos cadillacs","El Matador","mdAS7EDuF6Y"], ["Los fabulosos cadillacs","Quinto Centenario","_N9gD1nZZAA"], ["Los fabulosos cadillacs","El satanico dr Cadillac","C84w9KNEN30"], ["Pearl Jam","Given to fly","Ww8S2G2ua90"], ["Amy Winehouse ","You Know I am No Good ","b-I2s5zRbHg"], ["Pearl Jam","Given to fly","Ww8S2G2ua90"], ["Moby","Extreme Ways","Eb3eXT4UbfE"], ["moby mylene farmer","Slipping Away","PAkJs4MqHBU"], ["Bomba Estereo","Fuego","f3cq2Sd2jkU"], ]; var total_videos = playlist.length - 1; //variable para almacenar cuantos videos tieene la playlist var player; // crea el player para los videos window.onYouTubeIframeAPIReady = function() // la api de youtube tiene sus propiedades, metodos y eventos propios // onYouTubeIframeAPIReady es un evento de la api de yoube // window.onYouTubeIframeAPIReady cuando la api de youtube esté lista... { player = new YT.Player('mi_video_player', // creamos un nuevo reproductor // el video se mostrará en el div llamado'mi_video_player { width: '500', // el reproductor tendra un ancho de 500 pixeles height: '281', // el reproductor tendra un ancho de 281 pixeles playerVars: { 'autoplay': 1, 'controls': 0, 'disablekb':0, 'enablejsapi':1, 'iv_load_policy':3, 'rel':0, 'showinfo':0 }, // pasamos variables al reproductor // 'autoplay': 1 inicia la reproducciòn del video automaticamente // 'controls': 0 no muestra los controles del video (pausa, stop, next, volumen) // 'disablekb':0 desactiva el teclado de la computadora para controlar el video // 'enablejsapi':1 permite controlar el reproductor con javascript // 'iv_load_policy':3 desactiva las horrendas video anotaciones // 'rel':0 no muestra videos relacionados // 'showinfo':0 oculta la informacion del video (titulo y autor) events: // creamos eventos para nuestro reproductor de videos { 'onReady': el_reproductor_esta_listo, // cuando el reproductor este listo, ejecutaremos la funcion el_reproductor_esta_listo 'onStateChange': el_reproductor_cambio_de_estado // cuando el video cambie de estado, ejecutaremos la funcion el_reproductor_cambio_de_estado } }); } function el_reproductor_esta_listo(event) // definimos la funcion el_reproductor_esta_listo // esta funcion se ejecutara cuando el reproductor este listo // event es una variable que pasa automaticamente la API de youtube { next(); // ejecutar la funcion next() } function el_reproductor_cambio_de_estado(event) // definimos la funcion el_reproductor_cambio_de_estado // esta funcion se ejecutara cuando el video cambie de estado // event es una variable que pasa automaticamente la API de youtube { situacion_del_video = event.data; // cuando el video cambie de estado // modificamos el valor de la variable situacion_del_video if (event.data == 0) // si el video termino de reproducirse { next(); // ejecutar la funcion next() // mostraremos otro video con la funcion next() } if (event.data == -1) // si el video no ha iniciado // todos los videos presentan la situación no iniciado // algunos videos no habrán iniciado, pero comenzarán a transmitir datos // algunos videos nunca iniciarán // si el video fue borrrado, nunca iniciará // si el video no puede insertarse en el reproductor, nunca iniciará // para evitar que el reproductor colapse por que el video fue borrado // o por que se impide su reproducción fuera de youtube // creamos una funcion { timeout_mostrar_video = window.setTimeout(kill_timeout_video, 3000); // creamos una cuenta regresiva // al finalizar la cuenta regresiva se ejecutará la función kill_timeout_video // en 3 segundos se ejecutara la funcion kill_timeout_video } } function kill_timeout_video() // tras ejecutar una cuenta regresiva // ejecutaremos la funcion kill_timeout_video() { window.clearTimeout(timeout_mostrar_video); // destruye la cuenta regresiva if(situacion_del_video == -1) // si la situacion del video sigue siendo -1 tras 3 segundos... // si el video no ha iniciado tras tres segundos... // mostraremos otro video con la funcion next() { next(); // ejecutar la funcion next() } } function next() // creamos la funcion next { reproducir(); // next ejecuta la función reproducir(); } function reproducir() // creamos la función reproducir() { video_a_mostrar_src = playlist[video_a_mostar][2]; // recuperarmo el yotube video id de nuestro array multidimensional // video_a_mostrar_src almacenará el elemento 2 del array que almacena los datos del video // en este caso el elemento 2 es el youtube video id // video_a_mostar se refiere al elemento dentro del array que almacena la playlist // video_a_mostar tiene un valor de 0 al inicio // empezaremos con el elemento 0, el primero en el array que almacena la playlist document.getElementById('autor').innerHTML = playlist[video_a_mostar][0]; // de manera dinamica mostraremos el autor del video // el autor del video lo mostrarmos en el span llamado autor // accedemos a los elementos del array multidimensional // recuperamos el elemento 0 del array que almacena los datos del video // en este caso el autor // video_a_mostar se refiere al elemento dentro del array que almacena la playlist // video_a_mostar tiene un valor de 0 al inicio // empezaremos con el elemento 0, el primero en el array que almacena la playlist document.getElementById('cancion').innerHTML = playlist[video_a_mostar][1]; // de manera dinamica mostraremos el titulo del video // el titulo del video lo mostrarmos en el span llamado cancion // accedemos a los elementos del array multidimensional // recuperamos el elemento 1 del array que almacena los datos del video // en este caso el titulo del video // video_a_mostar se refiere al elemento dentro del array que almacena la playlist // video_a_mostar tiene un valor de 0 al inicio // empezaremos con el elemento 0, el primero en el array que almacena la playlist mostrar_video(video_a_mostrar_src); //ejecutamos la función mostrar_video con la variable video_a_mostrar_src // video_a_mostrar_src almacena el yotube video id if(video_a_mostar < total_videos) // verificamos que el video a mostrar no sea el ultimo de la playlist // verificamos que el video a mostrar no este al final del array { video_a_mostar += 1; // si no es el ultimo, el siguiente será el siguiente en la lista } else { video_a_mostar = 0; // si es el ultimo video // comenzaremos a mostrar videos nuevamente // desde el principio } } function mostrar_video(url) // funcion para mostar el video { player.loadVideoById({videoId:url,suggestedQuality:"small"}); // cargar video en baja resolucion // loadVideoById() es un metodo de la apideyoube // videoId: es el youtube video id // suggestedQuality: define la calidad del video // player.loadVideoById({videoId:url,suggestedQuality:"hd720"}); // cargar el video en hd player.playVideo(); // una vez cargado el video, lo reproducimos // playVideo() es un metodo de la apideyoube } next(); // ejecutamos la función next </script> <script src="https://www.youtube.com/iframe_api"></script>  </body> </html>

¿Por que tomarse la molestia de programar un reproductor de videos de youtube? Este reproductor no muestra publicidad entre cada vídeo... ¡No aparecerán mensajes del Partido Verde entre video y video! (Por ahora..)

Este reproductor se puede usar como un videowall con videos almacenados en youtube... La API de yoube permite también publicar videos desde el sitio de un tercero, no sólamente desde youtube...

Por cuestiones de seguridad, este reproductor necesita un servidor apache para funcionar. Si se copia el código y se intenta ver como un archivo html desde el navegador, no funcionará.

Posibles mejoras:

Agregarle unas canciones de Sonido La Changa de Ramón Rojo
Almacenar los videos en una base de datos y extraerlos desde la base de datos
Mostrar al azar los videos
Agregar controles al reproductor: volumen, pausa, siguiente
Intercalar videos con imagenes o mensajes de twitter

Sitios de interés

La API de Youtube

Comenta y opina este texto Lee mi libro de visitas
© 1997-2024 Alain García
albegago@hotmail.com
Twitter: @feesgo
YouTube
El vínculo a este documento es:
http://www.alaingarcia.net/weird/soundtrack-youtube-playlist.php

Puedes apoyar a este sitio invitándome a comer...

Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad