Блог

Главная - Вопросы по программированию - События захвата видеоплеера html5 функционального компонента React

События захвата видеоплеера html5 функционального компонента React

#reactjs

#reactjs

Вопрос:

Я пытаюсь захватить события из <video/> тега html. Я установил для него ссылку и, используя a useEffect , пытаюсь зафиксировать события. Тем не менее, я полагаю, что неправильно обрабатываю ссылку и не фиксирую ни одно из событий. Может кто-нибудь заметить мою ошибку?

   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]);

в return моем <video controls src={FirstVid} poster={Poster} width="620" ref={(el) => (elementRef.current = el)}/>

Ответ №1:

Используйте возврат useEffect только для очистки ( removeEventListener ов). Добавьте слушателей перед возвратом.

Редактировать: я никогда не слышал об использовании функции в качестве значения ref prop

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

Затем

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

Но я не читал все документы, так что никаких гарантий нет…

Я бы попробовал что-то вроде следующего:

 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}/>

Комментарии:

1. Если я извлекаю его из эффекта, он возвращает ошибку «elementref не является функцией», так как elementref определяется как null прямо выше

2. Да, я вижу, отлично сработало. Я думаю, проблема была в том, как я установил ссылку. Спасибо за ответ. Я боролся

3. Добро пожаловать. 1 заключительное редактирование. Я переключил свой образец кода на использование массива событий, чтобы сделать образец более СУХИМ

4. Я также предложил вам использовать a switch в обработчике для определения конкретного поведения для каждого события

5. Спасибо @Abraham Labkovsky, я внедрю переключатель