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

   JavaScript

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

   JavaScript

   Copy
   • 스크립트가 로드되었을 때와 에러가 발생했을 때의 상태값을 변경하여 관리할 수 있습니다.
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
     

     JavaScript

     Copy