Nuxt.js向けプレイヤー適用

全域に外部スクリプトをロード

外部スクリプトを全域にロードする方法を使用してプレイヤーを適用できます。
全域に外部スクリプトをロードする方法は、次の通りです。

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>

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

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


<style scoped>
</style>

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

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

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

例) page/index.vue ファイル

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

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

例) 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">のように適用して操作できます。

:::

Nuxt.js向けプレイヤー適用

全域に外部スクリプトをロード

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

What's Next