React Responsive Carousel单视频分段播放与内容联动实现问询

核心思路 #

放弃多视频轮播方案，改用单个视频元素配合自定义指示器，通过控制视频播放进度+监听播放事件，实现指示器与文字内容的同步联动：

1. 自定义3个指示器按钮，点击时直接跳转视频到对应时间点并自动播放
2. 监听视频的timeupdate事件，根据当前播放时间自动切换激活的指示器和对应文字
3. 维护状态变量同步当前激活的指示器索引，关联视频进度与文字内容展示

完整代码示例 #

import { useState, useRef, useEffect } from 'react';

const VideoTimelinePlayer = () => {
  // 视频DOM引用，用于控制播放进度与状态
  const videoRef = useRef(null);
  // 当前激活的指示器索引（0: 开头, 1: 6秒, 2:13秒）
  const [activeIndex, setActiveIndex] = useState(0);
  // 对应各时间节点的文字内容
  const textContents = [
    "视频开头的介绍文案",
    "6秒处展示的核心内容说明",
    "13秒后的补充信息文本"
  ];
  // 指示器对应的跳转时间点配置
  const timePoints = [0, 6, 13];

  // 点击指示器跳转视频时间并更新状态
  const handleIndicatorClick = (index) => {
    if (videoRef.current) {
      videoRef.current.currentTime = timePoints[index];
      videoRef.current.play();
      setActiveIndex(index);
    }
  };

  // 监听视频播放时间，自动同步指示器与文字
  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const syncTimeline = () => {
      const currentTime = video.currentTime;
      if (currentTime < timePoints[1]) {
        setActiveIndex(0);
      } else if (currentTime < timePoints[2]) {
        setActiveIndex(1);
      } else {
        setActiveIndex(2);
      }
    };

    video.addEventListener('timeupdate', syncTimeline);
    return () => video.removeEventListener('timeupdate', syncTimeline);
  }, [timePoints]);

  return (
    <div className="video-player-wrapper">
      {/* 视频元素 */}
      <video
        ref={videoRef}
        controls
        className="video-item"
        src="/your-target-video.mp4" // 替换为你的视频地址
        poster="/video-cover.jpg" // 可选：设置视频封面图
      />

      {/* 自定义指示器组 */}
      <div className="indicators-group">
        {timePoints.map((_, index) => (
          <button
            key={index}
            className={`indicator ${activeIndex === index ? 'active' : ''}`}
            onClick={() => handleIndicatorClick(index)}
          >
            章节 {index + 1}
          </button>
        ))}
      </div>

      {/* 同步展示的文字内容 */}
      <div className="synced-text">
        {textContents[activeIndex]}
      </div>
    </div>
  );
};

export default VideoTimelinePlayer;

关键细节补充 #

1. 视频控制逻辑：通过useRef获取video DOM节点，直接操作currentTime属性跳转播放位置，调用play()实现点击后自动播放
2. 时间监听机制：timeupdate事件会在视频播放时间变化时触发（默认每秒4-6次），通过判断当前时间区间，自动更新激活状态与文字内容
3. 样式自定义示例：可以通过CSS给激活状态的指示器添加高亮效果：

.video-player-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.video-item {
  width: 100%;
  border-radius: 8px;
}

.indicators-group {
  display: flex;
  gap: 12px;
  margin: 15px 0;
}

.indicator {
  padding: 8px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.indicator.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.synced-text {
  padding: 12px;
  background: #f8fafc;
  border-radius: 4px;
  line-height: 1.5;
}

4. 边界处理：如果视频实际时长小于13秒，需根据实际情况调整timePoints数组的数值，避免出现逻辑异常

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