# Web- und HTML5-Wiedergabe

Integrieren Sie DRM-X 6.0 geschützte Web-Wiedergabe mit der Universal Player, qualifizierte Shaka, PHP, ASP.NET Core, automatische DRM Auswahl und sichere Diagnose.

Verschlüsselte Videos und DRM-Lizenzen werden getrennt übertragen

Das CDN liefert verschlüsselte Videos. Ihr Backend prüft den Zugriff; der DRM-Lizenzdienst autorisiert die Entschlüsselung auf einem kompatiblen Gerät.

- 01**Speicher / CDN**

Liefert verschlüsselte Medien an den Player.

- 02**Ihr Backend**

Prüft die Zugriffsberechtigung des Zuschauers und fordert bei DRM-X die Wiedergabeautorisierung an.

- 03**DRM-X**

Validiert die Wiedergabeautorisierung und verarbeitet die DRM-Lizenzanfrage.

- 04**Player + Gerät**

Verwendet das DRM-System des Geräts, um eine Lizenz zu erhalten und die verschlüsselten Medien abzuspielen.

Ihr Backend entscheidet über den Zugriff; DRM-X erzwingt die unterschriebene Richtlinie. Verschlüsselte Medien und DRM Lizenzen folgen getrennten Lieferwegen.

## Verwenden Sie zuerst die vollständige Probe[#](#use-the-complete-sample-first)

Das Webpaket enthält das neueste lokale Universal Player JavaScript und Deklarationen, qualifizierte Shaka, eine lauffähige PHP Anwendung, ein lauffähiges ASP.NET Core Beispiel und eine Integration README. Produktionsseiten können Shaka und Universal Player aus dem DRM-X CDN laden; das Paket behält aktuelle lokale Dateien für die Überprüfung, Entwicklung und kontrolliertes Fallback.

- Richten Sie Site ID, Site Key und Access Key auf dem Server ein.
- Legen Sie die vertrauenswürdige Veröffentlichte geschützte Datei Content ID und benannte Richtlinie fest.
- Ersetzen Sie die Beispiel-Login- und Berechtigungsentscheidung durch Ihre Geschäftslogik.



## Minimale Kundengrenze[#](#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>
```

**Der Browser wählt keine Sicherheit**Ihr Backend bildet den authentifizierten Benutzer und den vertrauenswürdigen Katalogverweis auf die DRM-X Content ID und die Richtlinienvorlage ab.



## Automatisches Verhalten DRM[#](#automatic-drm-behavior)

- Windows Microsoft Edge bevorzugt PlayReady. Wenn der qualifizierte PlayReady Pfad vor der Wiedergabe fehlschlägt, kann der Auto-Modus ein begrenztes Widevine Fallback verwenden.
- Chrome und unterstützt Android Browser verwenden Widevine.
- Safari auf iPhone und iPad verwendet native HLS FairPlay. Bei unterstütztem macOS Safari wird qualifizierte Shaka MSE FairPlay bevorzugt, wenn verfügbar, mit nativem HLS Fallback.
- Kompatible Huawei Browser verwenden die qualifizierten WisePlay Pfad und konservatives automatisches Qualitätsverhalten.



## Produktions-Checkliste[#](#production-checklist)

- Serve alles über HTTPS und verwahre Access Keys in Servergeheimnissen.
- Antworten auf die Wiedergabesitzung mit `Cache-Control: no-store` zurückgeben.
- Beharren Sie nicht auf manifesten URLs, Token oder Session-Antworten in `localStorage`.
- Halten Sie detaillierte redigierte Logs Opt-in und Zeit begrenzt; notieren Sie keine Lizenzbytes oder Autorisierung.
- Testen Sie physisch Windows Edge, macOS Safari, iPhone/iPad Safari, Android und jede Geräteklasse, die Sie bewerben.



Web SDK 

## HTML5 Wiedergabe mit einer Web Component[#](#html5-playback-with-one-web-component)



```
<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>
```



Der Browser ruft nur Ihren authentifizierten Endpunkt gleichen Ursprungs auf. Auto wählt das entsprechende unterstützte DRM und registrierte DASH/HLS Manifest. Bitrate, Audiosprache/Kanal, Untertitel, Bild-in-Bild, Vollbild und Wiedergabegeschwindigkeit sind eingebaut.



### Verwenden von Shaka, Video.js, Bitmovin oder einem anderen EME Player



Fordern Sie den Vertrag v1 von Ihrem Backend an, laden Sie `manifestUrl` und fügen Sie `Authorization: Bearer {drmLicenseToken}` nur zu DRM Lizenz- und FairPlay Zertifikatsanforderungen hinzu. Behalten Sie die undurchsichtigen Herausforderungs- und Lizenzantwortbytes genau. Verwenden Sie die zurückgegebene Release-Route, wenn die Wiedergabe endet.





## Universal Player Playlists und Shared Controls[#](#universal-player-playlists-and-shared-controls)



Die Web- und Android-Editionen verwenden ein konsistentes dunkles Einstellungsfeld mit kompakten blauen Steuerelementen. Playlists unterstützen next/previous, shuffle, repeat one/all und stornierbaren automatischen Fortschritt. Jedes Element verwendet eine neue autorisierte Wiedergabeanforderung. Kapitel- und Transkript-Metadaten stammen aus Ihrem Inhaltskatalog.



Wiedergabegeschwindigkeit, Sleep-Timer, Untertitel, erlaubte Qualität, Audiosprachen, Session-Lesezeichen und A-B-Looping sind verfügbar. Web fügt Tastaturkürzel, optionale Viewer-scoped lokalen Lebenslauf, Transkript-Suche und unterstützt Browser PiP. Android behält native Widevine Offline-Downloads und Erneuerung. Casting und Cross-Device-Fortschritt erfordern separate Anwendungsintegrationen.



### Professional- und Enterprise-Logo-Einstellungen



Branding bleibt von der Videooberfläche fern. Rechtsklicken Sie auf das Web Player oder öffnen Sie Einstellungen → Über Player auf beiden Editionen, um das autorisierte Logo, die Produktinformationen und die Player Version zu sehen. Die runde Einstellungssteuerung und der dunkle Menüstil werden mit Android geteilt. Die Vollbild-Webeinstellungen enthalten auch einen Playlist-Selektor.



Setzen Sie `playerBranding` in Ihrem vertrauenswürdigen Backend auf `{"mode":"hidden"}` oder `{"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"}`. Die Plattform überprüft das aktive Professional- oder Enterprise-Abonnement. Andere Pläne verwenden `{"mode":"default"}`; nicht autorisierte benutzerdefinierte / versteckte Anforderungen geben 403 zurück. Dies ist getrennt von Sicherheitswasserzeichen.



Die PHP Download enthält editierbare Playlist und Branding-Konfiguration. Android Kunde ZIP Behalten Sie die Playlist-Autorisierung in Ihrem Backend; niemals einbetten API Kunde Zugangsdaten entweder Player.

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