How to preview video on upload in the webpage

Question

I want to have a video preview on clicking the upload video button on the webpage. I'm able to preview the image but for video seems like the same process is not working. How to show the video preview on the webpage in react?

Any of you guys faced the same issue. I have put a demo over here => Working Demo

Here's the code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import $ from 'jquery';

class App extends Component {
  constructor() {
    super();
    this.state = {
      uploadedImage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT34sZxFlCjUZ4LKDoQuZYM_p9YajjaPc-WFtxID9IJUeODSY_U",
      uploadedVideo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6nKvsUc7Sstn6oyFoiHNKNM_OKYWAu-7rXNvGgHZA5ZGbB272JQ",
      image_attribute: [],
      video_attribute: []
    };
  }

  handleImagePreview(e) {
    e.preventDefault();
        $("#chosen_image").click();
  }

  handleVideoPreview(e) {
    e.preventDefault();
        $("#chosen_video").click();
  }

  chosenVideo(e) {
    e.preventDefault();

    var file = e.target.files[0];
        var reader = new FileReader();
        reader.onloadend = () => {
            this.setState({
                uploadedVideo: reader.result
            });
        };
        reader.readAsDataURL(file);
  }

  chosenImage(e) {
        e.preventDefault();

        var file = e.target.files[0];
        var reader = new FileReader();
        reader.onloadend = () => {
            this.setState({
                uploadedImage: reader.result
            });
        };
        reader.readAsDataURL(file);
    }

  render() {
    return (
      <div>
          <div>
            <input
                id="chosen_image"
                className="choose-image-input"
                type="file"
                name="image"
                accept="image/*"
                onChange={this.chosenImage.bind(this)}
                ref={input => {
                    this.state.image_attribute[0] = input;
                }}
            />
            <button type="button" onClick={this.handleImagePreview.bind(this)}>
              Upload Image
            </button>
          </div>
          <div className="image_preview_outer">
              <img src={this.state.uploadedImage} style={{width: "100%", height: "100%"}} />
          </div>
          <div>
            <input
                id="chosen_video"
                className="choose-image-input"
                type="file"
                name="video"
                accept="video/*"
                onChange={this.chosenVideo.bind(this)}
                ref={input => {
                    this.state.video_attribute[0] = input;
                }}
            />
            <button type="button" onClick={this.handleVideoPreview.bind(this)}>
              Upload Video
            </button>
          </div>
          <div className="image_preview_outer">
              <video type="video/swf" controls >

                <source type="video/swf" src={this.state.uploadedVideo} />
              </video>
          </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

 chosenVideo = (obj) =>{
   let src = URL.createObjectURL(obj.target.files[0]);

  this.setState({
    uploadedVideo:src
  })
 }

and try video tag like this it will work

          <video type="video/swf" src={this.state.uploadedVideo} controls>
          </video>