Как просмотреть видео в ReactJS - PullRequest
Новая
       8

Как просмотреть видео в ReactJS

0 голосов
/ 05 декабря 2018

Я работаю над проектом в ReactJS, в настоящее время я использую ant-design для загрузки файлов.Я хочу просмотреть видео, когда пользователь выбирает видео.Я новичок в реагировании и не могу выполнить свою задачу.Может кто-нибудь, пожалуйста, помогите мне, как можно было бы просмотреть видео.Я поделюсь с вами своим кодом. Вы можете проверить мой код.Спасибо

Код 

import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import './styletwo.css';
import { Form, Upload, Button, Icon } from 'antd';
// import reqwest from 'reqwest';
const Dragger = Upload.Dragger;

const FormItem = Form.Item;
const PhotoText = styled.div`
  font-size: 16px;
  font-weight: bold;
  padding: 2rem 0 1rem 0;
  display: block;
  text-align: -webkit-auto;
`;

const props = {
  action: '',
  listType: 'picture',
};
class RegisterStepTwo extends React.Component {


  render() {

    const { getFieldDecorator } = this.props;

    return (
      <div>
        <PhotoText>Select a Photo to Upload</PhotoText>
          <FormItem>
            {getFieldDecorator('picture', {
              rules: [
                {
                  required: true,
                  message: 'Please upload picture!',
                },
              ],
            })(
              <Dragger {...props}>
                <p className="ant-upload-drag-icon">
                  <Icon type="upload" />
                </p>
                <p className="ant-upload-text">
                  Click or drag photo to this area to upload
                </p>
              </Dragger>,
            )}
          </FormItem>

          <PhotoText>Select a Video to Upload</PhotoText>
          <FormItem>
            {getFieldDecorator('video', {
              rules: [
                {
                  required: true,
                  message: 'Please upload video!',
                },
              ],
            })(
              <Dragger>
              <p className="ant-upload-drag-icon">
                <Icon type="upload" />
              </p>
              <p className="ant-upload-text">
                Click or drag Video to this area to upload
              </p>
            </Dragger>,
            )}
          </FormItem>

      </div>
    );
  }
}
export default RegisterStepTwo;

1 Ответ

0 голосов
/ 30 апреля 2019

Сначала прочитайте данные BLOB-файла из вашего файла 

let reader = new FileReader();

//if reading completed
reader.onload = e => {
     let blobData = e.target.result); //blob data
     console.log(blobData);
};

//read the file
reader.readAsDataURL(file);

После прочтения как BLOB-объекта вы можете использовать тег видео html5, чтобы показать видео следующим образом 

<video width="400" controls>
     <source src={blobData} type={fileType}/>
     Your browser does not support HTML5 video.
</video>

Пожалуйста, посмотрите на мойсырой CodeSandBox https://codesandbox.io/s/wq2jnm9wpk

Надеюсь, это поможет вам.

...