如何在react-native-vimeo-iframe中检测并禁止用户拖动视频进度

核心思路是实时记录播放进度，在用户触发拖动操作的瞬间强制回滚到之前的位置。你之前用seeked事件可能太晚了——这个事件是拖动完成后才触发，用户已经能看到进度变化；而seeking是用户开始拖动时触发，这时候拦截更及时。

以下是具体实现代码：

import React, { useState, useRef } from 'react';
import VimeoIframe from 'react-native-vimeo-iframe';

const RestrictedVimeoPlayer = () => {
  const [currentValidTime, setCurrentValidTime] = useState(0);
  const vimeoPlayerRef = useRef(null);

  // 实时更新有效播放进度（用户拖动前的正常播放位置）
  const handlePlayProgress = (progressData) => {
    if (typeof progressData.seconds === 'number') {
      setCurrentValidTime(progressData.seconds);
    }
  };

  // 用户开始拖动时，立即强制跳回有效进度
  const handleSeeking = () => {
    if (vimeoPlayerRef.current && currentValidTime !== null) {
      vimeoPlayerRef.current.seek(currentValidTime);
    }
  };

  // 视频加载完成后初始化进度
  const handleReady = (readyData) => {
    setCurrentValidTime(0);
  };

  return (
    <VimeoIframe
      ref={vimeoPlayerRef}
      videoId="your-target-video-id"
      onPlayProgress={handlePlayProgress}
      onSeeking={handleSeeking}
      onReady={handleReady}
      autoplay={false}
      controls={true} // 保留控件但拦截拖动操作
    />
  );
};

export default RestrictedVimeoPlayer;

关键细节说明： #

• 使用useRef获取播放器实例，这样才能调用seek方法强制跳转进度
• onPlayProgress会在视频正常播放时持续触发，确保currentValidTime始终是用户拖动前的最后有效位置
• onSeeking在用户点击进度条开始拖动的瞬间触发，此时立即调用seek回滚，用户几乎看不到进度变化
• 如果遇到onSeeking拦截不及时的情况，可以额外加上onSeeked事件做兜底，在拖动完成后再强制回滚一次

内容的提问来源于stack exchange，提问作者Hoang Tuan Nguyen