在 React 中上传和预览视频答案

【问题标题】：Upload and preview Video in React在 React 中上传和预览视频
【发布时间】：2021-09-18 05:10:54
【问题描述】：

我正在使用 antd Upload 上传视频文件。我想上传视频并将上传的视频提供给<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>
    )
}

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

【问题讨论】：

标签： javascript reactjs html5-video jsx

【解决方案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}
      />

【讨论】：