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

Question

我只想根据 React 组件内的请求加载视频。当前向用户显示大量 .mp4 视频。选择一个后，该视频的位置将通过 Prop 传递给视频播放器模态。但是当按下播放按钮时，我收到 404 错误，提示找不到视频。

起初，我尝试将所有视频文件都放在 React src 文件夹中。然后，我尝试将它们移动到 index.html 旁边的 React 公共(public)文件夹。我还研究了 import() 以一次加载一个视频，但我真的很困惑并且卡住了。因此，目前没有针对任何视频的导入或要求声明。

这是 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 错误是: 获取 http://localhost:3000/media/series-title/season-number/video.mp4 404(未找到)

Answer 1

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