如何在 ReactJS 中预览视频 [英] How to preview a video in ReactJS

问题描述

我正在使用 ReactJS 进行项目，目前我正在使用 ant-design 进行文件上传.我想在用户选择视频时预览视频.我是 reactjs 的新手，无法完成我的任务.有人可以帮助我如何预览视频.我会和你分享我的代码你可以检查我的代码.谢谢

代码

从'react'导入React；从样式组件"导入样式；导入 'antd/dist/antd.css';导入'./styletwo.css';import { Form, Upload, Button, Icon } from 'antd';//从 'reqwest' 导入 reqwest;const Drager = Upload.Dragger;const FormItem = Form.Item;const PhotoText = styled.div`字体大小:16px；字体粗细:粗体；填充:2rem 0 1rem 0；显示:块；文本对齐:-webkit-auto；`;const 道具 = {行动: ''，listType: '图片',};类 RegisterStepTwo 扩展了 React.Component {使成为() {const { getFieldDecorator } = this.props;返回 (<div><PhotoText>选择要上传的照片</PhotoText><表单项>{getFieldDecorator('图片', {规则: [{要求:真实，message: '请上传图片！',},],})(<Dragger {...props}><p className="ant-upload-drag-icon"><图标类型=上传"/></p><p className="ant-upload-text">点击或拖动照片到该区域上传</p></拖动器>,)}</FormItem><PhotoText>选择要上传的视频</PhotoText><表单项>{getFieldDecorator('视频', {规则: [{要求:真实，message: '请上传视频！',},],})(<拖动器><p className="ant-upload-drag-icon"><图标类型=上传"/></p><p className="ant-upload-text">点击或拖动视频到此区域上传</p></拖动器>,)}</FormItem>

);}}导出默认RegisterStepTwo；

解决方案

考虑到您的视频文件处于某种状态:

 const [videoFile, setVideoFile] = useState();

您可以在 JSX 中直接使用 createObjectUrl:

I am working on project in ReactJS, Currently I am using ant-design for file uploading. I want to preview video when user select a video . I am new to reactjs and unable to complete my task. Could someone please help me how it would be possible to preview a video . I will share my code with you You may check my code . Thanks

Code

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;

解决方案

Considering you have your video file in a state:

    const [videoFile, setVideoFile] = useState();

You can use createObjectUrl directly in JSX:

<video width="400" controls>
    <source src={URL.createObjectURL(videoFile)}/>
</video>

这篇关于如何在 ReactJS 中预览视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！