在 React 中上传和预览视频

Question

我正在使用 Upload 上传视频文件antd。我想上传视频并将上传的视频<video>作为源提供给标签，但我没有得到正确的解决方案。你能让我摆脱解决方案吗？提前致谢。

import React, { useState } from 'react';
 import { Upload, Button } from "antd";

export default function UploadComponent(props) {
    const initialstate = {
        videoSrc:""
    }

    const [videoSrc , seVideoSrc] = useState("");
    const { videoSrc } = apiData;

    const handleChange = (info) => {
        console.log(info)

     //set the video file to videoSrc here
    };


    return (
        <React.Fragment>
            <div className="action">
                <Upload className="mt-3 mb-3"
                    accept=".mp4"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    listType="picture"
                    maxCount={1}
                    onChange={handleChange}>
                    <Button>
                       Upload
                    </Button>
                </Upload>

                <video width="400" controls>
                  <source
                    src={videoSrc.Src}
                    type={videoSrc.type}
                   />
                   Your browser does not support HTML5 video.
                </video>
            </div>


        </React.Fragment>
    )
}

忽略任何语法错误，我只想按上传方式播放我的视频以及上传视频时的任何专业提示。

Answer 1

我通过做一些改变得到了解决方案

    const [videoSrc , seVideoSrc] = useState("");

    const handleChange = ({file}) => {
      var reader = new FileReader();
      console.log(file)
      var url = URL.createObjectURL(file.originFileObj);
      seVideoSrc(url);
  };

并使用React-Player在本地播放上传的视频

import "../node_modules/video-react/dist/video-react.css";
import { Player } from "video-react";

.....

      <Player
          playsInline
          src={videoSrc}
          fluid={false}
          width={480}
          height={272}
      />