Nuxt.js용 플레이어 적용

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

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

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

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

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">와 같이 적용하여 조작할 수 있습니다.