React Functional component html5 video player capture events

Question

I am trying to capture events from an html <video/> tag. I have set a ref to it, and using a useEffect am trying to capture the events. However, i beleive I am not handling the ref correctly and am not capturing any of the events. Can someone spot my error?

  const elementRef = useRef(null);
  function handleEvent(event) {
    console.log(`${event.type}\n`);
  }
  useEffect(() => {
    return () => {
      elementRef.addEventListener('loadstart', handleEvent);
      elementRef.addEventListener('progress', handleEvent);
      elementRef.addEventListener('canplay', handleEvent);
      elementRef.addEventListener('canplaythrough', handleEvent);
      elementRef.addEventListener('ended', handleEvent);
      elementRef.addEventListener('pause', handleEvent);
      elementRef.addEventListener('play', handleEvent);
      elementRef.addEventListener('playing', handleEvent);
      elementRef.addEventListener('ratechange', handleEvent);
      elementRef.addEventListener('seeking', handleEvent);
      elementRef.addEventListener('stalled', handleEvent);
    };
  }, [elementRef]);

in my return i have <video controls src={FirstVid} poster={Poster} width="620" ref={(el) => (elementRef.current = el)}/>

Abraham Labkovsky · Accepted Answer · 2020-12-23 16:10:24Z

1

Use the return of useEffect only for cleanup (removeEventListeners). Add listeners before the return.

Edit: I never heard of using a function as the value of the ref prop

<video controls src={FirstVid} poster={Poster} width="620" ref={elementRef}/>

Then

elementRef.current.addEventListener('loadstart', handleEvent);

But I have not read all the docs so no guarantees...

I would try something like the following:

const elementRef = useRef(null);
  function handleEvent(event) {
    // use a switch/case to check for each event
    console.log(`${event.type}\n`);
  }
  useEffect(() => {
      ['loadstart', /* all the other events */].forEach(event => 
        elementRef.current.addEventListener(event, handleEvent);
      )
      return () => {/* remove all event listeners here */}
  }, [elementRef]);
return <video controls src={FirstVid} poster={Poster} width="620" ref={elementRef}/>

edited Dec 23, 2020 at 16:10

answered Dec 23, 2020 at 15:57

Abraham Labkovsky

1,9668 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

IWI Over a year ago

If i pull it out of the effect it returns a "elementref is Not a function" error, as elementref is defined as null right above

IWI Over a year ago

Yes I see, worked great. I guess the issuen was with how i set the ref. Thanks for the response. I was struggling

Abraham Labkovsky Over a year ago

You are very welcome. 1 final edit. I switched my code sample to use an Array of events to make the sample more DRY

Abraham Labkovsky Over a year ago

I also suggested you use a switch in the handler to define specific behavior for each event

IWI Over a year ago

Thanks @Abraham Labkovsky, I will implement a switch

Collectives™ on Stack Overflow

React Functional component html5 video player capture events

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related