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

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

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

scriptタグの動的挿入

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

該当する .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);

Reactコンポーネントから外部の JavaScriptを読み込むようなタスクをサイドエフェクト(side effect)として処理します｡

useEffect()フック(hook)を活用してコンポーネントにアクセス時、スクリプトを使うように設定します(useScrpitを参照)。

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;
     }

スクリプトがロードされた時とエラーが発生した時の状態値を変更して管理できます。

ページおよびコンポーネントで 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

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

scriptタグの動的挿入

What's Next