Question

我有这个索引。在这个页面中我放了一个视频背景。这些视频具有autoplay和preload的功能。我想添加一个加载视频完成后消失的预加载器图像。

<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>

Answer 1

将视频元素设置为“display：hidden”，直到加载第一个视频;然后隐藏图像并将视频元素设置为“display：block”。使用oncanplay或oncanplaythrough事件检查第一个视频的加载时间。像这样:(首先设置图像源和类/样式）

<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>

添加视频加载后消失的预加载图像

1 个答案: