Estoy haciendo un reproductor de video de orden aleatorio, adaptando el código de aquí, pero el mismo video sigue reproduciéndose, aunque puedo ver (en el texto arriba del video) que el orden aleatorio está funcionando. La versión en vivo está aquí .
¿El problema con appendChild significa que el nuevo video está al final de una lista pero el primero en la lista sigue reproduciéndose? Intenté replaceChild pero eso no funcionó.
<script type="text/javascript"> $(document).ready(function(){ var videos = [ [{type:'mp4', 'src':'carlos/one-carlostest.mp4'}], [{type:'mp4', 'src':'carlos/two-carlostest.mp4'}], [{type:'mp4', 'src':'carlos/three-carlostest.mp4'}], [{type:'mp4', 'src':'carlos/four-carlostest.mp4'}], [{type:'mp4', 'src':'carlos/five-carlostest.mp4'}] ]; // selecting random item from array as first to be played var randomitem = videos[Math.floor(Math.random()*videos.length)]; // This function adds a new video source (dynamic) in the video html tag function videoadd(element, src, type) { var source = document.createElement('source'); source.src = src; source.type = type; element.appendChild(source); } // this function fires the video for particular video tag function newvideo(src){ var vid = document.getElementById("myVideo"); videoadd(vid,src ,'video/ogg'); vid.autoplay = true; vid.load(); vid.play(); } // function call newvideo(randomitem[0].src) // Added an event listener so that everytime the video finishes ,a new video is loaded from array document.getElementById('myVideo').addEventListener('ended',handler,false); function handler(){ var newRandom = videos[Math.floor(Math.random()*videos.length)]; newvideo(newRandom[0].src) document.getElementById("monitor").innerHTML = "randomitem is " + newRandom[0].src; } }) </script>Además, si alguien puede decirme por qué la reproducción automática nunca funciona, se lo agradecería, aunque es el menor de mis problemas.
Encontré esta solución para que tu video se reproduzca uno tras otro. ahora en su archivo JS, ahora solo tendrá que agregar la ruta src de su video.
var vidElement = document.getElementById('video'); var vidSources = [ "https://lutins.co.uk/carlos/one-carlostest.mp4", "http://www.w3schools.com/html/movie.mp4" ]; var activeVideo = Math.floor((Math.random() * vidSources.length)); vidElement.src = vidSources[activeVideo]; vidElement.addEventListener('ended', function(e) { // update the active video index activeVideo = (++activeVideo) % vidSources.length; if(activeVideo === vidSources.length){ activeVideo = 0; } // update the video source and play vidElement.src = vidSources[activeVideo]; vidElement.play(); }); video { width:350px; } <p>wowww you got it!</p> <video src="https://lutins.co.uk/carlos/one-carlostest.mp4" id="video" autoplay muted playsinline></video>Cambie la variable randomIt a una devolución de llamada, solo de esta manera, generará un nuevo número aleatorio cada vez que reciba una llamada.
// I have change randomitem into a function with ofcourse a proper name var getRandomItem = function() { return videos[Math.floor(Math.random()*videos.length)]; }También deberías llamarlo correctamente así:
//newvideo(randomitem[0].src) -> change it to newvideo(getrandomItem().src)Es posible que también se requieran otros ajustes para que su código funcione.