Nuxt.js용 플레이어 적용

Prev Next

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"
             }
         ]
     },
}
    JavaScript
  2. pages/index.vue 페이지 컴포넌트에서 DemoPlayer 하위 컴포넌트를 호출해 주십시오.
    <template>
     <div>
         Demo Player Page
         <DemoPlayer />
     </div>
</template>

<script>
export default {
     name: 'SamplePage'
}
</script>
    JavaScript
  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>
    JavaScript

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>
    JavaScript
  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>
    JavaScript
    주의

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