javascript - 如何在网页中预览上传的视频

Question

我想在点击网页上的上传视频按钮时进行视频预览。我可以预览图像，但对于视频来说，相同的过程似乎不起作用。如何在react中在网页上显示视频预览？

你们中的任何人都面临着同样的问题。我在这里放了一个演示 => Working Demo

代码如下:

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

并尝试像这样的视频标签，它会起作用

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