Logo

菜单

发布于 2026-01-06 3 阅读
0

使用 React 创建自定义视频播放器📽️

使用 React 创建自定义视频播放器📽️

大家好，在本教程中，我们将学习如何在 React 中构建一个自定义视频播放器。让我们直接开始吧！

直接跳进去

设置

创建一个新的 React 应用



npx create-react-app custom-video-player
Enter fullscreen mode Exit fullscreen mode

清理

  • 删除 app div 中的所有内容App.js。


import "./App.css";

function App() {
  return <div className="app"></div>;
}

export default App;
Enter fullscreen mode Exit fullscreen mode

  • 删除所有内容App.css

  • 在index.css添加-



* {
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

为我们的视频播放器创建用户界面

添加视频

在应用 div 元素内添加一个视频标签，并设置视频的 src 属性。我还会添加一个 className 来进行样式设置。



 <video
    className="video"
    src="https://res.cloudinary.com/dssvrf9oz/video/upload/v1635662987/pexels-pavel-danilyuk-5359634_1_gmixla.mp4"
 ></video>
Enter fullscreen mode Exit fullscreen mode

添加视频控制功能

在视频组件下方，我会添加一个包含一些 SVG 图标的 div 元素。你可以像我一样直接使用 SVG 图标，也可以使用图标库。



  <div className="controlsContainer">
        <div className="controls">
          <img className="controlsIcon" alt="" src="/backward-5.svg" />
          <img className="controlsIcon--small" alt="" src="/play.svg" />
          <img className="controlsIcon" alt="" src="/forward-5.svg" />
        </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

添加时间进度条

我们还将创建一个进度条，显示视频的当前时间和总时长。



 <div className="timecontrols">
        <p className="controlsTime">1:02</p>
        <div className="time_progressbarContainer">
          <div style={{ width: "40%" }} className="time_progressBar"></div>
        </div>
        <p className="controlsTime">2:05</p>
   </div>
Enter fullscreen mode Exit fullscreen mode

请原谅我课程命名规范不太好。因为用了 Tailwind，我都忘了怎么给课程命名了 :P

用户界面样式

视频播放器现在看起来很丑，所以我们来美化一下它。我将在App.css 文件中添加一些样式。



/* Main Container */

.app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Video */

.video {
  width: 100vw;
  height: 100vh;
}

/* Controls */

.controlsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  background-color: transparent;
  margin-top: -50vw;
  padding: 0 40px;
  z-index: 20;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 18rem;
  margin: auto;
}

.controlsIcon {
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-left: 10rem;
  margin-right: 10rem;
}

.controlsIcon--small {
  width: 32px;
  height: 32px;
  cursor: pointer;
  margin-left: 10rem;
  margin-right: 10rem;
}

/* The time controls section */

.timecontrols {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  bottom: 4rem;
  margin-left: 10vw;
}

.time_progressbarContainer {
  background-color: gray;
  border-radius: 15px;
  width: 75vw;
  height: 5px;
  z-index: 30;
  position: relative;
  margin: 0 20px;
}

.time_progressBar {
  border-radius: 15px;
  background-color: indigo;
  height: 100%;
}

.controlsTime {
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

现在我们的视频播放器看起来会是这样——

image.png

为玩家添加逻辑

要实现这些功能，我们首先需要使用 useRef 钩子将一个引用附加到视频上。请按照以下步骤操作：

  • 创建类似这样的引用：


const videoRef = useRef(null);
Enter fullscreen mode Exit fullscreen mode
  • 从 React 中导入 useRef hook


import { useRef } from "react";
Enter fullscreen mode Exit fullscreen mode
  • 将其附加到视频中


 <video
    ref={videoRef}
    className="video"
    src="https://res.cloudinary.com/dssvrf9oz/video/upload/v1635662987/pexels-pavel-danilyuk-5359634_1_gmixla.mp4"
 ></video>
Enter fullscreen mode Exit fullscreen mode

播放和暂停功能

创建一个简单的播放/暂停函数，该函数接受一个控制参数，并根据该控制参数来播放或暂停视频。



 const videoHandler = (control) => {
    if (control === "play") {
      videoRef.current.play();
    } else if (control === "pause") {
      videoRef.current.pause();
    }
  };
Enter fullscreen mode Exit fullscreen mode

现在，在 play.svg 图像中，我们将添加一个 onClick 函数来播放视频。



  <img
     onClick={() => videoHandler("play")}
     className="controlsIcon--small"
     alt=""
     src="/play.svg"
     />
Enter fullscreen mode Exit fullscreen mode

点击图标即可播放视频！

根据播放/暂停状态更改图标。
为此，我将使用 useState hook。创建一个如下所示的播放状态：



const [playing, setPlaying] = useState(false);
Enter fullscreen mode Exit fullscreen mode

在常量视频处理函数中，我们需要像这样更改它们的 onClick 值：



const videoHandler = (control) => {
    if (control === "play") {
      videoRef.current.play();
      setPlaying(true);
    } else if (control === "pause") {
      videoRef.current.pause();
      setPlaying(false);
    }
  };
Enter fullscreen mode Exit fullscreen mode

更改图标
现在，我们将使用三元运算符根据条件渲染播放图标。



  {playing ? (
            <img
              onClick={() => videoHandler("pause")}
              className="controlsIcon--small"
              alt=""
              src="/pause.svg"
            />
          ) : (
            <img
              onClick={() => videoHandler("play")}
              className="controlsIcon--small"
              alt=""
              src="/play.svg"
            />
          )}
Enter fullscreen mode Exit fullscreen mode

现在，我们可以播放和暂停视频了🥳

转发和回放视频

我将为此创建一些非常简单的函数——



 const fastForward = () => {
    videoRef.current.currentTime += 5;
  };

  const revert = () => {
    videoRef.current.currentTime -= 5;
  };
Enter fullscreen mode Exit fullscreen mode

现在我们将这些函数添加到相应按钮的 onClick 事件中。

向前



<img
  onClick={fastForward}
  className="controlsIcon"
  alt=""
  src="/forward-5.svg"
     />
Enter fullscreen mode Exit fullscreen mode

恢复



<img
  onClick={revert}
  className="controlsIcon"
  alt=""
  src="/backward-5.svg"
     />
Enter fullscreen mode Exit fullscreen mode

时间进度条

获取视频时长

要获取视频长度，请按照以下步骤操作。

  • 给视频组件分配一个 ID


 <video
    id="video1"
    ref={videoRef}
    className="video"
    src="https://res.cloudinary.com/dssvrf9oz/video/upload/v1635662987/pexels-pavel-danilyuk-5359634_1_gmixla.mp4"
 ></video>
Enter fullscreen mode Exit fullscreen mode
  • 创建一个状态来存储视频长度


const [videoTime, setVideoTime] = useState(0);
Enter fullscreen mode Exit fullscreen mode
  • 在视频播放时，按如下方式设置视频播放时间


if (control === "play") {
      videoRef.current.play();
      setPlaying(true);
      var vid = document.getElementById("video1");
      setVideoTime(vid.duration);
    }
Enter fullscreen mode Exit fullscreen mode

现在我们可以使用 videoTime 变量来代替硬编码的时间。这种字符串操作会将时间转换为类似 1:05 的格式。



  <p className="controlsTime">
    {Math.floor(videoTime / 60) + ":" + ("0" + Math.floor(videoTime % 60)).slice(-2)}
 </p>
Enter fullscreen mode Exit fullscreen mode

获取视频的当前时间

为了获取视频的当前时间，我们需要使用一个每秒运行一次的函数，所以我将使用 window.setInterval 来实现这一点。



window.setInterval(function () {
    setCurrentTime(videoRef.current?.currentTime);
  }, 1000);
Enter fullscreen mode Exit fullscreen mode

现在，和往常一样，我们需要创建一个状态来存储该值。



const [currentTime, setCurrentTime] = useState(0);
Enter fullscreen mode Exit fullscreen mode

我们将使用变量而不是硬编码值。



<p className="controlsTime">
    {Math.floor(currentTime / 60) + ":" + ("0" + Math.floor(currentTime % 60)).slice(-2)}
</p>
Enter fullscreen mode Exit fullscreen mode

获取进度并将其设置到进度条中

创建另一个进度状态-



const [progress, setProgress] = useState(0);
Enter fullscreen mode Exit fullscreen mode

现在，在我们创建的 window.setInterval 函数内部，添加另一行代码——



setProgress((videoRef.current?.currentTime / videoTime) * 100);
Enter fullscreen mode Exit fullscreen mode

该函数现在看起来是这样的——



window.setInterval(function () {
    setCurrentTime(videoRef.current?.currentTime);
    setProgress((videoRef.current?.currentTime / videoTime) * 100);
  }, 1000);
Enter fullscreen mode Exit fullscreen mode

我们的定制视频播放器已经准备就绪🎉🎊

实用链接-

GitHub 仓库

ReactJS 文档

所有社交

文章来源：https://dev.to/avneesh0612/create-a-custom-video-player-in-react-4bbo
Python 速查表
Java流简介