React中点击/播放视频后如何从数组获取下一个视频？

核心思路 #

基于已获取的myVideos数组，通过当前播放视频的uuid定位其在数组中的索引，计算下一个视频的位置，从而获取对应视频信息。

具体实现 #

1. 编写获取下一个视频的函数 #

在组件中定义函数，传入当前视频ID和视频数组，返回下一个视频对象：

const getNextVideo = (currentVideoId, videoList) => {
  if (!videoList || videoList.length === 0) return null;
  
  // 定位当前视频在数组中的索引
  const currentIndex = videoList.findIndex(video => video.uuid === currentVideoId);
  if (currentIndex === -1) return null; // 未找到当前视频时返回null

  // 计算下一个视频索引，最后一个视频的下一个跳转至第一个（循环播放）
  const nextIndex = (currentIndex + 1) % videoList.length;
  return videoList[nextIndex];
};

2. 视频结束自动切换 #

在播放器的onEnd回调中调用上述函数，通过更新URL参数切换视频：

const onVideoEnd = () => {
  if (loading) return; // 视频列表加载中时不执行切换
  
  const nextVideo = getNextVideo(id, myVideos);
  if (nextVideo) {
    // 更新URL查询参数，触发播放器加载下一个视频
    navigate(`?videoId=${nextVideo.uuid}`);
  } else {
    console.log("无下一个视频");
    // 可在此添加无后续视频的提示逻辑
  }
};

3. 手动切换下一个视频（可选） #

如需支持手动切换，在弹窗层添加按钮并绑定切换逻辑：

<button onClick={() => {
  const nextVideo = getNextVideo(id, myVideos);
  if (nextVideo) navigate(`?videoId=${nextVideo.uuid}`);
}}>
  下一个视频
</button>

4. 边界情况处理 #

• 视频列表加载中（loading为true）时，不执行切换逻辑
• 当前视频ID不在数组中时，返回null并提示
• 数组为空时直接返回null

5. 封装为自定义Hook复用（可选） #

若多个组件需用到切换逻辑，可封装为自定义Hook：

import { useCallback } from 'react';

const useNextVideo = () => {
  const getNext = useCallback((currentVideoId, videoList) => {
    if (!videoList || videoList.length === 0) return null;
    const currentIndex = videoList.findIndex(v => v.uuid === currentVideoId);
    if (currentIndex === -1) return null;
    const nextIndex = (currentIndex + 1) % videoList.length;
    return videoList[nextIndex];
  }, []);

  return { getNext };
};

// 组件内使用
const { getNext } = useNextVideo();
const nextVideo = getNext(id, myVideos);

非循环播放调整 #

若不需要循环播放，修改下一个索引的计算逻辑：

const nextIndex = currentIndex + 1;
return nextIndex < videoList.length ? videoList[nextIndex] : null;

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