Question

请帮助...我想添加背景视频，格式为mp4 ... 但是下一个js显示错误 “ ./public/video/ocean.mp4 1：0 模块解析失败：意外字符''（1：0）您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见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

您import中的所有内容实际上都需要一个能理解格式的webpack loader。

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

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

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

下一个js背景mp4

1 个答案: