Как просмотреть видео при загрузке на веб-странице - PullRequest
Новая
       29

Как просмотреть видео при загрузке на веб-странице

0 голосов
/ 28 августа 2018

Я хочу получить предварительный просмотр видео при нажатии кнопки загрузить видео на веб-странице. Я могу предварительно просмотреть изображение, но для видео кажется, что тот же процесс не работает. Как показать предварительный просмотр видео на веб-странице в реакции?

Любой из вас, ребята, сталкивался с той же проблемой. Я поставил демо здесь => Рабочая демоверсия

Вот код: 

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'));

1 Ответ

0 голосов
/ 28 августа 2018 
 chosenVideo = (obj) =>{
   let src = URL.createObjectURL(obj.target.files[0]);

  this.setState({
    uploadedVideo:src
  })
 }

и попробуйте видео тег, как это будет работать 

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