Send a Video element as props to child component React

user_7008104 0
Viewed 387

Is there posibility to send as prop Video element to child component in React?

Context: I would like to make child component which analyzes a video and draws result on canvas element. In order to this component needs video content and his attributes. Is that possible and how?

send react-props reactjs video parent-child
1 Answers

You can consider useRef hook to get DOM video node access.

function Parent() {
  const videoRef = useRef();

  return (
    <div>
      <video ref={videoRef} />
      <Child videoRef={videoRef} />
    </div>
  )
}



function Child({ videoRef }) {
  const [duration, setDuration] = useState(0)
  useEffect(() => {
    const videoElement = videoRef.current;

    setDuration(videoElement.duration);
  }, []);

  return <div>Video duration is {duration}</div>
}
user_24467990
Related