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>
   
   
   

3. コンポーネントディレクトリで components/DemoPlayer.vue ファイルを作成し、以下のようにコードを作成します。

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

特定ページから外部スクリプトをロード

Nuxtと vue-metaを活用して希望するページコンポーネントにスクリプトをロードできます。Nuxt.jsから全域に外部スクリプトをロードする方法と似ています。特定ページから外部スクリプトをロードする方法は、次の通りです。

1. ページコンポーネントを作成します。

   • 例) page/index.vue ファイル

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

2. サブコンポーネントを作成します。

   • 例) components/DemoPlayer.vue ファイル

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

   注意

   <DemoPlayer> コンポーネントを直接レンダリングすると、外部スクリプトのロードを呼び出すライフサイクル(LifeCycle)より先に実行され、エラーが発生する場合があります。このようなエラーの発生を防ぐには、外部スクリプトに関してロード前とロードして使用できる2つの状態を処理する必要があります。

SSRモードで Nuxtを使用する際にページに対する初回リクエスト(SSR)を経て外部スクリプトがロードされたページに移動した場合、mountedライフサイクルフック(life cycle hook)もスクリプトがロードされる前に実行されることがあります。したがって上記コードでは data()に urlと access_keyを定義し、head()機能に追加して適用します。
stripeのように外部スクリプトの APIに依存する場合はコールバック関数のプロパティを使用し、scriptLoaded 任意の変数を trueに変更して view画面にレンダリングされるように <DemoPlayer v-if="scriptLoaded">のように適用して操作できます。

:::