Next.js용 플레이어 적용
    • PDF

    Next.js용 플레이어 적용

    • PDF

    Article Summary

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

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

    참고

    Next.js 예제를 실행하려면, 다음과 같은 환경이 요구됩니다.

    • Next.js 버전: 13.2.4
    • React 버전: 18.2.0 (react-dom 버전: 18.2.0)

    Next.js의 특성 이해

    Video Player Enhancement 서비스를 적용하기 전에 Next.js의 특성을 반드시 고려해 주십시오.
    Next.js 버전 13에서는 모든 컴포넌트가 서버 컴포넌트이기 때문에, CSR 방식으로 클라이언트 컴포넌트를 사용하려면 "use client";를 사용해야 합니다. 클라이언트 컴포넌트를 만드는 방법은 Next.js 공식 홈페이지에서 확인할 수 있습니다. 공식 홈페이지에서는 서버 컴포넌트를 사용할 경우와 클라이언트 컴포넌트를 사용할 경우를 명확히 구분하여 안내합니다. Rendering: Server and Client Components | Next.js를 참고해 주십시오.

    image.png

    참고

    React 관련 기능은 클라이언트 컴포넌트로 작성해야 사용할 수 있습니다. Next.js 파일 첫 행에 'use client'를 입력하면 해당 파일은 클라이언트 컴포넌트로 취급됩니다.

    함수를 사용한 스크립트 로드

    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://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>
              </>
          )
      }
      

    이 문서가 도움이 되었습니까?

    Changing your password will log you out immediately. Use the new password to log back in.
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.