Create a player for React.js

Available in Classic and VPC

Applying a player for React.js describes the example for applying and setting a player with Video Player Enhancement Web SDK JS.

Dynamic insertion of script tags

In React.js, you can apply a player by dynamically inserting a script tag.
The following is how to dynamically insert script tags:

1. Write the following code in the relevant .js or .jsx component file and add a script tag:

   const script = document.createElement("script");
   const access_key = "VPE SDK Access Key"; // VPE SDK issue key
   
   script.async = true;
   script.src = "https://player.vpe.naverncp.com/ncplayer.js?access_key="+access_key;
   document.body.appendChild(script);
   

2. Handle tasks such as loading external JavaScript in React components as side effects.

   • Use the useEffect() hook to enable the script when the component enters. (see useScrpit)

3. Write it with the following code, creating useScript.jsxfile in the src/hooks directory:

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

   • You can manage them by modifying a status value for both when the script is loaded and an error occurs.

4. Load a player when a script is normally called using useScript in a page and a component.

   • DemoPlayer.jsx

     import useScript from "./hooks/useScript";
     import {useEffect} from "react";
     
     const access_key = "VPE SDK Access Key"; // Issued VPE license key
     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 test video",
                         "created_at": "2022.07.13",
                         "profile_name": "NAVER Cloud",
                         "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                     },
                 }
             ],
             // options...
         });
     }
     
     function DemoPlayer() {
         let status = useScript(url);
             useEffect(() => {
                 if (status === "ready") { 
                     // Create a player with the script ready
                     createPlayer('video');
                 }
                 else {
                     console.log("not ready", url)
                 }
             }, [status]);
     
         return (
           <>
              <div>
                <div id="video"></div>
              </div>
           </>
         )
     }
     export default DemoPlayer