Reprodução Web e HTML5

Use primeiro o exemplo completo#

O pacote Web contém o mais recente JavaScript local Universal Player e declarações, qualificados Shaka, uma aplicação PHP executável, um exemplo ASP.NET Core executável, e uma integração README. As páginas de produção podem carregar Shaka e Universal Player do DRM-X CDN; o pacote mantém os arquivos locais atuais para revisão, desenvolvimento e retorno controlado.

1. Configure Site ID, Site Key e Access Key no servidor.
2. Defina o arquivo protegido Published de confiança Content ID e a política nomeada.
3. Substitua o login de exemplo e a decisão de direito por sua lógica de negócio.

Responsabilidades mínimas do cliente#

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

Antes do componente, carregue o runtime Shaka validado e o script Universal Player atual do kit completo. Ao pressionar Play, ele chama seu endpoint autenticado. Este verifica sessão e permissão, escolhe conteúdo e política confiáveis, cria Contract v1 e devolve com Cache-Control: no-store.

Comportamento automático DRM#

• Windows Microsoft Edge prefere PlayReady. Se a rota validada falhar antes de reproduzir, Auto pode recorrer de forma limitada a Widevine.
• Chrome e os navegadores Android suportados usam Widevine.
• Safari no iPhone e iPad usa HLS FairPlay nativo. No macOS Safari compatível, Shaka MSE FairPlay validado tem preferência quando disponível, com alternativa HLS nativa.
• Navegadores compatíveis da Huawei usam o caminho qualificado WisePlay e o comportamento de qualidade automático conservador.

Lista de verificação para produção#

• Sirva tudo sobre HTTPS e mantenha Access Keys em segredos de servidor.
• Devolver as respostas de sessão de reprodução com Cache-Control: no-store.
• Não persista em URLs manifestos, tokens ou respostas de sessão em localStorage.
• Ative os logs detalhados sem dados sensíveis apenas por escolha explícita e por tempo limitado. Não grave bytes de licença ou dados de autorização.
• Teste físico Windows Edge, macOS Safari, iPhone/iPad Safari, Android, e todas as classes de dispositivos que você anuncia.

Limite opcional de 1080p somente para celulares#

Web SDK 1.2.0-beta.4 adiciona limite opcional para celulares. Deixe sem configurar para manter UHD. Configure antes do primeiro 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
});

Aplica-se a aparelhos detectados como celulares. Tablets, computadores e TVs mantêm o limite anterior. A detecção usa dicas do navegador e user-agent; largura da tela não define resolução. Se a aplicação conhece a classe, use device-class="phone" ou deviceClass: "phone". Outros valores: auto, tablet, desktop, tv. A classificação do navegador é apenas indicativa.

SDK envia o menor platformCapabilities.maximumHeight antes da autorização. O endpoint deve repassá-lo ou reduzi-lo. O limite devolvido não pode superar o pedido. Auto e escolha manual respeitam a faixa após rotação, tela cheia, novas tentativas e mudança de lista. Política DRM assinada e decodificador podem reduzir mais. Valores são inteiros de 144 a 4320; ausência ou null desativa o limite opcional.

Safari requer HLS filtrado

O backend deve retornar nativeHlsQuality.autoUrl vinculado à sessão e URL de qualidade apenas com versões válidas, preservando grupos de áudio e legendas. O PHP completo atual implementa isso. Reduzir só o número com HLS principal irrestrito não economiza banda. SDK rejeita limite elevado ou resposta FairPlay limitada sem o descritor exigido. Outros backends precisam do mesmo contrato antes de ativar.

Opções SDK nativas

Apple Universal Player 1.0.0-beta.1 aceita mobileMaximumHeight: 1080 somente na classe nativa celular. O endpoint retorna um manifesto principal filtrado, verificado antes da mídia. Android 1.0.0-beta.1 aceita mobileMaximumHeight = 1080 em WidevineCapabilities.playbackCapabilities; use clientPlatform = "android" para celular e explicitamente android-tablet ou android-tv para outras classes. Aplique limite offline equivalente a novos downloads. Downloads existentes são mantidos.

Verificar sua integração

1. Empacote origem com 1080p, versões inferiores e UHD. Confirme reprodução sem limite configurado.
2. Ative 1080 no celular. Confira limite autorizado, manifesto filtrado, menu Auto/manual e dimensões decodificadas. Nenhuma opção permitida deve superar 1080p.
3. Teste saltos, qualidade, áudio, legendas, anúncios e avanço da lista. Pare e confirme a liberação da sessão.
4. Use a mesma opção no computador e tablet: a restrição só para celulares não deve reduzir o limite deles. Restrições atuais de política ou aparelho continuam válidas.

O limite de resolução não define bitrate nem garante economia fixa. Aplique regras resistentes a pedidos alterados no backend confiável e na política DRM correspondente. Dicas do cliente não são prova. Sem versões válidas, deve ocorrer erro; não volte silenciosamente a UHD.

Controles de tela cheia consistentes no iPhone Safari#

Web SDK 1.2.0-beta.4 mantém os controles Web Player em tela cheia, inclusive na página PHP de anúncios. No iPhone usa tela cheia do elemento quando disponível, ou amplia o reprodutor na página. As barras podem permanecer. Não muda para o reprodutor de vídeo próprio do iPhone. Todas as plataformas usam o mesmo menu para qualidade, áudio e legendas.

Áudio e legendas refletem as faixas atuais e atualizam após HLS nativo aplicar a mudança. Desligar e ligar CC preserva o último idioma. Anúncios têm controles separados; os controles normais retornam com o conteúdo.

Testar qualidade, idiomas e anúncios#

1. Inicie com toque ou clique real. As regras do navegador para reprodução automática e som continuam válidas.
2. Abra Configurações e confira Qualidade, Áudio e Legendas. Auto usa versões permitidas; a escolha manual não eleva o limite autorizado.
3. Altere o idioma de áudio, selecione um idioma de legendas, depois desligue o CC e ligue. Confirme que os rótulos refletem as faixas ativas e que a preferência por legendas é mantida.
4. Entre em tela cheia no iPhone Safari e Edge. Web Player mantém controles compartilhados; iPhone pode ampliar na página com barras visíveis.
5. Se usar anúncios, teste as pausas antes, durante e após o conteúdo, incluindo mudança de qualidade. A página PHP de anúncios fornece um laboratório. Anúncios integrados e Google IMA são modos diferentes; verifique a carga do serviço escolhido em cada navegador compatível.

Para banda, siga Limite opcional de 1080p somente para celulares. Deixe sem configurar para conservar UHD. Não define bitrate fixo nem garante economia percentual.