Web- und HTML5-Wiedergabe

Zuerst das vollständige Beispiel verwenden#

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.

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

Minimale Aufgaben des Clients#

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

Laden Sie die qualifizierte Shaka-Laufzeit und das aktuelle Universal Player-Skript aus dem kompletten Kit vor diese Komponente. Die Komponente ruft Ihren authentifizierten Endpunkt auf, wenn der Betrachter Play drückt. Dieser Endpunkt überprüft Ihre Viewer-Sitzung und Berechtigung, wählt vertrauenswürdige Inhalte und Richtlinien aus, erstellt Contract v1 und gibt sie mit Cache-Control: no-store zurück.

Automatische DRM-Auswahl#

• Windows Microsoft Edge bevorzugt PlayReady. Scheitert der geprüfte Pfad vor Wiedergabe, kann Auto begrenzt auf Widevine ausweichen.
• Chrome und unterstützt Android Browser verwenden Widevine.
• Safari auf iPhone und iPad nutzt natives HLS FairPlay. Unterstütztes macOS Safari bevorzugt bei Verfügbarkeit geprüftes Shaka MSE FairPlay mit nativem HLS als Ersatz.
• Kompatible Huawei Browser verwenden die qualifizierten WisePlay Pfad und konservatives automatisches Qualitätsverhalten.

Checkliste für den Produktivbetrieb#

• 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.
• Aktivieren Sie detaillierte Logs nach Entfernung sensibler Daten nur ausdrücklich und zeitlich begrenzt. Erfassen Sie keine Lizenzbytes oder Autorisierungsdaten.
• Testen Sie physisch Windows Edge, macOS Safari, iPhone/iPad Safari, Android und jede Geräteklasse, die Sie bewerben.

Optionale 1080p-Grenze nur für Smartphones#

Web SDK 1.2.0-beta.4 ergänzt eine optionale Smartphone-Grenze. Ohne Einstellung bleibt UHD unverändert. Konfigurieren Sie vor dem ersten 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
});

Die Option gilt für erkannte Smartphones. Tablets, Desktop und Fernseher behalten ihre bisherigen Obergrenzen. Browserhinweise und user-agent dienen zur Erkennung, nicht die Bildschirmbreite. Kennt die Anwendung die Geräteklasse, verwenden Sie device-class="phone" oder deviceClass: "phone". Weitere Werte: auto, tablet, desktop, tv. Die Browserklassifizierung ist nur ein Hinweis.

SDK sendet den niedrigeren platformCapabilities.maximumHeight vor der Autorisierung. Ihr Endpunkt muss ihn übernehmen oder weiter senken. Die Antwort darf die Anfrage nicht überschreiten. Auto und manuelle Wahl bleiben nach Drehung, Vollbild, Wiederholungen und Playlist-Wechsel begrenzt. Signierte DRM-Richtlinien und Decoder können weiter einschränken. Erlaubt sind ganze Zahlen von 144 bis 4320; fehlender Wert oder null deaktiviert die Option.

Safari erfordert gefiltertes HLS

Das Backend muss sitzungsgebundenes nativeHlsQuality.autoUrl und Qualitäts-URLs mit ausschließlich erlaubten Videovarianten liefern und Audio- und Untertitelgruppen erhalten. Das vollständige PHP-Beispiel unterstützt dies. Eine kleinere Zahl bei unbeschränktem HLS-Master spart keine Bandbreite. SDK verweigert erhöhte Grenzen oder begrenzte FairPlay-Antworten ohne erforderlichen Deskriptor. Andere Backends müssen denselben Vertrag vor Aktivierung implementieren.

Native SDK Optionen

Apple Universal Player 1.0.0-beta.1 akzeptiert mobileMaximumHeight: 1080 nur für die native Smartphone-Klasse. Der Endpunkt liefert einen gefilterten Master, geprüft vor dem Medienladen. Android 1.0.0-beta.1 akzeptiert mobileMaximumHeight = 1080 in WidevineCapabilities.playbackCapabilities; verwenden Sie clientPlatform = "android" für Smartphones und explizit android-tablet oder android-tv für andere Klassen. Begrenzen Sie neue Offline-Downloads entsprechend. Bestehende Downloads bleiben erhalten.

Überprüfen Sie Ihre Integration

1. Erstellen Sie ein Paket mit 1080p, niedrigeren Stufen und UHD. Prüfen Sie die Wiedergabe ohne eingestellte Grenze.
2. Aktivieren Sie 1080 auf einem Smartphone. Prüfen Sie Autorisierungsgrenze, gefilterten Master, Auto-/manuelles Menü und dekodierte Abmessungen. Keine erlaubte Wahl darf 1080p überschreiten.
3. Testen Sie Zeitsprünge, Qualitätswechsel, Audio, Untertitel, Werbung und nächsten Playlist-Eintrag. Stoppen Sie und prüfen Sie die Sitzungsfreigabe.
4. Verwenden Sie dieselbe Option auf Desktop und Tablet. Die Smartphone-Grenze darf deren Obergrenzen nicht senken. Bestehende Richtlinien und Gerätegrenzen gelten weiterhin.

Die Auflösungsgrenze bestimmt keine Bitrate und garantiert keine feste Einsparung. Regeln gegen manipulierte Browseranfragen gehören ins vertrauenswürdige Backend und die passende DRM-Richtlinie. Ein Gerätehinweis ist kein Nachweis. Fehlen geeignete Varianten, muss ein Fehler folgen; nicht still auf UHD zurückfallen.

Einheitliche Vollbild-Bedienung auf iPhone Safari#

Web SDK 1.2.0-beta.4 behält Web-Player-Bedienelemente im Vollbild, auch auf der PHP-Werbeseite. iPhone nutzt Element-Vollbild bei Unterstützung oder vergrößert den Player innerhalb der Seite. Browserleisten können sichtbar bleiben. Es wechselt nicht zum iPhone-eigenen Videoplayer. Qualität, Audio und Untertitel verwenden auf allen Plattformen dasselbe Menü.

Audio- und Untertitelauswahl zeigen die aktiven Spuren und werden nach Anwendung durch natives HLS aktualisiert. CC aus-/einschalten erhält die letzte Sprache. Werbung hat eigene Bedienelemente; bei Fortsetzung des Inhalts erscheinen die normalen wieder.

Qualität, Sprachen und Werbung testen#

1. Starten Sie mit einem echten Tippen oder Klick. Browserregeln für Autoplay und Ton gelten weiter.
2. Prüfen Sie aktuelle Qualität, Audio und Untertitel in den Einstellungen. Auto verwendet erlaubte Stufen; manuelle Wahl hebt die Autorisierungsgrenze nicht an.
3. Ändern Sie die Audiosprache, wählen Sie eine Untertitelsprache aus und schalten Sie dann CC aus und ein. Bestätigen Sie, dass die Etiketten die aktiven Tracks widerspiegeln und die Untertitelpräferenz beibehalten wird.
4. Wechseln Sie auf iPhone Safari und Edge ins Vollbild. Web Player behält gemeinsame Bedienelemente; iPhone kann innerhalb der Seite mit sichtbaren Browserleisten expandieren.
5. Testen Sie Werbung vor, während und nach dem Inhalt einschließlich Qualitätswechsel. Die PHP-Werbeseite bietet ein Testlabor. Demo-Werbung und Google IMA sind getrennte Modi. Prüfen Sie den gewählten Werbedienst in jedem unterstützten Browser.

Für Bandbreite siehe optionale 1080p-Grenze nur für Smartphones. Ohne Einstellung bleibt UHD bestehen. Weder feste Bitrate noch prozentuale Einsparung sind garantiert.