這是我的組件，我想從某個時間（例如 00:07:12,600）開始自動播放，而不是從一開始。
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);
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}
/>
</div>
);
}
將onReady事件與seekTo方法一起使用。
像這樣的東西
const playerRef = React.useRef();
const onReady = React.useCallback(() => {
const timeToStart = (7 * 60) + 12.6;
playerRef.current.seekTo(timeToStart, 'seconds');
}, [playerRef.current]);
<ReactPlayer
ref={playerRef}
url="/videos/Dexter.S01E03.1080p.5.1Ch.BluRay.ReEnc-DeeJayAhmed.mkv"
playing={isPlaying}
width="100%"
height="100%"
controls={true}
onReady={onReady}
/>
更新
看起來onReady在每個搜索事件之後都會觸發，所以我們需要一些額外的邏輯。
const [isPlaying, setIsPlaying] = React.useState(true);
const [isReady, setIsReady] = React.useState(false);
const playerRef = React.useRef();
const onReady = React.useCallback(() => {
if (!isReady) {
const timeToStart = (7 * 60) + 12.6;
playerRef.current.seekTo(timeToStart, "seconds");
setIsReady(true);
}
}, [isReady]);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다