I want to add background video, format mp4, but NextJS 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
Everything that you import
in React actually needs a webpack loader that understands the format.
MP4 is not one of those formats. Even if it was, importing an entire video file would be horribly inefficient :-)
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"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With