React Native Video播放时显示倒计时计时器的实现需求

没问题，这个需求在视频播放场景里很常见，我帮你整理了一个完整的可行方案，直接就能复用：

1. 安装依赖 #

首先确保你已经安装了react-native-video，如果还没装，执行下面的命令：

# 使用npm
npm install react-native-video --save

# 或者使用yarn
yarn add react-native-video

注意：如果是React Native 0.60以下版本，还需要手动链接，不过现在大部分项目都是0.60+了，自动链接即可

2. 完整组件实现 #

下面是一个封装好的播放器组件，自带倒计时功能：

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

const VideoPlayerWithCountdown = ({ videoUrl }) => {
  // 视频相关状态
  const [duration, setDuration] = useState(0); // 视频总时长（秒）
  const [currentTime, setCurrentTime] = useState(0); // 当前播放位置（秒）
  const [remainingTime, setRemainingTime] = useState(0); // 剩余时间（秒）
  const videoRef = useRef(null);

  // 格式化时间为 mm:ss 格式
  const formatTime = (seconds) => {
    if (seconds <= 0) return '00:00';
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  // 视频加载完成时获取总时长
  const handleVideoLoad = (data) => {
    const totalDuration = data.duration;
    setDuration(totalDuration);
    setRemainingTime(totalDuration);
  };

  // 播放进度更新时计算剩余时间
  const handleProgress = (data) => {
    const current = data.currentTime;
    setCurrentTime(current);
    setRemainingTime(duration - current);
  };

  // 视频结束时重置状态
  const handleVideoEnd = () => {
    setRemainingTime(0);
  };

  return (
    <View style={styles.container}>
      {/* 视频播放器 */}
      <Video
        ref={videoRef}
        source={{ uri: videoUrl }}
        style={styles.video}
        resizeMode="contain"
        onLoad={handleVideoLoad}
        onProgress={handleProgress}
        onEnd={handleVideoEnd}
        controls={true} // 显示默认播放控件，不需要可以设为false
      />
      {/* 倒计时显示 */}
      <View style={styles.countdownContainer}>
        {remainingTime > 0 ? (
          <Text style={styles.countdownText}>
            剩余播放时间: {formatTime(remainingTime)}
          </Text>
        ) : (
          <Text style={styles.endText}>视频已播放结束</Text>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
  video: {
    width: '100%',
    height: 300,
    backgroundColor: '#000',
  },
  countdownContainer: {
    marginTop: 15,
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  countdownText: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
  },
  endText: {
    fontSize: 16,
    color: '#666',
    fontStyle: 'italic',
  },
});

export default VideoPlayerWithCountdown;

3. 使用方法 #

在你的页面中直接引入这个组件，传入视频地址即可：

<VideoPlayerWithCountdown videoUrl="你的视频地址" />

关键逻辑说明 #

• 通过onLoad事件获取视频的总时长，初始化剩余时间
• 通过onProgress事件实时获取当前播放进度，计算剩余时间（总时长 - 当前播放时间）
• 用formatTime辅助函数把秒数转换成用户友好的mm:ss格式
• 视频结束时通过onEnd事件更新状态，显示结束提示

额外优化建议 #

• 如果需要更精确的倒计时，可以调整onProgress的触发频率（通过progressUpdateInterval属性，单位是毫秒，默认250ms）
• 可以自定义倒计时的样式，比如添加动画效果，或者把倒计时放在播放器的叠加层里
• 如果视频是本地资源，把source改成require('./your-video.mp4')即可

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