# Reprodução Web e HTML5

Integrar DRM-X 6.0 reprodução Web protegida com o Universal Player, qualificado Shaka, PHP, ASP.NET Core, automático DRM seleção, e diagnósticos seguros.

O vídeo criptografado e as licenças DRM seguem caminhos diferentes

A CDN entrega o vídeo criptografado. Seu backend verifica o acesso, e o serviço de licenças DRM autoriza a descriptografia em um dispositivo compatível.

- 01**Armazenamento / CDN**

Entrega a mídia criptografada ao player.

- 02**Seu backend**

Verifica se o espectador pode assistir e solicita a autorização de reprodução ao DRM-X.

- 03**DRM-X**

Valida a autorização de reprodução e processa a solicitação de licença DRM.

- 04**Player + dispositivo**

Usa o sistema DRM do dispositivo para obter uma licença e reproduzir a mídia criptografada.

Sua infraestrutura decide o acesso; DRM-X aplica a política assinada. Mídia criptografada e licenças DRM seguem caminhos de entrega separados.

## Usar a amostra completa primeiro[#](#use-the-complete-sample-first)

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.

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



## Limite mínimo do 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>
```

**O navegador não escolhe a segurança**Sua infra-estrutura mapeia o usuário autenticado e referência de catálogo confiável para o modelo DRM-X Content ID e política.



## Comportamento automático DRM [# ](#automatic-drm-behavior)

- Windows A Microsoft Edge prefere PlayReady. Se o caminho qualificado PlayReady falhar antes da reprodução, o modo Auto pode usar o retorno limitado Widevine.
- Chrome e os navegadores Android suportados usam Widevine.
- Safari no iPhone e iPad usa nativo HLS FairPlay. No suportado macOS Safari, qualificado Shaka MSE FairPlay é preferido quando disponível, com nativo HLS recuo.
- Navegadores compatíveis da Huawei usam o caminho qualificado WisePlay e o comportamento de qualidade automático conservador.



## Lista de verificação da produção[#](#production-checklist)

- 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`.
- Mantenha os logs redatados detalhados opt-in e o time-bounded; não grave bytes de licença ou autorização.
- Teste físico Windows Edge, macOS Safari, iPhone/iPad Safari, Android, e todas as classes de dispositivos que você anuncia.



Web SDK 

## HTML5 reprodução com um 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>
```



O navegador chama apenas o seu endpoint autenticado da mesma origem. O Auto escolhe o manifesto apropriado suportado DRM e registado DASH/HLS. A taxa de bits, o idioma/canal de áudio, as legendas, o Picture- in- Picture, o ecrã completo e a velocidade de reprodução são incorporados.



### Usando Shaka, Video.js, Bitmovin, ou outro EME reprodutor



Solicitar Contrato v1 da sua infra- estrutura, carregar `manifestUrl` e adicionar `Authorization: Bearer {drmLicenseToken}` apenas à licença DRM e FairPlay pedidos de certificado. Preservar os bytes de resposta de desafio e licença opacos exatamente. Use a rota de lançamento retornada quando a reprodução terminar.





## Universal Player listas de reprodução e controles compartilhados [#](#universal-player-playlists-and-shared-controls)



As edições Web e Android usam um painel de configurações escuras consistente com controles azuis compactos. As listas de reprodução suportam próximo/anterior, embaralhe, repita um/todos e cancelável avanço automático. Cada item usa uma nova solicitação de reprodução autorizada. Os metadados de capítulo e transcrição vêm do seu catálogo de conteúdo.



Velocidade de reprodução, temporizador de sono, legendas, qualidade permitida, idiomas de áudio, marcadores de sessão e looping A–B estão disponíveis. Web adiciona atalhos de teclado, currículo local visualizador opcional, pesquisa de transcrição e navegador compatível PiP. Android mantém downloads e renovação nativas Widevine offline. O progresso de carcaça e dispositivo cruzado requer integrações de aplicativos separadas.



### Configurações de logotipo profissional e empresarial



A marcação fica fora da superfície do vídeo. Clique com o botão direito na Web reprodutor ou abra Configurações → Sobre reprodutor em qualquer edição, para ver o logotipo autorizado, as informações do produto e a versão reprodutor. O controle de configurações redondas e o estilo de menu escuro são compartilhados com Android. As configurações da Web em tela cheia também contêm um seletor de lista de reprodução.



Configure `playerBranding` na sua infra- estrutura de confiança para `{"mode":"hidden"}` ou `{"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"}`. A plataforma verifica a subscrição activa do Professional ou Enterprise. Outros planos usam `{"mode":"default"}`; requisições personalizadas/ ocultas não autorizadas devolvem 403. Isto é separado das marcas de água de segurança.



O download PHP inclui a configuração da lista de reprodução editável e da marca. O cliente Android ZIP inclui o exemplo de chamada da lista de reprodução. Mantenha a autorização da lista de reprodução na sua infra- estrutura; nunca incorpore API cliente credenciais em qualquer um dos reprodutor.

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