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

    Nuxt.js용 플레이어 적용

    • PDF

    기사 요약

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

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

    참고

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

    • Nuxt.js 버전: 2.15.8
    • Vue.js 버전: 2.6.14

    전역으로 외부 스크립트 로드

    외부 스크립트를 전역으로 로드하는 방법을 사용하여 플레이어를 적용할 수 있습니다.
    전역으로 외부 스크립트를 로드하는 방법은 다음과 같습니다.

    1. nuxt.config.js 파일에서 head 속성 안에 스크립트를 추가해 주십시오.
      export default {
      // ....
           head: {
               title: 'nuxt2-demo-app',
               // ...
               script: [ // 스크립트 추가
                   {
                       type: "text/javascript",
                       defer: true,
                       hid: "stripe",
                       src: "https://player.vpe.naverncp.com/ncplayer.js?access_key=VPE SDK Access Key"
                   }
               ]
           },
      }
      
    2. pages/index.vue 페이지 컴포넌트에서 DemoPlayer 하위 컴포넌트를 호출해 주십시오.
      <template>
           <div>
               Demo Player Page
               <DemoPlayer />
           </div>
      </template>
      
      <script>
      export default {
           name: 'SamplePage'
      }
      </script>
      
    3. 컴포넌트 디렉터리에서 components/DemoPlayer.vue 파일을 생성하여 다음 코드와 같이 작성해 주십시오.
      <template>
           <div id="video"></div>
      </template>
      
      <script>
      export default {
           name: "DemoPlayer",
           data() {
               return {
                   access_key: "VPE SDK ACCESS KEY",
                   url: "https://player.vpe.naverncp.com/ncplayer.js?access_key=",
               };
           },
           created() {
               this.createPlayer('video')
           },
           methods: {
               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": "LIVE ERROR 테스트 영상",
                                   "created_at": "2022.07.13",
                                   "profile_name": "네이버클라우드",
                                   "profile_image": "https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                               },
                           }
                       ],
                       // options ....
                       
                   });
               },
           },
      }
      </script>
      <style scoped>
      </style>
      

    특정 페이지에서 외부 스크립트 로드

    Nuxt와 vue-meta를 활용해 원하는 페이지 컴포넌트에 스크립트를 로드할 수 있습니다. Nuxt.js에서 전역으로 외부 스크립트를 로드하는 방법과 유사합니다. 특정 페이지에서 외부 스크립트를 로드하는 방법은 다음과 같습니다.

    1. 페이지 컴포넌트를 작성해 주십시오.
      • <예시> page/index.vue 파일
      <template>
           <div>
               Demo Player Page
               <DemoPlayer v-if="scriptLoaded"/>
           </div>
      </template>
      
      <script>
      export default {
           name: 'SamplePage',
           head() {
               return {
                   title: "Sample Page",
                   script: [
                       {
                           type: "text/javascript",
                           hid: "stripe",
                           src: this.url + this.access_key,
                           defer: true,
                           callback: () => {
                               this.scriptLoaded = true;
                           }
                       }
                   ]
               }
           },
           data() {
               return {
                   scriptLoaded: false,
                   access_key: "VPE SDK Access Key",
                   url: "https://player.vpe.naverncp.com/ncplayer.js?access_key=",
               };
           },
      }
      </script>
      
    2. 하위 컴포넌트를 작성해 주십시오.
      • <예시> components/DemoPlayer.vue 파일
      <template>
           <div id="video"></div>
      </template>
      
      <script>
      export default {
           name: "DemoPlayer",
           data() {
               return {
                   access_key: "VPE SDK ACCESS KEY",
                   url: "https://player.vpe.naverncp.com/ncplayer.js?access_key=",
               };
           },
           created() {
               this.createPlayer('video')
           },
           methods: {
               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": "LIVE ERROR 테스트 영상",
                                   "created_at": "2022.07.13",
                                   "profile_name": "네이버클라우드",
                                   "profile_image": "https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                               },
                           }
                       ],
                       // options ....
                       
                   });
               },
           },
      }
      </script>
      <style scoped>
      </style>
      
      주의

      <DemoPlayer> 컴포넌트를 바로 랜더링하면 외부 스크립트 로드를 호출하는 생명 주기(LifeCycle)보다 먼저 실행되어 오류가 발생할 수 있습니다. 이러한 오류 발생을 방지하려면 외부 스크립트와 관련하여 로드되기 전과 로드되어 사용 가능한 두 가지 상태를 처리해야 합니다.
      SSR 모드에서 Nuxt를 사용할 때 페이지에 대한 첫 요청(SSR)을 지나 외부 스크립트가 로드된 페이지로 이동한 경우 mounted 생명 주기 훅(life cycle hook)도 스크립트가 로드되기 전 실행될 수 있습니다. 따라서 위 코드에서는 data()에 url과 access_key를 정의하고 head() 기능에 추가하여 적용합니다.
      stripe와 같은 외부 스크립트 API에 의존하는 경우에는 콜백 함수 속성을 사용해 scriptLoaded 임의 변수를 true로 변경하여 view 화면에 랜더링되도록 <DemoPlayer v-if="scriptLoaded">와 같이 적용하여 조작할 수 있습니다.


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

    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.