DRM-X 6.0 logo de la colombe et de la branche d'oliveDRM-X 6.0Documentation
◎ Français

Lecture Web et HTML5

Intégrez la lecture Web protégée DRM-X 6.0 avec la sélection Universal Player, qualifiée Shaka, PHP, ASP.NET Core, automatique DRM et un diagnostic sûr.

Voir le MarkdownExemples en ligneMise à jour 2026-09-05
Votre moteur décide de l'accès; DRM-X applique la politique signée. Les licences de médias chiffrés et DRM suivent des chemins de livraison séparés.
Votre moteur décide de l'accès; DRM-X applique la politique signée. Les licences de médias chiffrés et DRM suivent des chemins de livraison séparés.

Utiliser l'échantillon complet en premier#

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.

Limite minimale du client#

<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>
Le navigateur ne choisit pas la sécuritéVotre backend cartographie l'utilisateur authentifié et la référence de catalogue de confiance à la DRM-X Content ID et le modèle de politique.

Comportement automatique DRM #

  • Windows Microsoft Edge préfère PlayReady. Si le chemin qualifié PlayReady échoue avant la lecture, le mode Auto peut utiliser un retour limité Widevine.
  • Chrome et pris en charge Android navigateurs utilisent Widevine.
  • Safari sur l'iPhone et l'iPad utilise native HLS FairPlay. Sur prise en charge macOS Safari, qualifié Shaka MSE FairPlay est préféré lorsque disponible, avec native HLS retour.
  • Les navigateurs Huawei compatibles utilisent le chemin WisePlay qualifié et un comportement de qualité automatique conservateur.

Liste de contrôle de la 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.
  • Conservez les journaux détaillés expurgés opt-in et limited time; n'enregistrez pas les octets de licence ou d'autorisation.
  • Test physique Windows Edge, macOS Safari, iPhone/iPad Safari, Android et toutes les classes d'appareils que vous annoncez.
Web SDK

HTML5 lecture avec un 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>

Le navigateur n'appelle que le paramètre d'origine identique authentifié. Auto choisit le manifeste approprié pris en charge DRM et enregistré DASH/HLS.

Utiliser Shaka, Video.js, Bitmovin, ou un autre EME lecteur

Request Contract v1 from your backend, load manifestUrl, and add Authorization: Bearer {drmLicenseToken} only to DRM license and FairPlay certificat requests. Préservez exactement le défi opaque et les octets de réponse à la licence. Utilisez l'itinéraire de sortie retourné lorsque la lecture se termine.

Universal Player listes de lecture et contrôles partagés #

Les éditions Web et Android utilisent un panneau de paramètres sombres cohérent avec des commandes bleues compactes. Les listes de lecture prennent en charge l'avance automatique suivante/précédente, shuffle, répétez un/tout et cancellable. Chaque élément utilise une nouvelle demande de lecture autorisée.

La vitesse de lecture, la minuterie de sommeil, les légendes, la qualité autorisée, les langues audio, les signets de session et la boucle A–B sont disponibles. Web ajoute des raccourcis clavier, le CV local visionné en option, la recherche de transcription et le navigateur pris en charge PiP. Android conserve natif Widevine téléchargements hors ligne et le renouvellement.

Paramètres du logo professionnel et d'entreprise

Cliquez-droit sur le Web lecteur, ou ouvrez Paramètres → À propos de lecteur sur chaque édition, pour voir le logo autorisé, les informations sur le produit et la version lecteur. Le contrôle des paramètres ronds et le style de menu sombre sont partagés avec Android. Les paramètres Web en plein écran contiennent également un sélecteur de liste de lecture.

Définissez playerBranding dans votre moteur de confiance vers {"mode":"hidden"} ou {"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"}. La plate-forme vérifie l'abonnement professionnel actif ou Enterprise. D'autres plans utilisent {"mode":"default"}; des requêtes non autorisées personnalisées/cachées retournent 403. Ceci est séparé des filigranes de sécurité.

Les PHP le téléchargement inclut la configuration de playlist modifiable et de marque. Android client ZIP inclut l'exemple de callback de liste de lecture. Gardez l'autorisation de liste de lecture dans votre backend; ne jamais intégrer API client identifiants dans les deux lecteur.