Lecture Web et HTML5

Utiliser d’abord l’exemple complet#

Le paquet Web contient le dernier local Universal Player JavaScript et les déclarations, qualifié Shaka, une application exécutable PHP, un exemple exécutable ASP.NET Core, et une intégration README. Les pages de production peuvent charger Shaka et Universal Player à partir du DRM-X CDN; le paquet conserve les fichiers locaux actuels pour examen, développement et retour contrôlé.

1. Configurez Site ID, Site Key et Access Key côté serveur.
2. Définir le fichier protégé de confiance Publié Content ID et la politique nommée.
3. Remplacez l'exemple de décision de connexion et de versement par votre logique d'entreprise.

Responsabilités minimales du client#

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

Avant ce composant, chargez le runtime Shaka validé et le script Universal Player actuel du kit complet. À l’appui sur Play, le composant appelle votre endpoint authentifié. Celui-ci vérifie la session et les droits, choisit le contenu et la politique de confiance, crée Contract v1 et le renvoie avec Cache-Control: no-store.

Comportement automatique DRM#

• Windows Microsoft Edge privilégie PlayReady. Si la voie validée échoue avant lecture, Auto peut utiliser un repli Widevine limité.
• Chrome et pris en charge Android navigateurs utilisent Widevine.
• Safari sur iPhone et iPad utilise HLS FairPlay natif. Sur macOS Safari compatible, Shaka MSE FairPlay validé est préféré si disponible, avec repli HLS natif.
• Les navigateurs Huawei compatibles utilisent le chemin WisePlay qualifié et un comportement de qualité automatique conservateur.

Liste de vérification avant mise en production#

• Servez tout sur HTTPS et gardez Access Keys dans les secrets du serveur.
• Return playing-session respones with Cache-Control: no-store.
• Ne persistez pas les URLs manifestes, les jetons ou les réponses de session dans localStorage.
• Activez les journaux détaillés expurgés des données sensibles uniquement sur demande et pour une durée limitée. N’enregistrez ni octets de licence ni données d’autorisation.
• Test physique Windows Edge, macOS Safari, iPhone/iPad Safari, Android et toutes les classes d'appareils que vous annoncez.

Limite facultative de 1080p réservée aux téléphones#

Web SDK 1.2.0-beta.4 ajoute une limite facultative pour téléphones. Laissez-la non définie pour conserver UHD. Configurez-la avant le premier 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
});

L’option concerne les appareils détectés comme téléphones. Tablettes, ordinateurs et téléviseurs conservent leur plafond. La détection utilise les indications du navigateur et user-agent ; la largeur d’écran ne décide pas la résolution. Si l’application connaît la catégorie, utilisez device-class="phone" ou deviceClass: "phone". Autres valeurs : auto, tablet, desktop, tv. La classification du navigateur reste indicative.

SDK envoie la valeur platformCapabilities.maximumHeight la plus basse avant autorisation. L’endpoint doit la transmettre ou la réduire. Le plafond renvoyé ne doit pas dépasser la demande. Auto et le choix manuel restent bornés après rotation, plein écran, réessais ou changement de liste. Politique DRM signée et décodeur peuvent réduire davantage. Les valeurs sont des entiers de 144 à 4320 ; une valeur absente ou null désactive la limite facultative.

Safari exige HLS filtré

Le backend doit renvoyer nativeHlsQuality.autoUrl lié à la session et des URL de qualité contenant seulement les vidéos admissibles, sans perdre les groupes audio et sous-titres. Le PHP complet actuel l’implémente. Réduire le nombre avec une liste principale HLS non filtrée n’économise pas de bande passante. SDK refuse un plafond relevé ou une réponse FairPlay limitée sans le descripteur requis. Les autres backends doivent implémenter ce contrat avant activation.

Options des SDK natifs

Apple Universal Player 1.0.0-beta.1 accepte mobileMaximumHeight: 1080 uniquement pour la catégorie native téléphone. L’endpoint doit renvoyer une liste principale filtrée, contrôlée avant le chargement. Android 1.0.0-beta.1 accepte mobileMaximumHeight = 1080 dans WidevineCapabilities.playbackCapabilities ; utilisez clientPlatform = "android" pour les téléphones et explicitement android-tablet ou android-tv pour les autres catégories. Appliquez la limite hors ligne correspondante aux nouveaux téléchargements. Les précédents sont conservés.

Vérifier votre intégration

1. Préparez une source avec 1080p, des résolutions inférieures et UHD. Vérifiez la lecture avec la limite non définie.
2. Activez 1080 sur téléphone. Vérifiez plafond autorisé, liste filtrée, menu Auto/manuel et dimensions décodées. Aucun choix permis ne doit dépasser 1080p.
3. Testez déplacements, qualité, audio, sous-titres, publicités et passage à l’élément suivant. Arrêtez la lecture et confirmez la libération de la session.
4. Utilisez la même option sur ordinateur et tablette : la limite réservée aux téléphones ne doit pas réduire leur plafond. Les restrictions actuelles de politique ou d’appareil restent valables.

Le plafond de résolution ne fixe pas le débit et ne garantit aucune économie fixe. Les règles devant résister aux requêtes modifiées s’appliquent dans le backend de confiance et la politique DRM correspondante. Une indication client n’est pas une preuve. Sans version admissible, renvoyez une erreur ; ne revenez pas silencieusement à UHD.

Contrôles plein écran cohérents sur iPhone Safari#

Web SDK 1.2.0-beta.4 conserve les contrôles Web Player en plein écran, y compris sur la page PHP de publicité. Sur iPhone, il utilise le plein écran de l’élément si disponible ou agrandit le lecteur dans la page. Les barres du navigateur peuvent rester visibles. Il ne bascule pas vers le lecteur vidéo propre à iPhone. Toutes les plateformes utilisent le même menu qualité, audio et sous-titres.

Les options audio et sous-titres reflètent les pistes actuelles et se mettent à jour après application du changement par HLS natif. Désactiver puis réactiver CC conserve la dernière langue. Les annonces ont leurs propres contrôles ; ceux du contenu reviennent à la reprise.

Tester qualité, langues et publicités#

1. Lancez la lecture par un véritable appui ou clic. Les règles du navigateur pour la lecture automatique et le son restent applicables.
2. Ouvrez les réglages et vérifiez qualité, audio et sous-titres. Auto utilise les versions autorisées ; un choix manuel ne relève pas le plafond.
3. Changez l’audio, choisissez une langue de sous-titres, puis désactivez et réactivez CC. Vérifiez les libellés des pistes actives et la conservation du choix de langue.
4. Passez en plein écran sur iPhone Safari et Edge. Web Player conserve ses contrôles partagés ; iPhone peut s’agrandir dans la page avec les barres du navigateur visibles.
5. Si vous utilisez des publicités, testez les coupures avant, pendant et après le contenu, avec changement de qualité. La page PHP de publicité fournit un laboratoire. Annonces intégrées et Google IMA sont deux modes distincts ; vérifiez le chargement du service choisi dans chaque navigateur pris en charge.

Pour la bande passante, suivez Limite facultative de 1080p réservée aux téléphones. Ne la définissez pas pour conserver UHD. Elle ne fixe pas le débit et ne garantit aucun pourcentage d’économie.