Использование Video- JS с React Hooks - PullRequest
Новая
       18

Использование Video- JS с React Hooks

0 голосов
/ 10 марта 2020

Я пытаюсь реализовать видеопроигрыватель js с React с использованием хуков. Я могу инициализировать плеер, и все в порядке, я хочу иметь возможность обновлять состояние в зависимости от текущего времени видео. Второй 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>
  )
}

1 Ответ

0 голосов
/ 21 марта 2020

Второй useEffect обновляется только один раз, потому что его массив зависимостей (в основном, когда следует запускать useEffect снова) содержит только currentTime, который устанавливается только один раз (при первом запуске useEffect).

Позвольте мне знать, если это работает для вас.

https://codesandbox.io/embed/fast-dust-zvlbn?fontsize=14&hidenavigation=1&theme=dark

...