如何在React中设置视频从指定时间戳开始播放？

首先你需要将目标起始时间转换为总秒数，示例中的00:07:12,600（7分12秒600毫秒）换算后为432.6秒，换算公式为：
总秒数 = 小时数 * 3600 + 分钟数 * 60 + 秒数（含毫秒的小数部分）

方案1：使用start属性（推荐，简单直接） #

直接给ReactPlayer组件传入start属性，值为换算后的总秒数即可，播放器加载后会自动从该时间开始播放：

import style from './Hero.module.css';
import Image from 'next/image';
import ReactPlayer from 'react-player';
import { useState } from 'react';

export default function Index() {
  const [isPlaying, setIsPlaying] = useState(true);
  // 定义起始播放时间，单位为秒，此处为00:07:12,600换算后的结果
  const START_TIME = 432.6;

  return (
    <div className={style.hero_container}>
      {/* <Image src="/images/hero/hero1.jpg" alt="Logo" height={400} width={700} /> */}

      <ReactPlayer
        url="/videos/Dexter.S01E03.1080p.5.1Ch.BluRay.ReEnc-DeeJayAhmed.mkv"
        playing={isPlaying}
        width="100%"
        height="100%"
        controls={true}
        // 新增start属性指定起始时间
        start={START_TIME}
      />
    </div>
  );
}

方案2：使用onReady回调调用seekTo方法（适合动态跳转场景） #

如果需要在播放器加载完成后动态调整起始播放时间，可以通过ref获取播放器实例，在onReady回调中调用seekTo方法实现跳转：

import style from './Hero.module.css';
import Image from 'next/image';
import ReactPlayer from 'react-player';
import { useState, useRef } from 'react';

export default function Index() {
  const [isPlaying, setIsPlaying] = useState(true);
  const playerRef = useRef(null);
  const START_TIME = 432.6;

  const handlePlayerReady = () => {
    // 播放器加载完成后跳转到指定时间
    playerRef.current?.seekTo(START_TIME, 'seconds');
  }

  return (
    <div className={style.hero_container}>
      {/* <Image src="/images/hero/hero1.jpg" alt="Logo" height={400} width={700} /> */}

      <ReactPlayer
        ref={playerRef}
        url="/videos/Dexter.S01E03.1080p.5.1Ch.BluRay.ReEnc-DeeJayAhmed.mkv"
        playing={isPlaying}
        width="100%"
        height="100%"
        controls={true}
        onReady={handlePlayerReady}
      />
    </div>
  );
}

注意事项 #

• 如果你使用的本地视频文件（如示例中的mkv格式），需要确保视频文件本身带有关键帧索引，否则seek操作可能失效
• 时间换算时注意毫秒部分需要转成小数，比如600毫秒就是0.6秒

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