-
[Next.js 14][next-video] 메인 화면에 배경 영상(background video) 넣기웹 개발/Nextjs 14 2024. 3. 13. 03:22
개발하는 웹의 메인 화면에 배경 영상을 넣어야 해서 Next.js documentation을 뜯어봤다.
여기서 Mux-video-api를 소개하고 있길래, 이걸로 비디오 넣는게 보편적인 방법이겠거니 싶어 해보았다.
위 사진처럼 굉장히 깔끔했다. (코드는 아래에 있음)
next-video 패키지 설치
npm install next-video // or yarn add next-video
설치 이후에 아래의 커맨드로 initialize하면 /videos라는 폴더가 생기고 등등의 과정이 필요하다고 하는데, 나는 안 해도 잘 됐다.
npx next-video init
(만약 나중에 deploy할 때 필요하면 내용을 수정하러 오겠다.)
환경 변수에 Mux 자격 증명 추가
(여기도 마찬가지로, 안해도 잘 되긴 했는데 나중에 문제가 생기면 내용을 수정하러 오겠다.)
mux가 기본값이긴 한데, gitHub을 살펴보니 Mux 외에도 vercel-blob, amazon-s3 등의 provider을 설정할 수 있다.
그래도 일단 mux 기준으로 설명하자.
Mux는 API 인증을 위해 액세스 토큰을 사용하는데, 이 토큰은 Mux에 로그인해서 확인할 수 있다(가입해야 함).Mux 대시보드에 로그인하면 사이드바에서 Settings > Access Tokens 에서 새로운 토큰을 생성할 수 있다.
우리는 비디오를 추가할 거니까 Permissions에서 Mux Video의 Write와 Mux Data (read only)를 선택해서 토큰을 생성한다.
토큰이 생성되었으면, 이를 프로젝트에 추가해야 한다.
.env.local 파일에 (없으면 생성해서) 아래의 코드를 추가해주자.
MUX_TOKEN_ID=YOUR_TOKEN_ID MUX_TOKEN_SECRET=YOUR_TOKEN_SECRET
이제 앞서 생성된 /videos 폴더에 배경 영상을 넣은 후 터미널에서 아래의 커맨드를 실행한다.
npx next-video sync
이렇게 하면 이제 Mux 대시보드의 Video > Assets 에서 영상을 확인할 수 있다.
영상(비디오) 추가
아래에서 볼 수 있듯이, 비디오를 넣는 코드는 정말 간단하다.
속성 없이 src만 설정해주면 비디오 플레이어가 들어가는데, 이걸 배경에서 계속 재생되는 비디오로 설정하기 위해서 아래와 같은 속성을 추가로 작성해주자.
import Video from 'next-video'; export default function Home() { return ( <main> <Video src={'/videos/bg.mp4'} // 비디오 파일 경로 autoPlay muted loop playsInline controls={false} ></Video> </main> ) }
끗~
'웹 개발 > Nextjs 14' 카테고리의 다른 글
[Next.js 14] Custom 404 페이지 만들기 (1) 2024.03.24 [Next.js 14] Google SpreadSheets를 이용한 다국어 지원 서비스 자동화 및 발생한 오류 해결 방법 정리 [i18next][Javascript] (0) 2024.03.20 [Next.js 14][Swiper] 스와이프 가능한 카드 리스트 만들기 (Carousel Slider) (1) 2024.03.13 [Next.js 14] App router 기반 Localization / Internationalization [i18next] (3) 2024.02.24 [Next.js 14] 프로젝트 폴더 구조 구성 및 git repository 연결 (0) 2024.02.22