콘텐츠 인증

Classic/VPC 환경에서 이용 가능합니다. 콘텐츠 인증은 재생 소스에 Secure Token을 적용하고 MultiDRM을 설정하는 방법을 다룹니다.

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 객체로 MultiDRM을 설정합니다. DRM 사용 시에는 ncplayerDRM() 함수를 사용합니다.

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

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 설정 예제

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 공급사 계약이 필요합니다.

One Click Multi DRM 엔드포인트

VPE와 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 예제 (DRM)

drm.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>
    <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>