如何用JS实现视频数组无重复随机播放，结束后重新洗牌循环

原代码问题分析 #

• 变量作用域错误：vids、i仅在playvids函数内定义，getnextfile无法访问，导致变量未定义报错
• 播放逻辑混乱：playvids里的for循环会直接覆盖video的src为最后一个视频，且重复绑定ended事件
• 洗牌函数逻辑冗余：return语句后的playvids()永远不会执行
• 索引处理错误：getnextfile未正确维护播放索引，也没有在洗牌后重置索引

修正后的完整实现代码 #

HTML结构 #

<div class="header-video-container">
  <video id="myvideo" muted autoplay playsinline></video>
  <span class="video-tooltip" id="videoTooltip"></span>
</div>

CSS样式（控制悬停文本显示） #

.header-video-container {
  position: relative;
  width: 100%;
  height: 400px; /* 根据需求调整高度 */
  overflow: hidden;
}

#myvideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-tooltip {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header-video-container:hover .video-tooltip {
  opacity: 1;
}

JavaScript逻辑 #

// 视频数据：包含视频地址和对应的悬停描述
const videoList = [
  { src: "vid1.mp4", tooltip: "这是第一个视频的专属描述" },
  { src: "vid2.mp4", tooltip: "第二个视频的详细介绍" },
  { src: "vid3.mp4", tooltip: "第三个视频的悬停说明" }
];

let currentPlaylist = [...videoList];
let currentIndex = 0;
const videoElement = document.getElementById("myvideo");
const tooltipElement = document.getElementById("videoTooltip");

// Fisher-Yates洗牌算法，保证数组打乱后无重复
function shuffleArray(array) {
  let currentIndex = array.length;
  while (currentIndex > 0) {
    const randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}

// 加载并播放当前索引的视频，同步更新悬停文本
function playCurrentVideo() {
  const currentVideo = currentPlaylist[currentIndex];
  videoElement.src = currentVideo.src;
  tooltipElement.textContent = currentVideo.tooltip;
  videoElement.play();
}

// 视频结束后处理逻辑：播放下一个，到末尾则重新洗牌
function handleVideoEnd() {
  currentIndex++;
  if (currentIndex >= currentPlaylist.length) {
    currentPlaylist = shuffleArray([...videoList]);
    currentIndex = 0;
  }
  playCurrentVideo();
}

// 初始化：首次洗牌后启动播放序列
function initVideoPlayer() {
  currentPlaylist = shuffleArray(currentPlaylist);
  videoElement.addEventListener('ended', handleVideoEnd);
  playCurrentVideo();
}

// 页面加载完成后初始化播放器
window.addEventListener('load', initVideoPlayer);

实现说明 #

1. 无重复随机循环：用Fisher-Yates洗牌算法保证每次播放列表无重复，播放完一轮后自动重新洗牌，实现循环随机播放
2. 悬停文本同步：每个视频对应专属描述文本，播放时同步更新tooltip内容，通过CSS hover控制显示/隐藏
3. 逻辑优化：修复变量作用域问题，移除冗余循环，单次绑定ended事件，确保播放流程连贯无错误

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