如何获取Expo-Video-Player播放视频的已播放时长？

你可以通过已声明的videoRef结合expo-av的播放状态API来获取已播放时长，具体实现如下：

1. 确保正确创建videoRef #

首先在组件内用useRef创建视频引用：

import { useRef, useState } from 'react';
import { Video } from 'expo-av';
import ExpoVideoPlayer from 'expo-video-player';

export default function YourVideoComponent() {
  const video = useRef(null);
  // 可选：用状态存储已播放时长，方便组件内复用
  const [playedDuration, setPlayedDuration] = useState(0);
  const videoUrl = "你的视频地址";
  // ...playIcon、replayIcon、pauseIcon等变量定义

2. 实时监听获取已播放时长 #

在videoProps中添加onPlaybackStatusUpdate回调，实时监听播放状态并提取已播放时长：

<ExpoVideoPlayer
  videoProps={{
    resizeMode: Video.RESIZE_MODE_STRETCH,
    source: { uri: videoUrl },
    // 监听播放状态更新
    onPlaybackStatusUpdate: (status) => {
      if (status.isLoaded && !status.isBuffering) {
        // status.position 即为已播放时长（单位：秒）
        setPlayedDuration(status.position);
        console.log("已播放时长：", status.position.toFixed(2), "秒");
      }
    }
  }}
  inFullscreen={false}
  showControlsOnLoad={true}
  videoBackground="#fff"
  height={200}
  videoRef={video}
  showFullscreenButton={false}
  playIcon={() => playIcon}
  replayIcon={() => replayIcon}
  pauseIcon={() => pauseIcon}
  sliderColor="#CE4A52"
/>

3. 主动获取当前已播放时长 #

如果需要在特定时机（比如按钮点击）主动获取时长，可调用视频引用的getStatusAsync方法：

const getCurrentDuration = async () => {
  if (!video.current) return;
  const status = await video.current.getStatusAsync();
  if (status.isLoaded) {
    console.log("当前已播放时长：", status.position.toFixed(2), "秒");
    setPlayedDuration(status.position);
  }
};

// 可绑定到按钮触发
// <Button title="查看当前时长" onPress={getCurrentDuration} />

关键说明 #

• status.position返回的是秒数，通过toFixed(2)可保留两位小数提升可读性
• 加入!status.isBuffering判断，避免缓冲阶段获取到不准确的时长值
• ExpoVideoPlayer基于expo-av的Video组件封装，因此可直接使用Video组件的原生API

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