React Basics~useRef/비디오 재생

• useRef는 DOM 요소의 상태를 추적하는 반응 후크 중 하나입니다.

• 이 후크를 사용하여 DOM 요소의 상태를 제어할 수도 있습니다.

・src/Example.js

import { useRef, useState } from "react";

const Video = () => {
  const [playing, setPlaying] = useState();
  const videoRef = useRef();

  return (
    <div>
      <video style={{ maxWidth: "100%" }} ref={videoRef}>
        <source src="./sample.mp4"></source>
      </video>
      <button
        onClick={() => {
          if (playing) {
            videoRef.current.pause();
          } else {
            videoRef.current.play();
          }
          setPlaying((prev) => !prev);
        }}
      >
        {playing ? "Stop" : "Play"}
      </button>
    </div>
  );
};

const Example = () => {
  return (
    <>
      <Video />
    </>
  );
};

export default Example;

・useRef 값을 video 요소의 ref 속성에 대한 videoRef로 설정합니다.

・버튼을 누르면 버튼의 onClick 함수에서 videoRef.current.pause() 또는 videoRef.current.play()를 사용하여 비디오 작업을 제어할 수 있습니다.

・플레이 액션입니다.

・정지 동작입니다.

액션을 영상으로 보여드릴 수 없어서 죄송합니다.

위 내용은 React Basics~useRef/비디오 재생의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!