MP4 文件未在 React / Rails 应用程序上加载

Posted

技术标签:

【中文标题】MP4 文件未在 React / Rails 应用程序上加载【英文标题】:MP4 file not loading on React / Rails app 【发布时间】:2021-02-12 08:30:50 【问题描述】:

我收到此错误。据我所知,它需要配置 webpack 文件,但在这个 rails 应用程序中,它是一个 webpacker.yml 文件。使用通常的标签时,CRA 看起来工作正常。任何帮助将不胜感激。

./app/javascript/components/User/cover.mp4 1:0 模块解析失败: 意外字符 '' (1:0) 您可能需要适当的加载程序来 处理这种文件类型,目前没有配置加载器来处理 这个文件。见https://webpack.js.org/concepts#loaders(源码 此二进制文件省略)

  "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"

, “版本”:“0.1.0”, “开发依赖”: “webpack-dev-server”:“^3.11.0”

【问题讨论】:

错误消息中的 URL 为您指明了正确的方向。但是,听起来您正在使用其他包来管理您的构建——我对webpacker.yml 文件一无所知——所以在这种情况下,您需要调查使用该文件来构建您的项目的任何内容。 @Kryten,感谢您的推动。我最终阅读了 webpacker.yml 的工作原理。它与 rails 配置中的 config/webpack 文件对话。 config/webpack/dev/prod/test/env 文件是 === webpack.config.js。我做了yarn add url-loader 然后添加到config/webpack/environment.js 文件const environment = require("@rails/webpacker"); const fileLoader = environment.loaders.get("file"); fileLoader.test = /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2|webm|mp4)$/i; module.exports = environment; 答案在这里git link 【参考方案1】:

config/webpacker.ymlstatic_assets_extensions下添加.mp4

static_assets_extensions
  - .mp4
  ...

创建一个新文件夹app/javascripts/static

然后

const file = require('static/file.mp4')

render() 
  return (
    <div>
      <video controls>
        <source src=file />
      </video>
  ...

注意:您应该使用 CDN 传送视频

【讨论】:

有趣。我今天早些时候尝试了这种方法,但没有奏效,所以我放弃了它。但刚才又试了一次,它奏效了。我想我的其他评论答案也是另一种方法。谢谢! 但这仅适用于开发环境,不适用于生产环境。它在heroku中编译失败。 > 正在编译...编译失败:ModuleNotFoundError:找不到模块:错误:无法在 /tmp/build_775cbf44_/node_modules/ 的“/tmp/build_775cbf44_/app/javascript/components/Navbar”中解析“./cover.mp4” webpack/lib/Compilation.js:925:10 ... 字段“浏览器”不包含使用描述文件的有效别名配置:/tmp/build_775cbf44_/package.json(相对路径:./app/javascript/components/ Navbar/cover.mp4) 没有扩展名 尝试在本地编译 抱歉这个愚蠢的问题,如何编译?该视频正在本地播放。

以上是关于MP4 文件未在 React / Rails 应用程序上加载的主要内容,如果未能解决你的问题,请参考以下文章

未在 Rails 应用程序中应用 CSS 更改

Rails 4图像未在heroku上加载

CoffeeScript 未在 Rails 3.1 中更新

Rails/Webpacker 未在生产中加载 Vue 样式

Rails 4:资产未在生产中加载

Safari html5 视频 mp4 未在 htaccess 文件夹中播放,[重复]