在 React 中上传和预览视频

Question

我正在使用 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}
      />

在 React 中上传和预览视频

Upload and preview Video in React

javascript

jsx

html5-video

reactjs