Create a player for Nuxt.js

Available in Classic and VPC

Applying a player for Nuxt.js describes the example for applying and setting a player with Video Player Enhancement Web SDK JS.

Load an external script globally

You can apply a player by globally loading an external script
The following is how to load an external script globally:

1. Add a script in the nuxt.config.js file using the headproperty.

   export default {
   // ....
        head: {
            title: 'nuxt2-demo-app',
            // ...
            script: [ // Add script
                {
                    type: "text/javascript",
                    defer: true,
                    hid: "stripe",
                    src: "https://player.vpe.naverncp.com/ncplayer.js?access_key=VPE SDK Access Key"
                }
            ]
        },
   }
   

2. Call the DemoPlayer subcomponent from the pages/index.vue page component.

   <template>
        <div>
            Demo Player Page
            <DemoPlayer />
        </div>
   </template>
   
   
   

3. Write it with the following code, creating components/DemoPlayer.vue file in the component directory:

   <template>
        <div id="video"></div>
   </template>
   
   
   <style scoped>
   </style>
   

Load an external script from certain page

You can load a script in the page component with Nuxt and vue-meta. It is similar to how to load an external script globally from Nuxt.js. The following is how to load an external script from a certain page:

1. Write a page component.

   • <example> page/index.vue file

   <template>
        <div>
            Demo Player Page
            <DemoPlayer v-if="scriptLoaded"/>
        </div>
   </template>
   
   
   

2. Write a subcomponent.

   • <example> components/DemoPlayer.vue file

   <template>
        <div id="video"></div>
   </template>
   
   
   <style scoped>
   </style>
   

   Caution

   If you render the <DemoPlayer> component directly, it runs before LifeCycle which calls to load the external script, which can cause errors. To prevent these errors, you should handle two conditions related to an external script which are before loading and available after loading.

When using Nuxt in SSR mode If you move past first request(SSR) about a page to the page that an external page has loaded, mounted life cycle hook can also run before loading the script. Therefore, in the code above, define url and access_key in data(), and apply them by adding them to the head() feature.
If you rely on an external script API such as stripe, you can use the callback function property to change scriptLoaded arbitrary variables to true and manipulate them to be rendered on the view screen like <DemoPlayer v-if="scriptLoaded">.

:::