在 Nuxt 应用程序中加载 .mov 格式的视频（适用于 Safari）

Question

在我的 Nuxt 应用程序中，我正在加载按预期工作的 .webm 格式的视频。作为 Safari 的后备，我想加载 .mov 格式的视频：

<video>
  <!-- Safari -->
  <source src="~/assets/videos/video.mov" type="video/mov" />
  <!-- other browsers -->
  <source src="~/assets/videos/video.webm" type="video/webm" />
</video>

但是，默认的 webpack 配置似乎不支持这种格式，这是我得到的：

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)

问题是应该如何配置这种特定文件类型 (mov) 的加载程序？
我在提到的 link 中找不到任何有用的信息，在一般的网络上也找不到。

请检查此 CodeSandbox 以查看此问题的再现。

我们将不胜感激。

Answer 1

有同样的问题。我们所需要的只是扩展 webpack 的配置。这就是我 nuxt.config.js 的 build 部分的样子：

build: {
  extend (config) {
    config.module.rules.push({
      test: /\.(mov)$/i,
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        esModule: false
      }
    })
  }   
}

在 Nuxt 应用程序中加载 .mov 格式的视频（适用于 Safari）

Loading a .mov format video in a Nuxt app (for Safari)

safari

.mov

webpack

vue.js

nuxt.js