如何在react-native-video中禁用进度跳转（seek）功能？

我之前也遇到过类似的需求，用onSeek直接退出播放器没生效的原因，大概率是因为原生的进度控制条还能被用户操作，而且有些平台的seek操作可能绕过了JS层的回调。下面是我验证过的可行方案，核心是从UI拦截和逻辑校验两个层面入手：

关键思路 #

1. 隐藏原生控制条：用户没法点击进度条跳转是前提，否则任何JS层的拦截都可能失效；
2. 实时监听播放进度：一旦超过30秒就强制暂停，确保用户没法继续观看后续内容；
3. 拦截所有seek操作：不管是代码触发还是意外的seek请求，都把进度限制在0-30秒范围内。

完整代码示例 #

结合你提供的代码片段，修改后的实现如下：

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

const LimitedPreviewVideo = ({ uri, onDismiss }) => {
  const [loading, setLoading] = useState(true);
  const videoRef = useRef(null);
  const MAX_PREVIEW_SECONDS = 30; // 固定30秒预览时长

  // 监听播放进度，超过30秒立即暂停
  const handleProgress = (progressData) => {
    if (progressData.currentTime >= MAX_PREVIEW_SECONDS) {
      videoRef.current?.pause();
    }
  };

  // 拦截所有seek操作，强制限制进度范围
  const handleSeek = (seekData) => {
    const targetTime = seekData.seekTime;
    if (targetTime > MAX_PREVIEW_SECONDS) {
      // 试图跳到30秒后，强制拉回30秒位置并暂停
      videoRef.current?.seek(MAX_PREVIEW_SECONDS);
      videoRef.current?.pause();
    } else if (targetTime < 0) {
      // 防止跳到负数进度
      videoRef.current?.seek(0);
    }
  };

  // 可选：加载完成后自动开始播放
  const handleLoad = () => {
    setLoading(false);
    videoRef.current?.play();
  };

  return (
    <>
      {loading ? (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      ) : (
        <Video
          ref={videoRef}
          source={{ uri: uri }}
          onFullscreenPlayerDidDismiss={onDismiss}
          preferredPeakBitrate={this.state?.preferredPeakBitrate} // 保留你原有的属性
          controls={false} // 必须隐藏原生控制条！
          onProgress={handleProgress}
          onSeek={handleSeek}
          onLoad={handleLoad}
          resizeMode="contain"
          style={{ flex: 1 }}
        />
      )}
    </>
  );
};

export default LimitedPreviewVideo;

重点说明 #

• controls={false}是核心：原生控制条的seek操作很多时候是在原生层处理的，JS层的onSeek可能拦截不到，所以必须隐藏它。如果需要播放/暂停按钮，可以自己用TouchableOpacity实现，通过videoRef控制播放状态。
• onProgress的实时校验：确保即使没有seek操作，用户也没法观看30秒以后的内容，比如视频正常播放到30秒时自动暂停。
• onSeek的兜底拦截：防止某些特殊场景下的seek请求（比如第三方插件、代码误调用），把进度牢牢锁在预览范围内。

如果需要自定义UI（比如只保留播放/暂停按钮），只需要在Video组件上层叠加自己的按钮组件，通过videoRef调用play()和pause()即可，完全不需要进度条相关的元素。

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