gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:39:14 25 4
gpt4 key购买 nike

我只想根据 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(未找到)

最佳答案

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

关于javascript - 如何将大量视频文件导入 React 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55585083/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com