background - Next Js背景mp4
问题描述
请帮忙...我想添加背景视频,格式为mp4...但是下一个js显示错误“./public/video/ocean.mp4 1:0 Module parse failed: Unexpected character '' (1:0) You may需要适当的加载器来处理此文件类型,目前没有配置加载器来处理此文件。请参阅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
解决方案
你import
在 React 中的所有东西实际上都需要一个能够理解格式的webpack 加载器。
MP4 不是这些格式之一。即使是这样,导入整个视频文件也会非常低效:-)
解决方案:不要导入视频文件,而是将其引用为浏览器通过 http 加载的外部文件,就像任何其他媒体文件一样。您放入的所有文件都/public
可以在您网站的顶部文件夹下方引用:
<source src="/video/ocean.mp4" type="video/mp4"/>
推荐阅读
- sql - psql -c 传入json数据
- php - PHP / Docusign - 验证已完成事件的 HMAC 签名
- python - 检查变量名中是否存在子字符串 - Python
- python - 调用计数不适用于异步功能
- firebase - 如何租用和使用自己的服务器来实现云功能?
- javascript - JavaScript currying:返回在当前函数之外定义的函数
- mysql - 使用 slashdb rest api 将 json 数据插入 MySQL 数据库
- sql - 如何从 Oracle 中的 XMLType 列中提取特定节点的所有子节点的值(通过输入参数提供)
- flutter - 颤振条件背景图像添加
- adaptive-cards - 无法获取数据以显示在 Adaptive Card FactSet