FiveM服务器加载背景视频随机化实现方法咨询

首先明确：CSS没法实现随机切换视频的逻辑，必须用JavaScript，下面给你两种简单的实现方式，都是基于你现有代码修改，新手也能直接上手。

方案1：每次打开加载屏幕随机播放一个视频（最简单） #

这种是每次玩家进入加载界面时，随机选一个视频播放，适合加载时长不长的场景。

修改步骤： #

1. 先调整HTML里的<video>标签，删掉原来的<source>节点，改成这样：

<video autoplay muted id="video">
    <!-- 视频源将由JS动态设置 -->
</video>

（如果只需要单次随机播放，保留loop属性也可以，但建议去掉，方便后续扩展切换功能）

2. 在你现有底部的<script>标签里，新增随机视频的逻辑，修改后的完整脚本如下：

var music = document.getElementById("music");
music.volume = 0.02;

// --- 新增随机视频逻辑开始 ---
// 把你的所有视频路径放到这个数组里，想加多少就加多少
const videoList = [
    "video/2.mp4",
    "video/bgvideo.mp4"
    // 示例：继续添加新视频 "video/3.mp4", "video/4.mp4"
];

// 生成随机视频路径的工具函数
function getRandomVideo() {
    const randomIndex = Math.floor(Math.random() * videoList.length);
    return videoList[randomIndex];
}

// 页面加载时设置并加载随机视频
const videoElement = document.getElementById("video");
videoElement.src = getRandomVideo();
videoElement.load();
// --- 新增随机视频逻辑结束 ---

window.onload = function(){
    document.onkeydown = function(event) {
        switch (event.keyCode) {
            case 32: //SpaceBar
                music.muted = !music.muted;
            break;
        }
        return false;
    }
}

方案2：播放完当前视频后自动切换随机视频 #

如果想让视频播放完一个后自动换另一个随机的，就在方案1的基础上，给视频添加结束事件监听：

在方案1的新增逻辑里，补充这段代码：

// 视频播放结束时自动切换随机视频
videoElement.addEventListener('ended', function() {
    videoElement.src = getRandomVideo();
    videoElement.load();
    videoElement.play(); // 启动新视频播放
});

完整的新增逻辑部分就变成：

// --- 新增随机视频逻辑开始 ---
const videoList = [
    "video/2.mp4",
    "video/bgvideo.mp4"
];

function getRandomVideo() {
    const randomIndex = Math.floor(Math.random() * videoList.length);
    return videoList[randomIndex];
}

const videoElement = document.getElementById("video");
// 初始加载随机视频
videoElement.src = getRandomVideo();
videoElement.load();

// 视频结束后自动切换
videoElement.addEventListener('ended', function() {
    videoElement.src = getRandomVideo();
    videoElement.load();
    videoElement.play();
});
// --- 新增随机视频逻辑结束 ---

额外注意事项： #

• 确保所有视频的路径和你的项目文件结构完全对应，不然会加载失败
• 视频统一用MP4格式，FiveM加载屏幕的内置浏览器支持没有问题
• 方案2必须去掉<video>标签的loop属性，否则视频会循环播放，不会触发ended切换事件

内容的提问来源于stack exchange，提问作者GriffinDAHO