如何在react-native-video中按指定时间间隔循环播放视频实现修剪预览？

核心思路 #

借助react-native-video的onProgress事件实时监控播放进度，配合seek方法手动控制播放位置，让视频在自定义的修剪区间（startTime至endTime）内循环播放。

具体实现代码 #

先定义状态变量存储修剪区间和视频实例引用：

import React, { useRef, useState } from 'react';
import Video from 'react-native-video';

const VideoTrimmerPlayer = () => {
  const videoRef = useRef(null);
  // 修剪区间，可直接对接你的修剪器组件输出值
  const [trimRange, setTrimRange] = useState({
    start: 10, // 起始时间（单位：秒）
    end: 30    // 结束时间（单位：秒）
  });
  const [isPlaying, setIsPlaying] = useState(true);

  // 监听播放进度，控制循环逻辑
  const handleProgress = (data) => {
    const currentTime = data.currentTime;
    const { start, end } = trimRange;

    // 播放到区间结束点时，跳转到起始点
    if (currentTime >= end) {
      videoRef.current?.seek(start);
    }
    // 处理视频当前时间落在区间外的情况（比如用户手动拖动到区间外）
    else if (currentTime < start) {
      videoRef.current?.seek(start);
    }
  };

  // 修剪区间更新时，确保视频回到新区间的起始位置
  const handleTrimRangeChange = (newRange) => {
    setTrimRange(newRange);
    videoRef.current?.seek(newRange.start);
  };

  return (
    <>
      <Video
        ref={videoRef}
        source={{ uri: '你的视频地址' }}
        style={{ width: '100%', height: 200 }}
        paused={!isPlaying}
        onProgress={handleProgress}
        // 关闭原生循环，避免和自定义逻辑冲突
        repeat={false}
      />
      {/* 你的修剪器组件，传递回调更新区间 */}
      {/* <YourTrimmerComponent onRangeChange={handleTrimRangeChange} /> */}
    </>
  );
};

export default VideoTrimmerPlayer;

优化建议 #

• 减少频繁跳转：给结束点判断加小阈值，比如currentTime >= end - 0.1，规避进度回调精度问题导致的重复跳转。
• 修剪器交互优化：用户拖动修剪器调整区间时，暂停视频，调整完成后再恢复播放，提升体验。
• 性能节流：如果onProgress回调过于频繁，用setTimeout做节流处理，比如每100ms检查一次进度。

平滑循环扩展（可选） #

如果需要实现过渡更自然的循环，可结合Animated做进度补间动画，但对于预览场景来说，直接seek的方式性能更优，足以满足需求。

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