在React中上传和预览视频

Question

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