添加背景视频时 NextJS 抛出错误

Question

我想添加背景视频，格式为mp4，但NextJS显示错误：

./public/video/ocean.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

（此二进制文件省略源代码）

import React, {useEffect, useRef} from "react"
import Layout from "../components/webSite/layout";
import backgroundVideo from "../public/video/ocean.mp4"

const Home = () => {
  const videoRef = useRef()

  useEffect(() => {
    setTimeout(()=>{
      videoRef.current.play()
    },5000)
  }, []);

  return <Layout title={"Home"}>
    <video
        ref={videoRef}
        controls
        width="250"
        loop
        muted
        style={{
          position: "relative",
          width: "100%",
          height: "15rem",
          left: 0,
          top: 0,
        }}>
      <source src={backgroundVideo} type="video/mp4"/>
    </video>
  </Layout>
}

export default Home

Answer 1

React 中的所有内容import实际上都需要一个能够理解格式的Webpack 加载器。

MP4 不是这些格式之一。即使是这样，导入整个视频文件的效率也会非常低:-)

解决方案：不要导入视频文件，而是将其作为浏览器通过 http 加载的外部文件进行引用，就像任何其他媒体文件一样。您放入的所有文件都/public可以在您网站的顶部文件夹下引用：

<source src="/video/ocean.mp4" type="video/mp4"/>

Answer 2

与其他答案相反，导入（使用正确的加载器）并不低效.mp4，并且不需要 NextJS 特定的插件。

使用file-loaderwebpack 会给你一个 URL 作为你的.mp4. Webpack 只是将其复制.mp4到输出目录（不在包中）并返回相对 URL。当您在元素中使用它时，通常会请求它<video>。

要使用file-loaderfor .mp4s，您可以webpack()向您添加回调next.config.js，如下所示。

export default {
webpack(config, { isServer }) {
    const prefix = config.assetPrefix ?? config.basePath ?? '';
    config.module.rules.push({
      test: /\.mp4$/,
      use: [{
        loader: 'file-loader',
        options: {
          publicPath: `${prefix}/_next/static/media/`,
          outputPath: `${isServer ? '../' : ''}static/media/`,
          name: '[name].[hash].[ext]',
        },
      }],
    });

    return config;
  },
};

然后只需导入您的并在元素.mp4中使用它<video>

import myvideo from './myvideo.mp4';
export default function MyVideo(){
  return <video>
    <source src={myvideo} type="video/mp4"/>
  </video>;
}

如果您使用的是 Typescript，您还需要为要加载的文件扩展名添加声明file-loader。这应该放在.d.tsNext.js建议的（向下滚动以找到提及它的信息框）additional.d.ts中，然后将其添加到您的 TS 配置include属性中。

// additional.d.ts
declare module '*.mp4' {
  export default string;
}

这基本上也是 ] 的next-videos作用]( https://github.com/jeremybarbet/next-videos/blob/master/index.js ) 在幕后。

Answer 3

如果第一个答案不起作用，请尝试以下操作：

安装一个名为

next-videos 

安装后，转到项目中的next.config.js文件并执行以下操作：

const withVideos = require('next-videos')
module.exports = withVideos()

重要的是，编辑配置文件后，您必须重新启动服务器，否则它也不会工作。

在您的文件中，您必须require()在组件中使用

例如这样的：

 export default () => (
   <div>
       <video src={(require('./video.mp4'))}/>
   </div>
  )

所有信息均来自 npm.js 网站：

https://www.npmjs.com/package/next-videos