PHP前端开发

React 基础知识~useRef/ 视频播放

百变鹏仔 3个月前 (10-13) #JavaScript
文章标签 基础知识

・src/example.js

import { useRef, useState } from "react";const Video = () =&gt; {  const [playing, setPlaying] = useState();  const videoRef = useRef();  return (    <div>      <video style="{{" maxwidth: ref="{videoRef}"><source src="./sample.mp4"></source></video><button onclick="{()"> {          if (playing) {            videoRef.current.pause();          } else {            videoRef.current.play();          }          setPlaying((prev) =&gt; !prev);        }}      &gt;        {playing ? "Stop" : "Play"}      </button>    </div>  );};const Example = () =&gt; {  return (          <video></video>&gt;  );};export default Example;

・我们将 useref 的值设置为 videoref 到视频元素的 ref 属性。

・当我们按下按钮时,我们可以使用按钮的 onclick 函数中的 videoref.current.pause() 或 videoref.current.play() 来控制视频动作。

・这是一个玩耍动作。

・这是一个停止动作。

抱歉,我无法以视频形式显示该动作。