# 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.

El vídeo cifrado y las licencias DRM se entregan por rutas distintas

La CDN entrega el vídeo cifrado. Su backend comprueba el acceso y el servicio de licencias DRM autoriza el descifrado en un dispositivo compatible.

- 01**Almacenamiento / CDN**

Entrega el contenido cifrado al reproductor.

- 02**Su backend**

Comprueba si el espectador tiene permiso y solicita la autorización de reproducción a DRM-X.

- 03**DRM-X**

Valida la autorización de reproducción y procesa la solicitud de licencia DRM.

- 04**Reproductor + dispositivo**

Utiliza el sistema DRM del dispositivo para obtener una licencia y reproducir el contenido cifrado.

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 [#](#use-the-complete-sample-first)

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.

- Configura Site ID, Site Key y Access Key en el servidor.
- Establecer el archivo protegido publicado de confianza Content ID y la política de nombre.
- 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 [#](#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>
```

**El navegador no elige seguridad**Su 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[#](#automatic-drm-behavior)

- 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 [#](#production-checklist)

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



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[#](#universal-player-playlists-and-shared-controls)



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.

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