如何将大量视频文件导入React应用程序

Question

我只想根据请求从React组件中加载视频。用户当前会看到一个很大的列表。mp4视频。选择一个后，该视频的位置将通过道具传递给视频播放器模式。但是当按下播放按钮时，我收到一个404错误，说找不到视频。

起初，我尝试将所有视频文件放在React src文件夹中。然后，我尝试将它们移动到索引旁边的React公用文件夹。html。我还查看了import（）以一次加载一个视频，但我感到非常困惑，完全卡住了。因此，目前没有任何视频的导入或require语句。

以下是MediaModal组件代码的相关部分：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import "../../node_modules/video-react/dist/video-react.css"; // import css
import { Player } from "video-react";

class MediaModal extends Component {
  render() {
    const { isShowing, selectedMedia } = this.props.itemStateObject;
    return (
      <div>
        <Modal isOpen={isShowing} className={this.props.className}>
          <ModalHeader>Modal title</ModalHeader>
          <ModalBody>
            {isShowing && (
              <Player
                playsInline
                src={selectedMedia.location}
              />
            )}
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  { closeModal }
)(MediaModal);

上面视频播放器使用的视频源由服务器生成，格式为“media/series title/season number/video.mp4”。我收到的404错误是：GEThttp://localhost:3000/media/series-标题/季号/视频。mp4 404（未找到）

Answer 1

您的文件是否放在网络服务器可以选择的“公共”文件夹中？你验证了那个文件夹的权限了吗？（如果你正在使用Linux你需要看到这个）我有一个类似的图像文件的问题，并以这种方式解决。看看超链接的正确性。