DRM-X 6.0 paloma y rama de olivo logotipoDRM-X 6.0Documentación
◎ Español

Reproducción web y HTML5

Integrar DRM-X 6.0 reproducción web protegida con la Universal Player, cualificado Shaka, PHP, ASP.NET Core, selección automática DRM, y diagnóstico seguro.

Ver MarkdownEjemplos en funcionamientoActualizado 2026-09-05
Su backend decide el acceso; DRM-X aplica la política firmada. Los medios cifrados y las licencias DRM siguen caminos de entrega separados.
Su backend decide el acceso; DRM-X aplica la política firmada. Los medios cifrados y las licencias DRM siguen caminos de entrega separados.

Use la muestra completa primero #

El paquete Web contiene el último local Universal Player JavaScript y declaraciones, cualificado Shaka, una aplicación ejecutable PHP, un ejemplo ejecutable ASP.NET Core, y una integración README. Las páginas de producción pueden cargar Shaka y Universal Player del DRM-X CDN; el paquete conserva los archivos locales actuales para revisión, desarrollo y retroceso controlado.

  1. Configura Site ID, Site Key y Access Key en el servidor.
  2. Establecer el archivo protegido publicado de confianza Content ID y la política de nombre.
  3. Sustitúyase la decisión de inicio de sesión y derecho de muestra con su lógica de negocio.

Límite mínimo del cliente #

<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>
El navegador no elige seguridadSu backend mapea el usuario autenticado y el catálogo de confianza referencia a la DRM-X Content ID y plantilla de política.

Automático DRM comportamiento#

  • Windows Microsoft Edge prefiere PlayReady. Si el camino cualificado PlayReady falla antes de la reproducción, el modo Auto puede utilizar la caída atada Widevine.
  • Chrome y compatibles Android los navegadores usan Widevine.
  • Safari en iPhone y iPad utiliza nativo HLS FairPlay. En soporte macOS Safari, cualificado Shaka MSE FairPlay es preferido cuando está disponible, con el retroceso nativo HLS.
  • Los navegadores compatibles de Huawei utilizan la ruta WisePlay calificada y el comportamiento conservador de calidad automática.

Lista de verificación de producción #

  • Servir todo sobre HTTPS y mantener Access Keys en secretos de servidor.
  • Regrese las respuestas de reproducción con Cache-Control: no-store.
  • No persistir manifiesta URLs, fichas o respuestas de sesión en localStorage.
  • Mantenga registros redactados detallados opt-in y con plazos limitados; no registre los bytes de licencia o autorización.
  • Prueba física Windows Edge, macOS Safari, iPhone/iPad Safari, Android, y cada clase de dispositivo que anuncias.
Web SDK

HTML5 reproducción con 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>

El navegador sólo llama a su autentificado punto final del mismo orígen. Auto elige el compatible DRM y registrado DASH/HLS manifiesto. Bitrate, audio idioma/canal, subtítulos, Picture-in-Picture, pantalla completa y velocidad de reproducción se construyen en.

Usando Shaka, Video.js, Bitmovin, u otro EME reproductor

Solicitar Contrato v1 de su backend, cargar manifestUrl, y añadir Authorization: Bearer {drmLicenseToken} sólo a DRM licencia y FairPlay solicitudes de certificados. Preserve el desafío opaco y los bytes de respuesta de licencia exactamente. Utilice la ruta de lanzamiento devuelto cuando la reproducción termina.

Universal Player listas de reproducción y controles compartidos#

Las ediciones Web y Android utilizan un panel de configuración oscura consistente con controles azules compactos. Las listas de reproducción soportan el siguiente/previous, shuffle, repetir uno/todo y el avance automático cancelable. Cada artículo utiliza una nueva solicitud de reproducción autorizada. Los metadatos de capítulo y transcripción provienen de su catálogo de contenido.

Velocidad de reproducción, temporizador de sueño, subtítulos, calidad permitida, idiomas de audio, marcadores de sesión y bucle A–B están disponibles. Web añade atajos de teclado, curriculum vitae opcional, búsqueda de transcripciones y navegador soportado PiP. Android conserva nativo Widevine descargas y renovación sin conexión.

Ajustes de los logotipos profesionales y empresariales

Marcar se mantiene fuera de la superficie de vídeo. Haga clic derecho en la Web reproductor, o abra Ajustes → Acerca reproductor en cualquiera de las ediciones, para ver el logotipo autorizado, información de producto y reproductor versión. El control de configuración redonda y el estilo de menú oscuro se comparten con Android. La configuración de la Web de pantalla completa también contiene un selector de lista.

Set playerBranding en su backend de confianza a {"mode":"hidden"} o {"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"}. La plataforma comprueba la suscripción activa del Profesional o de la Empresa. Otros planes usan {"mode":"default"}; solicitudes personalizadas no autorizadas/hidden devuelven 403. Esto está separado de las marcas de agua de seguridad.

El PHP descarga incluye la lista de reproducción editable y configuración de marca. Android cliente ZIP incluye el ejemplo de la lista de reproducción. Mantenga la autorización de lista de reproducción en su backend; nunca incrustar API cliente credenciales en ambos reproductor.