[Next.js, Nextra] video

Next.js, Nextra에서 영상 파일을 사용하는 법

---

1. next-videos 설치

$ npm install next-videos

$ yarn add next-videos

$ pnpm add next-videos

---

 

2. next.config.js에 종속성 적용

// 다른 종속성 적용 부분
const nextConfig = {
  ...
}

const withVideos = require("next-videos");

module.exports = withVideos(nextConfig);

---

3. video 태그로 영상 파일 사용

  <video
    autoPlay={true}
    muted={true}
    loop={true}
    style={{ width: "100%", height: "650px" }}
    src={require("/public/영상파일.mp4")}
  />

 

1. autoPlay: 자동재생 여부

2. muted: 음소거

3. loop: 반복배생

4. style: 크기 조절

5. src: 영상파일 위치