콘텐츠 인증

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

재생 소스에 Secure Token을 적용하고 One Click Multi DRM을 설정하는 방법을 설명합니다.

Secure Token

token 옵션으로 재생 소스에 Secure Token을 적용합니다. HLS/DASH의 하위 TS 파일까지 함께 적용됩니다. 재생 중에는 tokenChange() 메서드로 토큰을 교체할 수 있습니다.

const player = new ncplayer("player", {
  autostart: true,
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
  token: "token=st=...~exp=...~acl=...", // Secure Token
});

// 재생 중 토큰 교체
player.tokenChange("token=st=...~exp=...~acl=...");

참고

Secure Token은 CDN에서 발급되며, 만료 시간이 있으므로 장시간 재생 시 tokenChange()로 주기적으로 교체해야 합니다.

One Click Multi DRM

playlist.drm 객체로 Multi DRM을 설정합니다. DRM 사용 시에는 ncplayerDRM() 함수를 사용합니다.

참고

DRM 재생은 일반 ncplayer()가 아닌 ncplayerDRM() 함수를 사용해야 합니다. 이 함수는 비동기(async)로 동작합니다.

DRM 키 종류

DRM 키 종류는 다음과 같습니다.

DRM 키	브라우저	필수 속성
com.widevine.alpha	Chrome, Android	src, licenseUri, licenseRequestHeader
com.microsoft.playready	Edge, Windows	src, licenseUri, licenseRequestHeader
com.apple.fps	Safari, iOS	src, licenseUri, licenseRequestHeader, certificateUrl

DRM 설정 예제

DRM 설정 예제는 다음과 같습니다.

document.addEventListener("DOMContentLoaded", async () => {
  await ncplayerDRM("player", {
    playlist: [
      {
        drm: {
          "com.apple.fps": {
            certificateUrl: "{Certificate URL}",
            licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
            licenseRequestHeader: {
              "Content-type": "application/x-www-form-urlencoded",
              "pallycon-customdata-v2": "{FairPlay Token}",
            },
            src: "{hls url}",
          },
          "com.widevine.alpha": {
            licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
            licenseRequestHeader: {
              "pallycon-customdata-v2": "{Widevine Token}",
            },
            src: "{dash url}",
          },
          "com.microsoft.playready": {
            licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
            licenseRequestHeader: {
              "pallycon-customdata-v2": "{PlayReady Token}",
            },
            src: "{dash url}",
          },
        },
        poster: "https://example.com/poster.png",
      },
    ],
    autostart: false,
  });
});

참고

HLS/DASH 두 채널 구성, HTTPS 환경, Widevine/PlayReady/FairPlay 지원, 외부 DRM 공급사 계약이 필요합니다.

API 엔드포인트

Video Player Enhancement 서비스와 One Click Multi DRM 서비스를 연동하여 DRM을 적용할 수 있습니다. FairPlay는 FPS Certificate와 라이선스 서명을 각각 생성해야 합니다.

# FPS Certificate Endpoint
GET https://multi-drm.apigw.ntruss.com/api/v1/license/fairplay

# License Endpoint (FairPlay/Widevine/PlayReady)
POST https://multi-drm.apigw.ntruss.com/api/v1/license

전체 HTML 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VPE DRM Player</title>

  <!-- hls.js / dash.js를 VPE 스크립트보다 먼저 로드 -->
  <script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
  <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>
</head>
<body>
  <div id="player" style="max-width: 800px; margin: 0 auto;"></div>

  <script>
    document.addEventListener("DOMContentLoaded", async () => {
      await ncplayerDRM("player", {
        playlist: [
          {
            drm: {
              "com.apple.fps": {
                certificateUrl: "{Certificate URL}",
                licenseUri: "{License URI}",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{FairPlay Token}",
                },
                src: "{hls url}",
              },
              "com.widevine.alpha": {
                licenseUri: "{License URI}",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{Widevine Token}",
                },
                src: "{dash url}",
              },
            },
            poster: "https://example.com/poster.png",
          },
        ],
        autostart: false,
        aspectRatio: "16/9",
      });
    });
  </script>
</body>
</html>

Documentation Index