Web・HTML5 での再生

まず完全なサンプルを使う#

Web パッケージには現在の Universal Player JavaScript と型宣言、検証済み Shaka、実行可能な PHP と ASP.NET Core の例、統合 README が含まれます。本番では DRM-X CDN から読み込めます。確認、開発、制御された代替経路用にローカルファイルも保持します。

1. サーバー側で Site ID、Site Key、Access Key を設定します。
2. 信頼できる公開された保護されたファイル Content ID および名前付きポリシーを設定します。
3. サンプルログインと資格決定をビジネスロジックに置き換えます。

クライアント側の最小限の役割#

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session">
</drmx-universal-player>

このコンポーネントの前に、完全なキットから検証済みの Shaka ランタイムと現在の Universal Player スクリプトを読み込みます。視聴者が Play を押すと、認証済みエンドポイントが呼び出されます。そこで視聴者のセッションと権限を確認し、信頼できるコンテンツとポリシーを選び、Contract v1 を作成して Cache-Control: no-store で返します。

DRM の自動選択#

• Windows Microsoft Edge は PlayReady を優先します。検証済み経路が再生開始前に失敗した場合、Auto は限定された Widevine の代替経路を使用できます。
• Chrome およびサポートされた Android ブラウザーは Widevine を使用します。
• iPhone と iPad の Safari はネイティブ HLS FairPlay を使用します。対応する macOS Safari では可能な場合に検証済み Shaka MSE FairPlay を優先し、ネイティブ HLS に切り替えられます。
• 対応する Huawei ブラウザーは、検証済みの WisePlay 経路と慎重な自動画質選択を使用します。

本番公開前の確認項目#

• HTTPS にすべてを実行し、サーバーの秘密に Access Key を保ちましょう。
• Cache-Control: no-store で再生セッション応答を返します。
• localStorage で URL、トークン、セッションの応答を永続的に行わないでください。
• 機密情報を除いた詳細ログは、利用者が明示的に有効にし、期間を制限してください。ライセンスのバイト列や認可情報は記録しないでください。
• 物理的な Windows Edge、macOS Safari、iPhone / iPad Safari、Android、および広告するすべてのデバイスクラスをテストして下さい。

任意のスマートフォン専用 1080p 制限#

Web SDK 1.2.0-beta.4 には任意のスマートフォン制限があります。未設定なら従来の UHD 動作を維持します。最初に Play を押す前に設定してください。

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session"
  mobile-max-height="1080">
</drmx-universal-player>

// Equivalent component option; retained for subsequent playlist items:
await component.play({mobileMaximumHeight: 1080});
// Remove the option before a new playback:
await component.play({mobileMaximumHeight: null});

// Low-level API, for a video element you own:
await DrmXUniversalPlayer.start({
  video, contentId: 'your-published-content-id',
  sessionEndpoint: '/api/drmx/playback-session',
  mobileMaximumHeight: 1080
});

検出されたスマートフォンだけに適用されます。タブレット、パソコン、テレビは従来の上限を維持します。ブラウザーのヒントと user-agent による判定を使用し、画面幅では解像度を決めません。ホストがデバイス種別を把握している場合は device-class="phone" または deviceClass: "phone" を使用します。他の値は auto、tablet、desktop、tv です。ブラウザーの分類は参考情報です。

SDK は認可前に低い方の platformCapabilities.maximumHeight を送信します。エンドポイントはその値を引き継ぐか、さらに下げてください。返す上限を要求値より高くしてはいけません。Auto と手動画質は、回転、全画面、再試行、プレイリスト変更後も許可範囲を維持します。署名済み DRM ポリシーやデコーダーの制限でさらに下がる場合があります。値は 144～4320 の整数です。未設定または null でこの任意の制限を無効にします。

Safari では絞り込み済み HLS が必要

セッションに紐づく nativeHlsQuality.autoUrl と、許可された画質 URL を返すバックエンドを使用します。音声と字幕のグループを維持し、条件に合う動画だけを含めてください。現在の完全な PHP サンプルは対応しています。HLS マスターが無制限なら数値の上限だけを下げても帯域幅は減りません。SDK は上限の引き上げや、必要な記述情報がない制限付き FairPlay 応答を拒否します。他のバックエンドでも有効化前に同じ契約を実装してください。

ネイティブ SDK の設定

Apple Universal Player 1.0.0-beta.1 は mobileMaximumHeight: 1080 を受け付け、ネイティブのスマートフォン種別だけに適用します。エンドポイントは絞り込み済みマスターを返し、メディア読み込み前に検査されます。Android 1.0.0-beta.1 では WidevineCapabilities.playbackCapabilities に mobileMaximumHeight = 1080 を指定します。スマートフォンには clientPlatform = "android"、他の種別には明示的に android-tablet または android-tv を使用してください。新しいダウンロードにも対応するオフライン能力制限を適用します。既存のダウンロードは保持されます。

統合を検証する

1. 1080p 以下と UHD を含むソースをパッケージ化し、上限未設定で再生できることを確認します。
2. スマートフォンで 1080 を有効にします。認可上限、絞り込み済みマスター、Auto／手動メニュー、デコードされた動画サイズを確認します。許可される選択肢はすべて 1080p 以下でなければなりません。
3. シーク、画質変更、音声、字幕、広告、次のプレイリスト項目への移動をテストします。再生を止め、セッションが解放されたことを確認します。
4. パソコンとタブレットにも同じ設定を指定します。スマートフォン専用の制限でそれらの上限が下がらないことを確認してください。従来のポリシーとデバイス制限は引き続き適用されます。

解像度制限はビットレートを設定せず、一定の節約量も保証しません。ブラウザー要求の改変に耐える必要があるルールは、信頼できるバックエンドと対応する DRM ポリシーで適用してください。クライアントのデバイスヒントを証明として扱わないでください。条件に合う画質がなければエラーにし、UHD に暗黙に戻してはいけません。

iPhone Safari で共通の全画面コントロール#

Web SDK 1.2.0-beta.4 は PHP 広告ページを含め、全画面でも Web Player のコントロールを維持します。iPhone では対応時に要素の全画面表示を使い、それ以外はページ内でプレーヤーを拡大します。ブラウザーバーが残る場合があります。iPhone の動画専用プレーヤーには切り替わりません。どのプラットフォームでも同じ設定メニューで画質、音声言語、字幕を選択します。

音声と字幕の選択欄は現在のトラック状態を表示し、ネイティブ HLS の変更適用後に更新されます。CC をオフにして再度オンにしても、最後の字幕言語を保持します。広告中は専用コントロールを使用し、コンテンツ再開時に通常のコントロールが戻ります。

画質・言語・広告をテストする#

1. 実際のタップまたはクリックで再生を開始します。ブラウザーの自動再生と音声のルールは引き続き適用されます。
2. 設定を開き、現在の画質、音声、字幕の選択を確認します。Auto は許可された画質構成を使用し、手動選択でも認可上限を引き上げることはできません。
3. 音声言語と字幕言語を選択し、CC をオフにしてからオンにします。表示が現在のトラックと一致し、字幕言語の設定が保持されることを確認してください。
4. iPhone Safari と Edge で全画面にします。Web Player の共通コントロールが維持されることを確認してください。iPhone ではブラウザーバーを残したままページ内で拡大する場合があります。
5. 広告を使用する場合は、画質変更を含めてコンテンツの前・途中・後の広告枠をテストします。PHP 広告ページをテストに使用できます。組み込みのデモ広告と Google IMA は別のモードです。対応する各ブラウザーで選択した広告サービスが読み込まれることを確認してください。

帯域幅の設定は任意のスマートフォン専用 1080p 制限を参照してください。未設定なら従来の UHD 動作を維持します。解像度制限は固定ビットレートを設定せず、一定割合の節約も保証しません。