videoplaylist.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. function init(){
  2. let video = document.getElementById('videoplaylist');
  3. let playlist = document.getElementById('playlist');
  4. let tracks = playlist.getElementsByTagName('a');
  5. video.volume = 0.50;
  6. //Cuenta los tracks
  7. for(let track in tracks) {
  8. let link = tracks[track];
  9. if(typeof link === "function" || typeof link === "number"){continue;}
  10. link.addEventListener('click', function(e) {
  11. e.preventDefault();
  12. let song = this.getAttribute('href');
  13. run(song, video, this);
  14. });
  15. }
  16. //Agregamos evento para reproducir el siguiente items
  17. video.addEventListener('ended',function(e) {
  18. for(let track in tracks) {
  19. let link = tracks[track];
  20. let nextTrack = parseInt(track) + 1;
  21. if(typeof link === "function" || typeof link === "number"){continue;}
  22. if(!this.src){this.src = tracks[0];}
  23. if(track == (tracks.length - 1)){nextTrack = 0;}
  24. console.log(nextTrack);
  25. if(link.getAttribute('href') === this.src) {
  26. let nextLink = tracks[nextTrack];
  27. run(nextLink.getAttribute('href'), video, nextLink);
  28. break;
  29. }
  30. }
  31. });
  32. }
  33. function run(song, video, link){
  34. let parent = link.parentElement;
  35. //Quita el active de todos los elementos de la lista
  36. let items = parent.parentElement.getElementsByTagName('li');
  37. for(let item in items) {
  38. if (items[item].classList) {
  39. items[item].classList.remove("is-active-play");
  40. }
  41. }
  42. //Agrega active a este elemento
  43. parent.classList.add("is-active-play");
  44. //Inicia la reproducción
  45. video.src = song;
  46. video.load();
  47. video.play();
  48. }
  49. init();