コンテンツ認証

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の2チャンネル構成、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