Next Js背景mp4 [英] Next Js background mp4

问题描述

请帮忙...我想添加背景视频，格式为mp4...但是下一个js显示错误"./public/video/ocean.mp4 1:0模块解析失败:意外字符 '' (1:0)您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件.请参阅 https://webpack.js.org/concepts#loaders(此二进制文件省略了源代码)"

please help... I want to add background video, format mp4... but next js shows error "./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 (Source code omitted for this binary file)"

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

推荐答案

你在 React 中 import 的所有东西实际上都需要一个 webpack 加载器 理解格式.

Everything that you import in React actually needs a webpack loader that understands the format.

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

MP4 is not one of those formats. Even if it was, importing an entire video file would be horribly inefficient :-)

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

Solution: Don't import the video file, instead reference it as an external file that the browser loads over http like any other media file. All files you put in /public can be referenced below the top folder of you web site:

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

这篇关于Next Js背景mp4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！