Home / Questions / 423215
Accepted
Jorge
Asked: 2022-01-25 21:17:25 +0800 CST 2022-01-25 21:17:25 +0800 CST

Problem with useEffect and video tag in Reactjs

  • 772

I am trying to take an html video without controls and customize them, I present the problem that I need my timeline to be constantly updated with the one currentTimeof the video, I use the hooks of the react api useReffor the video useStateto change the one currentTimeof my component and useEffectfor trying to change the currentTimecode is as follows.

import React, { useRef, useState, useEffect } from 'react'
    
    export const Video = ({ url }) => {
        const player = useRef(null)
        const [currentTime, setCurrentTime] = useState(0);
        const [prueba, setPrueba] = useState(0);
    
        useEffect(() => {
            setCurrentTime(player.current.currentTime);
    
        }, [prueba]);
        
        const pruebita = () => {
            setPrueba(prueba+1);
        }

    return (
        <>
            <video
                ref={player}
                autoPlay
                src={url}
            ></video>
            <div>{currentTime}</div>
            <button onMouseDown={ pruebita }>clickeame muy seguido</button >
        </>
    )
}

The general idea is the same effect that is generated by having trial and trial, but without any component event.

I hope you can help me greetings.

reactjs

1 Answers

  1. Best Answer

    I would not complicate myself and use a setIntervalto synchronize the time with that of your React component, remember to destroy setIntervalit through the cleanup hook, it would be something like this:

    import React, { useRef, useState, useEffect } from 'react'
    
    export const Video = ({ url }) => {
        const player = useRef(null)
        const [currentTime, setCurrentTime] = useState(0);
        const [prueba, setPrueba] = useState(0);
    
        useEffect(() => {
          const interval = setInterval(() => {
            setCurrentTime(player.current.currentTime);
          }, 900);
          return () => clearInterval(interval);
        }, [currentTime]);

    return (
        <>
            <video
                ref={player}
                autoPlay
                src={url}
            ></video>
            <div>{currentTime}</div>
        </>
    )
}

    Sandbox, courtesy of milmal

    Here is the demo. Thank you very much milmal for the reproducible code and also for adding the rounding of the decimals of the seconds.

    update

    I don't understand why it renders you infinitely, I suppose you are having a problem with a parent element... Look at this example, in which I use the same logic and it doesn't present any type of error:

    const { useState, useEffect } = React;
    
const Video = () => {
        const [currentTime, setCurrentTime] = useState(0);
    
        useEffect(() => {
          const interval = setInterval(() => {
            setCurrentTime(currentTime +1);
          }, 1000);
          return () => clearInterval(interval);
        }, [currentTime]);

    return (
            <div>{`Han pasado ${currentTime} segundos`}</div>
    )
}


ReactDOM.render(
  <Video/>,
  document.getElementById("react")
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

    • 1