在 React 中使用原生 JS 上传视频并获取其属性

2024-02-21 15:44:58

React 中使用 Hook 上传视频并获取视频属性

简介

在现代 Web 应用程序中，上传和处理视频变得越来越重要。React 提供了强大的生态系统，使开发人员可以轻松构建交互式用户界面来处理媒体文件。本教程将指导您如何使用 React Hook 上传视频并获取其属性，例如宽高、持续时间和纵横比。

安装依赖项

首先，我们需要安装必要的依赖项。在终端窗口中运行以下命令：

npm install --save @hookform/resolvers @hookform/web

创建 React 组件

接下来，创建一个新的 React 组件，在本例中，我们将称之为 VideoUploader.js：

import React, { useState, useRef } from "react";

const VideoUploader = () => {
  // 使用 useState 管理视频状态
  const [video, setVideo] = useState(null);
  // 使用 useRef 管理视频元素引用
  const videoRef = useRef(null);

  const handleVideoUpload = (e) => {
    // 获取上传的文件
    const file = e.target.files[0];
    if (!file) {
      return;
    }

    // 将文件转换为 URL 并更新视频状态
    setVideo(URL.createObjectURL(file));

    // 获取视频元素引用并监听 loadedmetadata 事件
    const videoEl = videoRef.current;
    videoEl.addEventListener("loadedmetadata", () => {
      // 获取视频属性
      const { width, height, duration } = videoEl;
      const aspectRatio = width / height;
      const resolution = `${width}x${height}`;

      // 使用这些属性做一些事情...
    });
  };

  return (
    <div>
      {/* 创建一个文件输入框 */}
      <input type="file" accept="video/*" onChange={handleVideoUpload} />
      {/* 显示视频 */}
      {video && (
        <video ref={videoRef} src={video} controls />
      )}
    </div>
  );
};

export default VideoUploader;

使用组件

现在，您可以将 VideoUploader 组件添加到您的 React 应用程序中：

import VideoUploader from "./VideoUploader";

const App = () => {
  return (
    <div>
      {/* 添加 VideoUploader 组件 */}
      <VideoUploader />
    </div>
  );
};

export default App;