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 컴포넌트에서 외부 자바스크립트 불러오기와 같은 작업을 사이드 이펙트(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": "네이버클라우드",
                    "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