无法使用 React 加载本地视频
Posted
技术标签:
【中文标题】无法使用 React 加载本地视频【英文标题】:Can't load local video with React 【发布时间】:2017-04-05 04:13:36 【问题描述】:我。我已将视频放在我的文件夹“app/assets/video/concert.mp4”中。在我的 React 文件“search_bar.jsx”中,我有一个 html5 视频标签,我将视频来源为:
render()
return (<video src="../../app/assets/videos/concert.mp4" controls />);
这是我的文件结构:
MusicianHub 应用程序 资产 视频 音乐会.mp4 前端 组件 search_bar.jsx如果您加载外部视频,则视频标签有效。这是我的 webpack.config.js
module:
loaders: [
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query:
presets: ['react', 'es2015']
,
test: /\.html$/,
loader: 'html-loader?attrs[]=video:src'
,
test: /\.mp4$/,
loader: 'url?limit=10000&mimetype=video/mp4'
]
【问题讨论】:
你能发布你的 webpack 配置吗?另外,尝试使用import video from '../../app/assets/videos/convert.mp4
和 <video src=video />
,这样 webpack 会识别它必须拉入视频文件
使用 webpack-dev-server 嗯?
@erichardson30 我已经上传了我的 webpack.config 并包含了 import 语句,但看起来 webpack 对我提供的加载器不满意:加载器 /Users/briantsai/Desktop/MusicianHub/node_modules 中的错误/url/url.js?limit=10000&mimetype=video/mp4 没有返回函数@ ./frontend/components/search_bar.jsx 15:15-61
我已经从 webpack 加载了 url-loader 和 file-loader 模块,所以错误消失了,但现在在 Chrome 开发工具中它说:加载资源失败:服务器响应状态为404(未找到)localhost:3000/a740242064c86421e8ff988502f202a8.mp4
我认为应该是url-loader
而不仅仅是url
。
【参考方案1】:
这适用于本地文件:
import videos from '../../app/assets/videos/concert.mp4'
render()
return (
<video loop autoPlay>
<source src=videos type="video/mp4"/>
</video>
);
【讨论】:
如果本地路径以前不知道怎么办? (或在地图内?)【参考方案2】:我决定将视频上传到远程源 Cloudinary。感谢大家的帮助。
【讨论】:
【参考方案3】:这对我来说是一个修复。 https://github.com/facebook/create-react-app/issues/6822#issuecomment-483079845
你可以使用 src/react-app-env.d.ts 来测试一下:
declare module '*.mp4'
const src: string;
export default src;
【讨论】:
【参考方案4】:这种方式适用于本地照片和视频:
import concert from '../../assets/videos/concert.mp4'
render()
return (
<video controls>
<source src=concert type="video/mp4"/>
Your browser doesn't support HTML video.
</video>
);
【讨论】:
以上是关于无法使用 React 加载本地视频的主要内容,如果未能解决你的问题,请参考以下文章
Fetch API 无法加载“.php”本地文件 - React JS + PHP
Android上的react-native-webview无法使用ERR_ACCESS_DENIED加载保存在缓存目录中的本地文件[重复]