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'; // 클라이언트 컴포넌트로 취급
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://m4qgahqg2249.edge.naverncp.com/hls/a4oif2oPHP-HlGGWOFm29A__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_,FHD_2Pass_30fps,HD_2Pass_30fps,SD_2Pass_30fps,.mp4.smil/master.m3u8",
					        poster:"https://2ardrvaj2252.edge.naverncp.com/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_01.jpg",
					        description:{
					          "title":"네이버클라우드 테스트 영상",
					          "created_at":"Wed Jul 13 2022 00:00:00 GMT+0900 (한국 표준시)",
					          "profile_name":"네이버클라우드",
					          "profile_image":"https://player.vpe.naverncp.com/images/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>
        </>
    )
}