页面刷新时随机切换视频的实现问题求助

你的Dropbox链接没问题（带?raw=1能直接返回视频文件），问题全在JavaScript代码的逻辑错误和语法错误上，具体问题如下：

• 函数getRandomInt逻辑混乱：参数是min和max，但内部用了未定义的array.length，还把获取视频元素的代码塞到函数里，职责不清晰
• 变量名拼写错误：定义的数组是videoUrl，后面却用videoUrlsMp4，导致找不到变量
• 获取视频元素的变量未正确赋值：定义了target但后面用video调用方法，两者没关联
• 外部JS文件里不能写<script>标签，这会导致语法错误
• 缺少手机端适配的meta标签和视频全屏样式

修复后的完整代码 #

可以把JS直接写在HTML里（避免外部文件路径问题），同时添加全屏样式和手机适配：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机视频页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow: hidden;
        }
        #videoItem {
            width: 100vw;
            height: 100vh;
            object-fit: cover; /* 保证视频铺满屏幕，不变形 */
        }
    </style>
</head>
<body>
    <video id="videoItem" autoplay muted loop>
        <source src="" type="video/mp4" />
    </video>

    <script>
        // 视频链接数组（补充你剩下的2个链接即可）
        const videoUrls = [
            "https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1",
            "https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1",
            "https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1",
            "https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1",
            "https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1",
            "https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"
            // 把剩下的2个视频链接加到这里
        ];

        // 生成指定范围内的随机整数
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // 获取视频元素和source元素
        const video = document.getElementById('videoItem');
        const source = video.getElementsByTagName('source')[0];

        // 随机选择视频链接并加载
        const randomIndex = getRandomInt(0, videoUrls.length - 1);
        source.src = videoUrls[randomIndex];
        video.load();
    </script>
</body>
</html>

关键说明 #

1. 添加了viewport meta标签，确保手机端页面适配
2. CSS样式让视频铺满整个屏幕，object-fit: cover保证视频比例不变形
3. 视频添加了autoplay muted loop属性，实现自动播放、静音、循环（手机端自动播放必须静音）
4. 修正了JS的所有逻辑错误：变量名统一、函数职责明确、正确获取DOM元素
5. 你的Dropbox链接格式正确，只要补充剩下的2个视频链接到数组里即可

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