Question

我只想根据要求从React组件中加载视频。当前，向用户显示了一大堆.mp4视频。选择一个后，该视频的位置会通过道具传递给视频播放器模态。但是当按下播放按钮时，出现404错误，提示找不到视频。

首先，我尝试将所有视频文件都放入React src文件夹中。然后，我尝试将它们移动到index.html旁边的React公用文件夹。我还研究了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错误是： GET http://localhost:3000/media/series-title/season-number/video.mp4 404（未找到）

Answer 1

您的文件是否放置在网络服务器可以选择的“公共”文件夹中？您是否已验证该文件夹的权限？（如果您使用的是Linux，则需要查看此信息）我对图像文件也遇到了类似的问题，并通过这种方式解决了。查看超链接的正确性。

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

1 个答案: