---
title: "React.js向けプレイヤー適用"
slug: "vpe-example-react"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-example-react"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React.js向けプレイヤー適用

Classic/VPC環境で利用できます。

React.js用プレイヤーの適用では、Video Player Enhancement Web SDK JSを活用し、プレイヤーを適用して設定するためのユースケースを紹介します。

              参考

              

React.jsのユースケースを実行するには以下のような環境が求められます。

- Reactバージョン: 18.2.0(`react-dom`バージョン: 18.2.0)

## scriptタグの動的挿入

React.jsでは、scriptタグを動的に挿入する方法を使ってプレイヤーを適用できます。 scriptタグを動的に挿入する方法は、次の通りです。

1. 該当する .js 、.jsxコンポーネントファイルに以下のコードを作成し、scriptタグを追加します。

```
const script = document.createElement("script");
const access_key = "VPE SDK Access Key"; // VPE SDK発行キー

script.async = true;
script.src = "https://player.vpe.naverncp.com/ncplayer.js?access_key="+access_key;
document.body.appendChild(script);
```
2. Reactコンポーネントから外部の JavaScriptを読み込むようなタスクをサイドエフェクト(side effect)として処理します｡
  - `useEffect()`フック(hook)を活用してコンポーネントにアクセス時、スクリプトを使うように設定します([useScrpit](https://usehooks.com/useScript/)を参照)。
3. `src/hooks`ディレクトリで `useScript.jsx`ファイルを作成し、以下のようにコードを作成します。

```
import {useEffect, useState} from "react";
export default function useScript(url) {
     const [status, setStatus] = useState(url ? "loading" : "error");
      useEffect(() => {
          if (!url) {
           setStatus("error");
           return;
          }

          let script = document.querySelector(`script[src="${url}"]`);

          if (!script) {
           console.log("script not found, creating new one...")
           script = document.createElement(("script"));
           script.src = url;
           script.async = true;
           script.setAttribute("data-status", "loading");
           document.body.appendChild(script);

           const setAttributeFromEvent = (event) => {
            script.setAttribute(
                "data-status",
                event.type === "load" ? "ready" : "error"
            );
            setStateFromEvent(event.type);
           }

           script.addEventListener("load", setAttributeFromEvent);
           script.addEventListener("error", setAttributeFromEvent);
          } else {
           setStatus(script.getAttribute("data-status"));
          }
          const setStateFromEvent = (event) => {
           setStatus(event.type === "load" ? "ready" : "error");
          }

          script.addEventListener("load", setStateFromEvent);
          script.addEventListener("error", setStateFromEvent);

          return () => {

           if (script) {
            script.removeEventListener("load", setStateFromEvent);
            script.removeEventListener("error", setStateFromEvent);
           }
          };
      }, [url]);

      return status;
     }
```
  - スクリプトがロードされた時とエラーが発生した時の状態値を変更して管理できます。
4. ページおよびコンポーネントで `useScript`を使用して正常にスクリプトを読み込んだ時にプレイヤーをロードします｡
  - DemoPlayer.jsx

```
import useScript from "./hooks/useScript";
import {useEffect} from "react";

const access_key = "VPE SDK Access Key"; // 発行された VPEライセンスキー
const url = "https://player.vpe.naverncp.com/ncplayer.js?access_key=" + access_key;

function createPlayer(id) {

    let player = new ncplayer(id, {

        "playlist": [
            {
                file: "https://rhhwgjjetcsm16398693.cdn.ntruss.com/live/video/ls-20230309164515-SCFQE/playlist.m3u8",
                poster: "https://wnfosehmzhuc12665447.cdn.ntruss.com/thumb/sample_thumb.pngtype=m&w=1024&h=760&ttype=jpg",
                description: {
                    "title": "LIVE ERRORテスト動画",
                    "created_at": "2022.07.13",
                    "profile_name":"NAVERクラウド",
                    "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                },
            }
        ],
        // options...
    });
}

function DemoPlayer() {
    let status = useScript(url);
        useEffect(() => {
            if (status === "ready") { 
                // スクリプトの準備が終わった状態でプレイヤーを作成
                createPlayer('video');
            }
            else {
                console.log("not ready", url)
            }
        }, [status]);

    return (
      <>
         <div>
           <div id="video"></div>
         </div>
      </>
    )
}
export default DemoPlayer
```