JS随机视频仅刷新页面时切换，如何实现每段delayms到期后更换新视频？

你当前的randvideo1变量是在JS文件加载阶段仅执行1次随机计算得到的固定值，后续循环调用播放逻辑时没有重新执行随机选择操作，所以只会重复播放同一个视频，只有刷新页面才会重新计算一次随机值。

• 第一步：将随机选视频的逻辑封装为可重复调用的函数，不要直接存为固定变量

var videoArray1 = [
  "v/video01.mp4",
  "v/video02.mp4",
  "v/video03.mp4",
  "v/video04.mp4"
];

// 每次调用该函数都会重新计算返回新的随机视频地址
function getRandomVideo() {
  return videoArray1[Math.floor(Math.random() * videoArray1.length)];
}

• 第二步：在每次delayms到期触发下一次播放的逻辑中，调用上面的函数获取新地址，替换原有固定的randvideo1引用，示例播放控制逻辑如下：

function playNextVideo() {
  // 每次播放前重新获取新的随机视频地址
  const currentVideoUrl = getRandomVideo();
  // 替换页面中视频元素的播放地址
  const videoDom = document.querySelector('video');
  videoDom.src = currentVideoUrl;
  videoDom.play();
  // 10秒后触发下一次播放
  setTimeout(playNextVideo, 10000);
}

// 页面加载完成后首次触发播放
playNextVideo();

• 可选优化：如果需要避免连续两次播放同一个视频，可以增加去重逻辑

// 存储上一次播放的视频地址
let lastPlayedUrl = '';
function getRandomVideo() {
  let newVideoUrl;
  // 当视频数量大于1时，循环取随机值直到和上一次的地址不同
  do {
    newVideoUrl = videoArray1[Math.floor(Math.random() * videoArray1.length)];
  } while (newVideoUrl === lastPlayedUrl && videoArray1.length > 1);
  lastPlayedUrl = newVideoUrl;
  return newVideoUrl;
}

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