Next.js용 플레이어 적용

Classic/VPC 환경에서 이용 가능합니다.

Next.js 적용에서는 Video Player Enhancement Web SDK JS를 활용하여 플레이어를 적용하고 설정하는 예제를 소개합니다.

적용 전 고려해야 할 Next.js의 특성

Video Player Enhancement를 적용하기 전에 Next.js의 특성을 반드시 고려해야 합니다. Next.js 버전 13에서는 모든 컴포넌트가 서버 컴포넌트입니다. 따라서 CSR 방식으로 클라이언트 컴포넌트를 사용하려면 "use client"; 를 사용해야 합니다. 클라이언트 사이드 쪽 컴포넌트를 만드는 방법은 다음의 Next.js 공식 홈페이지에서 확인할 수 있습니다. 공식 홈페이지에서는 언제 서버 컴포넌트를 사용해야 하고, 언제 클라이언트 컴포넌트를 사용해야 하는지 명확히 구분하여 안내하고 있습니다.

• 참고 문서: Rendering: Server and Client Components | Next.js
  

예제코드

Next.js에서는 <Script> 태그를 사용하여 외부 스크립트를 호출하고, strategy 속성을 사용하여 페이지 호출 랜더링이 끝날 때 스크립트를 안정적으로 가져올 수 있습니다. onLoad() 속성의 함수를 사용하여 스크립트 로딩이 완료될 때 실행할 함수를 작성하는 예제 코드는 다음과 같습니다.
page.js

'use client'; // client component
import Script from 'next/script' // Script 태그를 사용하기 위해 불러오기

const access_key = "VPE SDK Access Key"; // 발급받은 VPE 라이센스 키

function createPlayer(id) {
     let player = new ncplayer(id, {
         
         "playlist": [
             {
                 file:"https://fsxikvammvwv14470411.cdn.ntruss.com/hls/9N5-iJ4f9tdzE6D708PTmg__/vod/j5IXBfIJ83893893_,1080,720,480,p.mp4.smil/master.m3u8",
                 poster:"https://wnfosehmzhuc12665447.cdn.ntruss.com/thumb/sample_thumb.png?type=m&w=1024&h=760&ttype=jpg",
                 description: {
                     "title": "VPE 테스트 영상",
                     "created_at": "2023.03.27",
                     "profile_name": "네이버클라우드",
                     "profile_image": "https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                 },
             }
         ],
         
         // options...
     });
}

export default function DemoPlayer() {
     return (
         <>
             <Script
                 src={`https://player.vpe.naverncp.com/ncplayer.js?access_key=${access_key}`}
                 strategy="lazyOnload"
                 onLoad={() => {
                     createPlayer('video')
                 }
             }
             </Script>
             <main>
                 <div>
                     <div id="video"></div>
                 </div>
             </main>
         </>
     )
}