I am uploading a video file using antd Upload. I want to upload the video and provide the uploaded video to the <video> tag as a source, But I am not getting the right solution for it. Can you get me out of the solution? Thanks in Advance.

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=";
                    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>
    )
}

Ignore any syntax error I just want my video to be played as uploaded and any pro tip in uploading it.

I am uploading a video file using antd Upload. I want to upload the video and provide the uploaded video to the <video> tag as a source, But I am not getting the right solution for it. Can you get me out of the solution? Thanks in Advance.

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>
    )
}

Ignore any syntax error I just want my video to be played as uploaded and any pro tip in uploading it.

• javascript
• reactjs
• html5-video
• jsx

1 Answer 1

I got the Solution by Doing Few changes

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

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

And use React-Player for Playing Uploaded Video locally

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

.....

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