如何在Next.js中使用useState切换对象数组中的视频序列？

下面是基于你的需求实现的完整代码，支持手动点击切换下一个视频，以及播放完最后一个后自动回到序列开头：

'use client'; // Next.js 13+ App Router 需要添加该标识
import { useState } from 'react';

// 你的视频序列数组，假设 video 为有效的视频源（URL/Blob 等）
const workouts = [
  { id: 1, video: 'https://example.com/video1.mp4' },
  { id: 2, video: 'https://example.com/video2.mp4' },
  { id: 3, video: 'https://example.com/video3.mp4' },
  { id: 4, video: 'https://example.com/video4.mp4' },
];

export default function WorkoutVideoPage() {
  // 跟踪当前播放视频的索引
  const [currentIndex, setCurrentIndex] = useState(0);
  const currentVideo = workouts[currentIndex];

  // 切换下一个视频的核心逻辑
  const handleNextVideo = () => {
    setCurrentIndex(prevIndex => {
      // 最后一个视频播放完后回到第一个，否则索引+1
      return prevIndex === workouts.length - 1 ? 0 : prevIndex + 1;
    });
  };

  return (
    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
      {/* 视频播放器 */}
      <video
        key={currentVideo.id} // 切换视频时强制重置播放器，避免缓存问题
        src={currentVideo.video}
        controls
        width="100%"
        onEnded={handleNextVideo} // 播放完毕自动触发切换
        style={{ marginBottom: '1rem' }}
      />

      {/* 手动切换按钮 */}
      <button
        onClick={handleNextVideo}
        style={{
          padding: '0.8rem 1.5rem',
          fontSize: '1rem',
          cursor: 'pointer',
          backgroundColor: '#0070f3',
          color: 'white',
          border: 'none',
          borderRadius: '4px'
        }}
      >
        播放下一个视频
      </button>

      {/* 可选：显示当前播放进度 */}
      <p style={{ marginTop: '1rem' }}>
        当前播放：第 {currentIndex + 1} / {workouts.length} 个视频
      </p>
    </div>
  );
}

关键逻辑说明 #

• 状态管理：用useState维护当前视频的索引，通过索引从数组中获取对应视频源。
• 循环切换：handleNextVideo函数判断当前是否为最后一个视频，是则重置索引到0，否则索引递增。
• 自动循环：监听视频的onEnded事件，播放完毕后自动触发切换，实现序列循环播放。
• 播放器重置：给video标签添加key={currentVideo.id}，确保切换视频时播放器重新渲染，避免旧视频缓存残留。

注意事项 #

• 如果使用Next.js官方的next/video组件，只需替换原生video标签，核心逻辑保持一致，记得在next.config.js中配置允许的视频域名。
• 确保video字段为浏览器支持的有效视频资源地址（如MP4、WebM格式）。

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