htmlfivem

HTML/JS/CSS - how to randomise videos

I'm a total noob with coding, so I'm probably going about this the wrong way.

For this fiveM server, we currently have an mp4 video running as the background of the loading screen, i want to randomise this with multiple videos created though.

This is the current HTML code we've got, where i've added the source, but I have no clue how to trigger it to randomise - do i need to add an additional JS file? or can i somehow trigger this off the CSS?

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.css">
        <title>Loading</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/fontstyle.css" />
        <script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
    </head>

    <video autoplay muted loop id="video">
        <source src="video/2.mp4" type="video/mp4">
        <source src="video/bgvideo.mp4" type="video/mp4">
    </video>

    <body style="background-color: rgb(49, 49, 49); overflow: hidden;">

    <body id="page">
        <div class="info">
            <h1>Welcome to City In Motion<br><br><h2><i>Your story begins here...</i></h2>
        </div>

        <div class="loader">Loading...</div>
        <div class="logo"><img src="images/logo.png" style='width:160%;height:345%'></div>
        <div class="sidepanel" id="particles-js" style="background-color: black;"></div>
          
        <script type="text/javascript" src="js/particles.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>

    <audio id="music" autoplay loop >
        <source src="music/music.mp3" type="audio/mp3">
    </audio>

    <script>
        var music = document.getElementById("music");
        music.volume = 0.02
        window.onload = function(){
        
        document.onkeydown = function(event) {
        switch (event.keyCode) {
                case 32: //SpaceBar
                    music.muted = !music.muted;
                break;
            }
            return false;
        }}
    </script>
</html>
Solution

  • Managed to figure it out - thanks for the assistance though.

     <script>

        const VIDEOS = ["Load1.mp4", "Load2.mp4", "Load3.mp4"]

        const randomVideoNumber = Math.round(Math.random() * (VIDEOS.length - 1))

        console.log(randomVideoNumber)

        const videoSrcElement = document.getElementById("video-src")

        videoSrcElement.setAttribute("src", "video/" + VIDEOS[randomVideoNumber])
    </script>