未在 React/Rails 应用程序上加载 MP4 文件 [英] MP4 file not loading on React / Rails app
问题描述
我收到此错误.据我所知,它需要配置 webpack 文件,但在这个 rails 应用程序中,它是一个 webpacker.yml 文件.CRA 看起来在使用通常的标签时工作正常.任何帮助将不胜感激.
<块引用>./app/javascript/components/User/cover.mp4 1:0 模块解析失败:意外字符 '' (1:0) 您可能需要一个合适的加载器来处理这种文件类型,目前没有配置加载器来处理这个文件.请参阅 https://webpack.js.org/concepts#loaders(源代码此二进制文件省略)
依赖项":{@babel/preset-react":^7.10.4",@rails/actioncable":^6.0.0-alpha",@rails/activestorage":^6.0.0-alpha",@rails/ujs":^6.0.0-alpha",@rails/webpacker":4.2.2",animate.css":^4.1.0",babel-plugin-transform-react-remove-prop-types":^0.4.24",引导程序":^4.5.0",jquery":^3.5.1",popper.js":^1.16.1",道具类型":^15.7.2",反应":^16.13.1",react-animate-on-scroll":^2.1.5",反应动画":^ 1.0.0",react-bootstrap-sweetalert":^5.1.15",react-dom":^16.13.1",反应-ga":^3.1.2",react-router-dom":^5.2.0",反应滚动":^ 1.8.0",样式组件":^5.1.1",turbolinks":^5.2.0"
},版本":0.1.0",开发依赖":{webpack-dev-server":^3.11.0";}
在config/webpacker.yml
中的static_assets_extensions
下添加.mp4
static_assets_extensions- .mp4...
创建一个新文件夹 app/javascripts/static
然后
const file = require('static/file.mp4')使成为() {返回 (<div><视频控制><source src={file}/></视频>...
<块引用>
注意:您应该使用 CDN 来传送视频
I'm getting this error. From what I can google, it needs to configure the webpack file but in this rails app it's a webpacker.yml file. CRA looks like it works fine when using the usual tag. Any help would be appreciated.
./app/javascript/components/User/cover.mp4 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
"dependencies": {
"@babel/preset-react": "^7.10.4",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "4.2.2",
"animate.css": "^4.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-animate-on-scroll": "^2.1.5",
"react-animations": "^1.0.0",
"react-bootstrap-sweetalert": "^5.1.15",
"react-dom": "^16.13.1",
"react-ga": "^3.1.2",
"react-router-dom": "^5.2.0",
"react-scroll": "^1.8.0",
"styled-components": "^5.1.1",
"turbolinks": "^5.2.0"
}, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.0" }
in config/webpacker.yml
under static_assets_extensions
add .mp4
static_assets_extensions
- .mp4
...
create a new folder app/javascripts/static
then
const file = require('static/file.mp4')
render() {
return (
<div>
<video controls>
<source src={file} />
</video>
...
Note: You should use CDN to deliver videos
这篇关于未在 React/Rails 应用程序上加载 MP4 文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!