React.js용 플레이어 적용

Classic/VPC 환경에서 이용 가능합니다.

React.js 적용에서는 Video Player Enhancement Web SDK 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 컴포넌트에서 외부 자바스크립트를 불러오는 것과 같은 작업은 전형적인 사이드 이펙트(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": "네이버클라우드",
               "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