Zde je to, co chci dosáhnout: mám pár klipů v poli a chci, aby všichni z nich mají být zobrazeny náhodně a bez problémů (s využitím možností předpětí) jako pozadí videa. Vzal jsem si nějaký kód, který jsem našel v jiném příspěvku, a zatím jsem byl schopen udělat první video, aby být vybrán náhodně, ale pak zbytek z nich nechat zobrazovat v pořadí (jak je uvedeno v poli). Jak by jste upravili tento kód, takže všechny z nich –a to nejen ten první– jsou zobrazeny náhodně? Myslím, že by to mělo být docela snadné, jak vyřešit tento problém pro většinu z vás, ale já nejsem programátor, takže to by bylo skvělé, kdyby někdo z vás mi mohl pomoci. Díky předem. Tady je můj současný kód:
<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;
}