如何使用Javascript实现用户每次访问/刷新页面时随机播放视频？

没问题！要实现每次用户访问或刷新页面时，随机加载你媒体目录里的4个MP4视频，你可以通过以下方式修改你的代码：

完整修改后的代码 #

<video>
  <source id="videoSource" src="assets/media/lofi.mp4" type="video/mp4" />
</video>
<button id="pause_resume_button" onclick="pause_resume()">pause video</button>

<script type="text/javascript">
// 1. 定义媒体目录下的所有视频文件名列表
const videoFiles = [
  'video1.mp4',
  'video2.mp4',
  'video3.mp4',
  'lofi.mp4'
];

// 2. 生成随机索引，选中一个视频文件
const randomIndex = Math.floor(Math.random() * videoFiles.length);
const targetVideoPath = `assets/media/${videoFiles[randomIndex]}`;

// 3. 更新source标签的视频路径
const videoSource = document.getElementById('videoSource');
videoSource.src = targetVideoPath;

// 4. 获取video元素并配置原有功能
const video = videoSource.parentElement;
video.volume = 0.15;

function pause_resume() {
  const button = document.getElementById("pause_resume_button");
  if (video.paused) {
    video.play();
    button.textContent = "pause video";
  } else {
    video.pause();
    button.textContent = "resume video";
  }
}
</script>

关键逻辑解释 #

• 视频列表定义：用数组videoFiles把你assets/media/目录里的所有MP4文件名都列出来，后续随机选择就基于这个数组；
• 随机选择逻辑：Math.random()会生成0到1之间的随机小数，乘以数组长度后用Math.floor()取整，就能得到0到数组长度-1的随机索引，对应选中一个视频文件；
• 更新视频路径：给<source>标签加上id，方便我们快速定位并修改它的src属性，这样页面加载时就会自动加载随机选中的视频；
• 修正按钮文本逻辑：我调整了按钮的文本显示规则——视频播放时按钮显示"pause video"，暂停时显示"resume video"，更符合用户操作直觉。

另外要注意：确保数组里的文件名和你目录下的实际文件名完全一致，大小写也要匹配哦！

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