[React] video 태그(동영상) 관련 함수 활용

웹 개발 하면서 비디오 태그의 상태에 따라 작동해야 하는 기능을 만들때, 항상 고민 했습니다.

이번 글은

1. 동영상이 멈췄을 때

2. 동영상이 재생 되었을 때

3. 동영상 재생 중

을 감지하는 기능입니다.

 

 

전채 코드

import "./styles.css";
import React, {useState, useEffect,useRef,} from 'react';
export default function App() {
  let videoTag = document.getElementById("videoTag1");
  let VideoState = useRef(true);
  let onLoadFile = (e) => {
    let file = e.target.files;
    videoTag = document.getElementById("videoTag1");
    let videourl = URL.createObjectURL(file[0]);
    videoTag.setAttribute("src", videourl);
    videoTag.addEventListener( "loadedmetadata", function () {
      videoTag.ontimeupdate = function() {
        console.log("재생중: "+ videoTag.currentTime);
      };
      videoTag.onplaying = function() {
        console.log("재생됨");
        VideoState.current = true;
      };
      videoTag.onpause= function() {
        console.log("정지됨");
        VideoState.current = false;
      };
      videoTag.play();
    }, false);
  }
  let VideoOnOff = (e) => {
    if(VideoState.current === true){
      videoTag.pause();
    }else{
      videoTag.play();
    }
  }
  return (
    <div className="App">
      <h1>Video 태그 리스너</h1>
      <input type="file" id="videoTag" onChange={onLoadFile} />
      <video id="videoTag1" width={300} onClick={VideoOnOff} ></video>
    </div>
  );
}