# Web・HTML5 での再生

インテグレート DRM-X 6.0 保護されたWebの再生と Universal Player、修飾される Shaka, PHP, ASP.NET Core、自動 DRM 選択および安全な診断。

暗号化された動画と DRM ライセンスは別の経路で配信されます

CDN は暗号化された動画を配信します。バックエンドが視聴権限を確認し、DRM ライセンスサービスが対応デバイスでの復号を許可します。

- 01**ストレージ / CDN**

暗号化されたメディアをプレーヤーに配信します。

- 02**お客様のバックエンド**

視聴権限を確認し、DRM-X に再生の認可をリクエストします。

- 03**DRM-X**

再生の認可情報を検証し、DRM ライセンスリクエストを処理します。

- 04**プレーヤー + デバイス**

デバイスの DRM システムを使ってライセンスを取得し、暗号化されたメディアを再生します。

バックエンドはアクセスを決定します。DRM-Xは署名されたポリシーを強制します。暗号化されたメディアとDRMのライセンスは、別の配送パスに従います。

## 完全なサンプルを最初に使用して下さい[#](#use-the-complete-sample-first)

Webパッケージには最新のローカルパッケージが含まれています。 Universal Player JavaScript および宣言、修飾される Shaka, 実行可能 PHP アプリケーション、実行可能 ASP.NET Core 例と統合 README. 生産ページは読み込まれるかもしれません Shaka そして、 Universal Player から まで DRM-X CDN;パッケージはレビュー、開発、および制御されたフォールバックのための現在のローカル ファイルを保持します。

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



## 最小限のクライアント境界[#](#minimal-client-boundary)

```
<script src="https://drm-x6-cdn.1aicloud.com/sdk/drmx-universal-player/v1/drmx-universal-player.js"></script>
<drmx-universal-player id="player"></drmx-universal-player>
<script>
  // Call your authenticated backend, not api6.drm-x.com.
  const session = await fetch('/api/playback/session', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({contentId: 'trusted-catalog-reference'})
  }).then(r => r.json());
  await window.DrmXUniversalPlayer.start(document.querySelector('#player'), session);
</script>
```

**ブラウザはセキュリティを選択していません**バックエンドは、認証されたユーザーと信頼できるカタログリファレンスをDRM-X Content IDとポリシーテンプレートにマップします。



## 自動 DRM 動作[#](#automatic-drm-behavior)

- Windows マイクロソフト Edge は PlayReady を好みます。 プレーバックの前に修飾された PlayReady パスが失敗した場合、自動モードはバインドされた Widevine フォールバックを使用するかもしれません。
- Chrome およびサポートされた Android ブラウザーは Widevine を使用します。
- Safari iPhoneとiPadでネイティブ HLS FairPlay. サポートされる macOS Safari、修飾される Shaka MSE FairPlay ネイティブで利用可能な場合、 HLS フォールバック。
- 互換性のあるHuaweiブラウザは、資格のあるWisePlayパスと保守的な自動品質動作を使用します。



## 生産チェックリスト[#](#production-checklist)

- HTTPS にすべてを実行し、サーバーの秘密に Access Key を保ちましょう。
- `Cache-Control: no-store` で再生セッション応答を返します。
- `localStorage` で URL、トークン、セッションの応答を永続的に行わないでください。
- 詳細な赤字ログのオプトインとタイムバウンドを維持します。ライセンスバイトや認可を記録しないでください。
- 物理的な Windows Edge、macOS Safari、iPhone / iPad Safari、Android、および広告するすべてのデバイスクラスをテストして下さい。



ウェブ SDK 

## 1つのWeb Components[#](#html5-playback-with-one-web-component)でHTML5の再生



```
<script
  src="https://drm-x6-cdn.1aicloud.com/shaka-player-5.2.4-drmx.2-6557ae581f1c.js"
  integrity="sha384-QzxDZ19XaYAL308fvtVjFjUX9RpRxtSfEZ1k1lm8FsRuML1MgNEORVMCtmToCFb8"
  crossorigin="anonymous"></script>
<script
  src="https://drm-x6-cdn.1aicloud.com/drmx-universal-player-1.2.0-preview.6-fa4b95431a9a.js"
  integrity="sha384-gwj1QszshenHjMEkHTTDEpozi6rbhsQgPlaq+aHBCgHiuEd2VK0P8tOB8BWaMQRr"
  crossorigin="anonymous"></script>

<drmx-universal-player
  content-id="course-12-lesson-4"
  content-type="vod"
  session-endpoint="/api/drmx/playback-session">
</drmx-universal-player>
```



ブラウザは、認証された同じoriginエンドポイントのみを呼び出します。 Autoは、適切にサポートされている DRM を選択し、登録された DASH/HLS manifest を選択します。 ビットレート、オーディオ言語/チャンネル、字幕、ピクチャー・イン・ピクチャー、フルスクリーン、再生速度が組み込まれています。



### Shaka、Video.js、Bitmovin、または別のEME プレーヤーを使用して



バックエンドから契約 v1 をリクエストし、 `manifestUrl` をロードし、 DRM ライセンスと FairPlay 証明書リクエストだけ `Authorization: Bearer {drmLicenseToken}` を追加します。 不透明のチャレンジとライセンスのレスポンスを正確に保存します。 再生終了時に返されたリリースルートを使用してください。





## Universal Player プレイリストと共有制御[#](#universal-player-playlists-and-shared-controls)



Web版とAndroid版は、コンパクトなブルーコントロールを備えた一貫性のあるダーク設定パネルを使用します。プレイリストは、次の/前のサポート、シャッフル、1/allを繰り返し、そしてcancellable自動進歩をサポートします。すべてのアイテムは、新しい認定再生リクエストを使用します。チャプターとトランスクリプトのメタデータは、コンテンツカタログから提供されます。



再生速度、スリープタイマー、キャプション、許可された品質、オーディオ言語、セッションブックマーク、A-Bループが利用可能です。 Webは、キーボードショートカット、オプションビューアスコープのローカル履歴書、トランスクリプト検索、およびサポートされているブラウザPiPを追加します。 Androidは、ネイティブWidevineオフラインのダウンロードと更新を保持します。 鋳造およびクロスデバイスの進捗は、別のアプリケーション統合を必要とします。



### 専門および企業ロゴの設定



ブランディングは、ビデオ表面を離れます。 Web プレーヤー を右クリックし、設定 → 約 プレーヤー をいずれかのエディションで右クリックして、認証されたロゴ、製品情報、 プレーヤー バージョンを確認します。 ラウンド設定制御とダークメニュースタイルは Android と共有されます。 フルスクリーン Web 設定には、プレイリストセレクターも含まれています。



`{"mode":"hidden"}` または `{"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"}` に信頼できるバックエンドに `playerBranding` を設定します。このプラットフォームは、アクティブなプロフェッショナルまたはエンタープライズサブスクリプションをチェックします。その他のプランは `{"mode":"default"}` を使用します。無許可のカスタム/ヒデンリクエストは 403 を返します。これはセキュリティの透かしとは別です。



PHPのダウンロードには、編集可能なプレイリストとブランディング設定が含まれています。Androidの顧客ZIPには、プレイリストのコールバックの例が含まれています。 バックエンドでプレイリストの許可を保ち、APIクライアント認証情報をプレーヤーのいずれかに埋め込むことはありません。

<!-- Canonical: https://docs.drm-x.com/ja/sdk/web -->
<!-- Language: ja -->