Add a preload image that disappears after video is loaded

Question

Add a preload image that disappears after video is loaded

233 Views Asked by Jhonny Afonso At 08 April 2025 at 11:40

I have this Index. In this page I put a video background. The videos have a function to autoplay and preload. I want to add a preloader image that disappears after loading videos finishes.

<body onload="onload();">
<div class="fullscreen-bg">
    <video preload="auto" id="idle_video" onended="onVideoEnded();" class="fullscreen-bg__video"></video>
    <script>
        var video_list = ["vid/video1.m4v",
            "vid/video2.m4v",
            "vid/video3.m4v",
            "vid/video4.m4v"
        ];
        var video_index = 0;
        var video_player = null;

        function onload() {
            console.log("body loaded");
            video_player = document.getElementById("idle_video");
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
            var vid = document.getElementById("idle_video");
            vid.volume = 1;
        }

        function onVideoEnded() {
            console.log("video ended");
            if (video_index < video_list.length - 1) {
                video_index++;
            } else {
                video_index = 0;
            }
            video_player.setAttribute("src", video_list[video_index]);

            video_player.play();
        }
    </script>
</div>

Original Q&A

There are 1 best solutions below

**m69 ''snarky and unwelcoming''** · Answer 1

Set the video element to "display:hidden" until the first video is loaded; then hide the image and set the video element to "display:block". Use the oncanplay or oncanplaythrough event to check when the first video is loaded. Something like this: (set the image source and class/style first)

<body onload="onload();">
<div class="fullscreen-bg">
    <img src="some_image" id="idle_image" class="some_class">
    <video style="display: hidden;" preload="auto" id="idle_video" oncanplaythrough="onVideoReady();" onended="onVideoEnded();" class="fullscreen-bg__video"></video>
    <script>
        var video_list = ["vid/video1.m4v",
            "vid/video2.m4v",
            "vid/video3.m4v",
            "vid/video4.m4v"
        ];
        var video_index = 0;
        var video_player = null;
        var video_image = null;

        function onload() {
            console.log("body loaded");
            video_image = document.getElementById("idle_image");
            video_player = document.getElementById("idle_video");
            video_player.setAttribute("src", video_list[video_index]);
            video_player.volume = 1;
        }

        function onVideoReady() {
            console.log("video ready");
            video_player.oncanplaythrough = null;
            video_image.style.display = "hidden";
            video_player.style.display = "block";
            video_player.play();
        }

        function onVideoEnded() {
            console.log("video ended");
            if (video_index < video_list.length - 1) {
                video_index++;
            } else {
                video_index = 0;
            }
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }
    </script>
</div>

Add a preload image that disappears after video is loaded

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in HTML5-VIDEO

Trending Questions

Popular # Hahtags

Popular Questions