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

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

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

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を参照)。

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