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>

如何在网页上预览上传视频

1 个答案: