[React] Video Element 삽입하기, 동영상 재생속도 조절 등

웹페이지의 배경을 이미지가 아닌 동영상으로 삽입하고 싶었다.

1. 로컬에 있는 동영상 video element로 불러오기
2. 동영상의 오디오 무음, 자동재생, 반복재생 및 재생속도 조절 필요

import { useRef } from "react;
import Video from "../videos/Video.mp4"

fucntion Background() {
  const videoRef= useRef();
  const setPlayBackRate = () => {
    videoRef.current.playbackRate = 0.5;
  };
  return (
    <div className={styles.jb_box}>
      <video
        muted
        autoPlay
        loop
        ref={videoRef}
        onCanPlay={() => setPlayBackRate()}
      >
        <source src={Video} type="video/mp4" />
      </video>
    </div>
  );
}

export default Background;

위와 같이, setPlayBackRate이라는 동영상 속도 조절을 위한 함수를 생성했다.

• useRef를 이용하여 동영상 속도 조절은 playbackRate = "재생속도"로 할 수 있다. *재생속도: 0.5 (0.5배속), 1.0 (기본 배속), 2.0 (2배속)
• video element에 onCanPlay Prop을 추가하여 해당 함수 삽입하면 동영상 재생이 준비가 되면 함수를 호출하는 이벤트가 발생한다.

또한 source의 src는 로컬에 있는 동영상을 import하여 넣어주었다.

💡 사용한 Video element properties
1. muted: 오디오 무음
2. autoPlay: 자동 재생
3. loop: 반복 재생
4. onCanPlay: 지정된 동영상 재생을 시작할 준비가 되면 발생하는 이벤트