Rails应用程序中没有加载MP4文件

Question

我得到了这个错误。据我所能谷歌，它需要配置webpack文件，但在这个rails应用程序，它是一个webpacker.yml文件。当使用通常的标签时，CRA看起来工作得很好。任何帮助都将不胜感激。

./app/javascript/components/User/over.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"，"devDependencies"：{ "webpack-dev-server"："^3.11.0“}

Answer 1

在config/webpacker.yml中static_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传送视频，