como insertar un reproductor de audio y video en html 5 con playlist y auto play gratis

NOVEDADES EN AUDIO VIDEOS MIXES 01 - mambo 2014 - 2015 02 - mambo mix 2013 03 - mambo mix 2017 04 - mambo y zumba 2012 05 - mix electro pop 2018 06 - cuarteto mix 07 - mix cumbia live 08 - mix cumbia rkt y guaracha remix 2022 09 - mix ariana grande house remix 10 - mix dande de los 90 11 - mix dance clasicos promocionales parte 1 12 - mix dance clasicos promocionales parte 2 13 - mix dance clasicos promocionales parte 3 14 - mix electro dance 2016 06 - mix electro dance evolution 15 - mix electro house 2014 parte 2 16 - mix electro house 2016 parte 2 17 - mix amnesia disco - house clasicos 18 - mix thech house & tecchno 2k19 19 - audio video mix cumbia villera 2 20 - audio video mix de los 80 y 90 hits 21 - audio video mix cumbia 22 - audio video mix house clasicos 1 23 - cumbia villera y reggaeton remix 24 - audio video mix electro salsa
	AUDIO VIDEO MIXES MIXADOS POR: DJVIRTUALZUR

codigo html

<div align="center"><span class="Estilo1">NOVEDADES EN AUDIO VIDEOS MIXES</span> <video id="audio" preload="auto" tabindex="0" controls="" width="640" height="480" poster='https://archive.org/download/cyber-rockola/imagenes/800600.jpg'> <source src="https://archive.org/download/cyber-rockola/config/presentacion_1.mp4"> </video> <div id="micapa" style="width:550;height:250px;overflow:scroll;overflow-x:hidden;"> <ul id="playlist"> <li class="active"> </li> <li> <a href="https://archive.org/download/djvirtualzur-mix-audio-video/audio%20video%20mix%20cumbia%20villera%202.ia.mp4"> 01 - audio video mix cumbia villera 2</a> </li> <li> <a href="https://archive.org/download/djvirtualzur-mix-audio-video/audiobvideo%20mix%20de%20los80%20y%2090%20hits.mp4"> 02 - audio video mix de los 80 y 90 hits</a> </li> <li> <a href="https://archive.org/download/djvirtualzur-mix-audio-video/djvirtualzur%20audio%20video%20mix%20cumbia.mp4"> 03 - audio video mix cumbia </a> </li> <li> <a href="https://archive.org/download/djvirtualzur-mix-audio-video/djvirtualzur%20mix%20audio%20video%20de%20house%20clasicos%201.mp4"> 04 - audio video mix house clasicos 1 </a> </li> <li> <a href="D:\djvirtualzur\sesiones\cumbia\CumbiaVilleraYReggaeton2009.mp3"> 05 - cumbia villera y reggaeton remix </a> </li> <li> <a href="https://archive.org/download/djvirtualzur-mix-audio-video/video%20audio%20mix%20salsa%20y%20electro%20salsa%20volumen%201.mp4"> 06 - audio video mix electro salsa </a> </li> </ul> </div> </div>

nota para solo audio debemos cambiar la orden de <video como < audio y pueden usar el link del ccs y el js con los estilos y mas abajo les dejo el ccs y js

init(); function init(){ var audio = document.getElementById('audio'); var playlist = document.getElementById('playlist'); var tracks = playlist.getElementsByTagName('a'); audio.volume = 0.80; audio.play(); for(var track in tracks) { var link = tracks[track]; if(typeof link === "function" || typeof link === "number") continue; link.addEventListener('click', function(e) { e.preventDefault(); var song = this.getAttribute('href'); run(song, audio, this); }); } audio.addEventListener('ended',function(e) { for(var track in tracks) { var link = tracks[track]; var nextTrack = parseInt(track) + 1; if(typeof link === "function" || typeof link === "number") continue; if(!this.src) this.src = tracks[0]; if(track == (tracks.length - 1)) nextTrack = 0; console.log(nextTrack); if(link.getAttribute('href') === this.src) { var nextLink = tracks[nextTrack]; run(nextLink.getAttribute('href'), audio, nextLink); break; } } }); } function run(song, audio, link){ var parent = link.parentElement; //quitar el active de todos los elementos de la lista var items = parent.parentElement.getElementsByTagName('li'); for(var item in items) { if(items[item].classList) items[item].classList.remove("active"); } //agregar active a este elemento parent.classList.add("active"); //tocar la cancion audio.src = song; audio.load(); audio.play(); }

#playlist, audio{ background:#666; width:480px; padding:20px; list-style: none; font-family: Arial, Helvetica, sans-serif; } a { text-decoration:none; } .active a { color:#5DB0E6; text-decoration:none; } li a{ color:#eeeedd; background:#333; padding:5px; display:block; background-image:url(title_bg2.GIF) } li a:hover{ text-decoration:none; }

abren un blog de notas y pegan el siguiente codigo como esta escrito y lo guardan con la extencion .js el segundo y el trecer codigo como .ccs y lo suben a su servidor y modifican los link de los archivos para reproducir y los nombres de los mismos