React Basics~useRef/lecture vidéo-js tutoriel-php.cn

React Basics~useRef/lecture vidéo

DDD

Libérer： 2024-10-11 18:39:02

original

253 Les gens l'ont consulté

The useRef is one of the react hooks that tracks the state of DOM elements.
We can also control the state of DOM elements using this hook.

・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;

Copier après la connexion

・We set a value of useRef as videoRef to the video element's ref attribute.

・When we press the button, we can control the video action using videoRef.current.pause() or videoRef.current.play() in the button's onClick function.

・This is a playing action.

React Basics~useRef/ video playing