使用视频JS与React挂钩

Question

我正在尝试使用钩子用React实现一个视频js播放器。我能够初始化播放器，一切都很好，我希望能够根据视频的当前时间更新状态。第二个useEffect运行一次，不想继续重新渲染以更新状态(currentTime保持在0(，我相信问题很简单，而且是基于语法的，谢谢！

export default function VideoPlayer ({ videoSrc }) {
const videoPlayerRef = useRef() // Instead of ID
const [currentTime, setCurrentTime] = useState(null)
const videoJSOptions = {
autoplay: 'muted',
fluid: true,
controls: true,
userActions: { hotkeys: true },
playbackRates: [0.5, 1, 1.5, 2]
}
// Initialise video player
useEffect(() => {
const player = videojs(videoPlayerRef.current, videoJSOptions, () => {
player.src(videoSrc)
console.log('Player Ready')
})
return () => {
player.dispose()
console.log('Player Disposed')
}
}, [])
/* Testing video properties */
useEffect(() => {
const player = videojs(videoPlayerRef.current)
setCurrentTime(player.currentTime())
}, [currentTime])
return (
<div>
<video ref={videoPlayerRef} className='video-js' />
<span>Current Time: {currentTime}</span>
<GlobalStyle />
</div>
)
}

Answer 1

第二个useEffect只更新一次，因为它的依赖项数组(基本上是useEffect何时应该再次运行(只包含currentTime，它只设置了一次(在第一次运行useEffect时(。

让我知道这是否适合你。

https://codesandbox.io/embed/fast-dust-zvlbn?fontsize=14&隐藏导航=1&主题=深色