React の基本~useRef/ビデオの再生

• useRef は、DOM 要素の状態を追跡する反応フックの 1 つです。

• このフックを使用して 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;

・video要素のref属性にvideoRefとしてuseRefの値を設定します。

・ボタンを押したとき、ボタンの onClick 関数の videoRef.current.pause() または videoRef.current.play() を使用してビデオ アクションを制御できます。

・これは遊びのアクションです。

・これは停止動作です。

申し訳ありませんが、アクションをビデオとして表示できません。

以上がReact の基本~useRef/ビデオの再生の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。