Reproducción web y HTML5

Usa primero el ejemplo completo#

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.

Responsabilidades mínimas del cliente#

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

Antes del componente, cargue el runtime Shaka validado y el script Universal Player actual del kit completo. Al pulsar Play, se llama a su endpoint autenticado. Este comprueba la sesión y los permisos, selecciona contenido y política de confianza, crea Contract v1 y lo devuelve con Cache-Control: no-store.

Comportamiento automático DRM#

• Windows Microsoft Edge prefiere PlayReady. Si la ruta validada falla antes de reproducir, Auto puede usar una alternativa Widevine limitada.
• Chrome y compatibles Android los navegadores usan Widevine.
• Safari en iPhone y iPad usa HLS FairPlay nativo. En macOS Safari compatible se prefiere Shaka MSE FairPlay validado cuando está disponible, con alternativa HLS nativa.
• Los navegadores compatibles de Huawei utilizan la ruta WisePlay calificada y el comportamiento conservador de calidad automática.

Lista de comprobación para 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.
• Activa los registros detallados sin información sensible solo de forma voluntaria y durante un tiempo limitado. No registres bytes de licencia ni datos de autorización.
• Prueba física Windows Edge, macOS Safari, iPhone/iPad Safari, Android, y cada clase de dispositivo que anuncias.

Límite opcional de 1080p solo para teléfonos#

Web SDK 1.2.0-beta.4 añade un límite opcional para teléfonos. Déjelo sin configurar para mantener UHD. Configúrelo antes del primer 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
});

Solo se aplica a dispositivos detectados como teléfonos. Tabletas, ordenadores y televisores mantienen su límite anterior. Usa indicaciones del navegador y user-agent; el ancho de pantalla no decide la resolución. Si la aplicación conoce la clase, use device-class="phone" o deviceClass: "phone". Otros valores son auto, tablet, desktop y tv. La clasificación del navegador es orientativa.

SDK envía el platformCapabilities.maximumHeight menor antes de autorizar. Su endpoint debe transmitirlo o reducirlo más. El límite devuelto no puede superar lo solicitado. Auto y la selección manual respetan el rango incluso tras rotación, pantalla completa, reintentos o cambios de lista. La política DRM firmada y el decodificador pueden reducirlo más. Use enteros entre 144 y 4320; no configurarlo o usar null desactiva este límite opcional.

Safari requiere HLS filtrado

El backend debe devolver nativeHlsQuality.autoUrl vinculado a la sesión y URL de calidad con solo versiones de vídeo válidas, conservando audio y subtítulos. El ejemplo PHP completo lo implementa. Bajar solo el número con un manifiesto principal HLS sin restricciones no ahorra ancho de banda. SDK rechaza límites elevados o respuestas FairPlay limitadas sin el descriptor requerido. Otros backends deben implementar el mismo contrato antes de activar la opción.

Opciones de SDK nativos

Apple Universal Player 1.0.0-beta.1 acepta mobileMaximumHeight: 1080 solo para la clase nativa de teléfono. El endpoint debe devolver un manifiesto principal filtrado, comprobado antes de cargar medios. Android 1.0.0-beta.1 acepta mobileMaximumHeight = 1080 en WidevineCapabilities.playbackCapabilities; use clientPlatform = "android" para teléfonos y explícitamente android-tablet o android-tv para otras clases. Aplique el límite offline equivalente a las nuevas descargas. Se conservan las anteriores.

Verifique su integración

1. Empaquete un origen con 1080p, versiones inferiores y UHD. Confirme la reproducción sin configurar el límite.
2. Active 1080 en un teléfono. Compruebe el límite autorizado, el manifiesto filtrado, el menú Auto/manual y las dimensiones decodificadas. Ninguna opción permitida debe superar 1080p.
3. Pruebe saltos, cambios de calidad, audio, subtítulos, anuncios y avance de lista. Detenga la reproducción y confirme que se libera la sesión.
4. Use la misma opción en ordenador y tableta: el límite solo para teléfonos no debe reducir el suyo. Siguen vigentes las restricciones del dispositivo y la política.

El límite de resolución no fija el bitrate ni garantiza un ahorro concreto. Aplique las reglas que deban resistir solicitudes alteradas en su backend de confianza y en la política DRM correspondiente. No trate una indicación del cliente como prueba. Si no hay versiones válidas, debe producirse un error; no vuelva automáticamente a UHD.

Controles uniformes a pantalla completa en iPhone Safari#

Web SDK 1.2.0-beta.4 conserva los controles Web Player a pantalla completa, incluida la página PHP de anuncios. En iPhone usa pantalla completa del elemento cuando se admite o amplía el reproductor dentro de la página. Pueden quedar visibles las barras del navegador. No cambia al reproductor de vídeo propio de iPhone. Use el mismo menú para calidad, idiomas y subtítulos en todas las plataformas.

Las opciones de audio y subtítulos reflejan las pistas actuales y se actualizan cuando HLS nativo aplica el cambio. Apagar y encender CC conserva el último idioma. Durante los anuncios hay controles separados; al reanudarse el contenido vuelven los normales.

Probar calidad, idiomas y anuncios#

1. Inicie la reproducción con un toque o clic real. Siguen aplicándose las reglas de reproducción automática y sonido del navegador.
2. Abra Ajustes y revise Calidad, Audio y Subtítulos. Auto usa las versiones permitidas; la selección manual no puede aumentar el límite autorizado.
3. Cambie el idioma de audio, elija subtítulos y apague y encienda CC. Confirme que las etiquetas reflejan las pistas activas y se conserva el idioma de subtítulos.
4. Entre en pantalla completa en iPhone Safari y Edge. Web Player mantiene los controles compartidos; iPhone puede ampliarse en la página con las barras del navegador visibles.
5. Si usa anuncios, pruebe las pausas antes, durante y después del contenido, también al cambiar de calidad. La página PHP de anuncios ofrece un laboratorio. Los anuncios integrados y Google IMA son modos distintos; compruebe la carga del servicio elegido en cada navegador compatible.

Para el ancho de banda, siga Límite opcional de 1080p solo para teléfonos. Déjelo sin configurar para conservar UHD. No fija un bitrate ni garantiza un porcentaje de ahorro.