Esto es lo que quiero lograr: tengo un montón de clips en una matriz y quiero que todos se muestren al azar y sin problemas (usando opciones de precarga) como videos de fondo. Tomé un código que encontré en otra publicación y hasta ahora he podido hacer que el primer video se elija al azar, pero luego el resto sigue mostrándose en orden (como se incluye en la matriz). ¿Cómo modificarías este código para que todos, y no solo el primero, se muestren aleatoriamente? Supongo que debería ser bastante fácil resolver este problema para la mayoría de ustedes, pero no soy programador, por lo que sería genial si alguno de ustedes pudiera ayudarme. Gracias por adelantado. Aquí está mi código actual:
<script> var videoContainer = document.getElementById('videoContainer'), output = document.getElementById('output'), nextVideo, videoObjects = [ document.createElement('video'), document.createElement('video') ], vidSources = [ "clip1.mov", "clip2.mov", "clip3.mov", "clip4.mov", ], nextActiveVideo = Math.floor((Math.random() * vidSources.length)); videoObjects[0].inx = 0; videoObjects[1].inx = 1; initVideoElement(videoObjects[0]); initVideoElement(videoObjects[1]); videoObjects[0].autoplay = true; videoObjects[0].src = vidSources[nextActiveVideo]; videoContainer.appendChild(videoObjects[0]); videoObjects[1].style.display = 'none'; videoContainer.appendChild(videoObjects[1]); function initVideoElement(video) { video.playsinline = true; video.muted = false; video.preload = 'auto'; video.onplaying = function(e) { nextActiveVideo = ++nextActiveVideo % vidSources.length; if(this.inx == 0) nextVideo = videoObjects[1]; else nextVideo = videoObjects[0]; nextVideo.src = vidSources[nextActiveVideo]; nextVideo.pause(); }; video.onended = function(e) { this.style.display = 'none'; nextVideo.style.display = 'block'; nextVideo.play(); }; } </script> <body> <div id="videoContainer"></div> </body> video { object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } #videoContainer { display: inline-block; }tal vez en video.onended , primero haga nextActiveVideo = Math.floor((Math.random() * vidSources.length)); otra vez.
para que puedas aprovecharlo :)