如何在vue-plyr中播放本地视频？webpack解析mp4报错该如何解决？

问题原因 #

该报错和你已安装的sass-loader没有关联，本质是Webpack没有配置对应的资源处理规则，无法识别解析.mp4这类二进制媒体文件，你参考的issue对应的是样式文件解析失败的场景，不适用于当前问题。

解决方案 #

你可以任选以下两种方案之一处理：

方案1：配置Webpack媒体资源解析规则

根据你使用的Webpack版本选择对应配置：

• Webpack 5及以上版本（内置资源模块，无需额外安装依赖）：
  在你的webpack.config.js中新增如下规则：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      {
        // 匹配所有媒体类文件后缀
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
        type: 'asset/resource',
        generator: {
          // 打包后媒体文件的输出路径和命名规则
          filename: 'media/[name].[contenthash][ext]'
        }
      }
    ]
  }
}

• Webpack 4及以下版本：
  首先安装file-loader依赖：

npm install file-loader --save-dev

之后在webpack.config.js中新增规则：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'media/[name].[contenthash].[ext]'
            }
          }
        ]
      }
    ]
  }
}

方案2：跳过Webpack打包直接引用静态资源

如果你不想修改Webpack配置，可以把videos文件夹移动到项目的静态资源目录（通常是public目录），然后修改视频引用路径为绝对路径即可：

<source
  size="1080"
  src="/videos/cgi_neutral.mp4"
  type="video/mp4"
/>

配置修改完成后重启项目即可正常加载本地视频。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov