如何在 ReactJS 中预览视频

Posted 2023-03-07

【中文标题】如何在 ReactJS 中预览视频

【英文标题】：How to preview a video in ReactJS

【发布时间】：2019-05-06 22:58:38

【问题描述】：

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

代码

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;

【问题讨论】：

当用户选择视频时，您可以使用video-react.js.org 包并传递道具来播放视频

@HarshShah 如果你有视频或指导员会很有帮助

您想在用户上传视频时显示视频，或者在上传完成后他们选择一个视频然后您想向他们显示？

不，我想在用户在上传前选择视频时显示视频

您可以查看此示例以获取图像 codepen.io/hartzis/pen/VvNGZP 您也可以对视频执行相同操作

【参考方案1】：

考虑到您的视频文件处于以下状态：

    const [videoFile, setVideoFile] = useState();

你可以在 JSX 中直接使用createObjectUrl：

<video  controls>
    <source src=URL.createObjectURL(videoFile)/>
</video>

【讨论】：

完美答案！

【参考方案2】：

首先从您的文件中读取 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  controls>
     <source src=blobData type=fileType/>
     Your browser does not support HTML5 video.
</video>

请看看我的粗略 CodeSandBox https://codesandbox.io/s/wq2jnm9wpk

希望对你有帮助。

【讨论】：

嗨，我点击了，CodeSandBox 给出错误：错误元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查PreviewVideoAntdUpload的渲染方法。