Available in Classic and VPC
It explains how to apply Secure Token to the playback source and configure One Click Multi DRM.
Secure Token
Using the token option, apply Secure Token to the playback source. HLS/DASH also applies to the underlying TS files. During playback, you can replace the token using the tokenChange() method.
const player = new ncplayer("player", {
autostart: true,
playlist: [
{
file: "https://example.com/video/master.m3u8",
},
],
token: "token=st=...~exp=...~acl=...", // Secure Token
});
// Token replacement during playback
player.tokenChange("token=st=...~exp=...~acl=...");
Secure Token is issued by the CDN and has an expiration time, so for long playback it must be periodically replaced using tokenChange().
One Click Multi DRM
Use this playlist.drm object to configure Multi DRM. When using DRM, use the ncplayerDRM() function.
For DRM playback, use the ncplayerDRM() function instead of the regular ncplayer(). This function operates asynchronously (async).
DRM key type
DRM key types are as follows:
| DRM key | Browser | Required property |
|---|---|---|
| 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 configuration example
The DRM configuration example is as follows:
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,
});
});
2-channel configuration with HLS/DASH, HTTPS environment, support for Widevine/PlayReady/FairPlay, and a contract with an external DRM provider are required.
API endpoint
You can apply DRM by integrating the Video Player Enhancement service with the One Click Multi DRM service. FairPlay requires generating both an FPS certificate and a license signature separately.
# 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
Full HTML example
<!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>
<!-- Load hls.js/dash.js before the VPE script -->
<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>