无法导入视频文件模块解析失败：意外字符“” (1:0) React.js Next.js

Question

你好，我遇到了当前的问题，我正在尝试设置循环播放视频的背景，但在从文件夹导入 mp4 视频时出现此错误

error - ./videos/video.mp4
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 from 'react'
import styled from 'styled-components';
 import Video from '../../videos/video.mp4';

const HeroContainer = styled.div`
background: #0c0c0c;
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
height: 800px;
position: relative;
z-index: 1;
`

const HeroBg = styled.div`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
`
const VideoBg = styled.video`
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
background: #232a24;
`


export default function Hero() {
  return (
    <HeroContainer>
      <HeroBg>
        <VideoBg autoPlay loop muted src={Video} type='video/mp4'/> 

      </HeroBg>
    </HeroContainer>
  )
}

我真的不知道是什么问题

Answer 1

您需要定义加载程序以导入 .mp4 文件。其他文件类型也会出现这种错误。例如，当我尝试导入 .gql 文件时遇到此错误。解决这个问题，需要针对特定的文件类型定义loader。

如果您使用的是 webpack，这可能会对您有所帮助。 How to load a local video in React using webpack?.

P.S。我个人不喜欢这种设置。我想说如果可能就给一个url。

无法导入视频文件模块解析失败：意外字符“” (1:0) React.js Next.js

Cant import video file Module parse failed: Unexpected character ' ' (1:0) React.js Next.js

video

module

reactjs

next.js