- 인쇄
- 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
전역으로 외부 스크립트 로드
외부 스크립트를 전역으로 로드하는 방법을 사용하여 플레이어를 적용할 수 있습니다.
전역으로 외부 스크립트를 로드하는 방법은 다음과 같습니다.
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" } ] }, }
pages/index.vue
페이지 컴포넌트에서DemoPlayer
하위 컴포넌트를 호출해 주십시오.<template> <div> Demo Player Page <DemoPlayer /> </div> </template> <script> export default { name: 'SamplePage' } </script>
- 컴포넌트 디렉터리에서
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에서 전역으로 외부 스크립트를 로드하는 방법과 유사합니다. 특정 페이지에서 외부 스크립트를 로드하는 방법은 다음과 같습니다.
- 페이지 컴포넌트를 작성해 주십시오.
- <예시>
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>
- <예시>
- 하위 컴포넌트를 작성해 주십시오.
- <예시>
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">
와 같이 적용하여 조작할 수 있습니다. - <예시>