Atualizações de mídia no Chrome 73

François Beaufort
François Beaufort
GitHub

Neste artigo, vou falar sobre os novos recursos de mídia do Chrome 73, que incluem:

Suporte a teclas de mídia de hardware

Muitos teclados hoje em dia têm teclas para controlar funções básicas de reprodução de mídia, como tocar/pausar, faixa anterior e próxima. Os fones de ouvido também têm. Até agora, os usuários de computadores não podiam usar essas teclas de mídia para controlar a reprodução de áudio e vídeo no Chrome. Isso muda hoje!

Teclas de mídia do teclado
Teclas de mídia do teclado

Se o usuário pressionar a tecla de pausa, o elemento de mídia ativo que está sendo reproduzido no Chrome será pausado e receberá um evento de mídia "pausado". Se a tecla de reprodução for pressionada, o elemento de mídia pausado anteriormente será retomado e receberá um evento de mídia "reproduzir". Ela funciona mesmo se o Chrome estiver em primeiro ou segundo plano.

No ChromeOS, os apps Android que usam o foco de áudio agora vão instruir o Chrome a pausar e continuar o áudio para criar uma experiência de mídia perfeita entre sites no Chrome, apps do Chrome e apps Android. No momento, esse recurso é compatível apenas com dispositivos ChromeOS com o Android P.

Em resumo, é uma boa prática sempre detectar esses eventos de mídia e agir de acordo.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

Mas não é só isso. Com a API Media Session agora disponível em computadores (antes, ela só era compatível com dispositivos móveis), os desenvolvedores da Web podem processar eventos relacionados a mídia, como a mudança de faixa acionada por teclas de mídia. No momento, há suporte para os eventos previoustrack e nexttrack.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

As teclas de reprodução e pausa são processadas automaticamente pelo Chrome. No entanto, se o comportamento padrão não funcionar para você, ainda será possível definir alguns manipuladores de ações para "reproduzir" e "pausar" para evitar isso.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

O suporte a teclas de mídia de hardware está disponível no ChromeOS, macOS e Windows. O Linux será lançado mais tarde.

Confira nossa documentação para desenvolvedores e teste os exemplos oficiais do Media Session.

Rastreador do Chromestatus | Bug do Chromium

Mídia criptografada: verificação de política HDCP

Graças à API HDCP Policy Check, os desenvolvedores Web agora podem consultar se uma política específica, por exemplo, o requisito HDCP, pode ser aplicada antes de solicitar licenças da Widevine e carregar mídia.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

A API está disponível em todas as plataformas. No entanto, as verificações de políticas podem não estar disponíveis em algumas plataformas. Por exemplo, a promessa de verificação de política do HDCP será rejeitada com NotSupportedError no Android e no Android WebView.

Confira nossa documentação anterior para desenvolvedores e teste o exemplo oficial para ver todas as versões de HDCP compatíveis.

Intent to Ship | Rastreador do Chromestatus | Bug do Chromium

Teste de origem do Picture-in-Picture automático para PWAs instalados

Algumas páginas podem entrar e sair automaticamente do modo picture-in-picture para um elemento de vídeo. Por exemplo, os apps da Web de videoconferência se beneficiam de um comportamento automático de picture-in-picture quando o usuário alterna entre o app da Web e outros aplicativos ou guias. Infelizmente, isso não é possível com o requisito de gesto do usuário. Então, o picture-in-picture automático chegou!

Para oferecer suporte à troca de guias e apps, um novo atributo autopictureinpicture foi adicionado ao elemento <video>.

<video autopictureinpicture></video>

Veja como isso funciona:

  • Quando o documento fica oculto, o elemento de vídeo cujo atributo autopictureinpicture foi definido mais recentemente entra automaticamente no modo Picture-in-Picture, se permitido.
  • Quando o documento fica visível, o elemento de vídeo no modo Picture-in-Picture sai automaticamente dele.

Pronto. O recurso picture-in-picture automático se aplica apenas aos Progressive Web Apps que os usuários instalaram no computador.

Confira a especificação para mais detalhes e tente usar o exemplo oficial de PWA.

Intent para testar | Rastreador Chromestatus | Bug do Chromium

Teste de origem para pular anúncio na janela picture-in-picture

O modelo de anúncio em vídeo geralmente consiste em anúncios precedentes. Os provedores de conteúdo geralmente oferecem a opção de pular o anúncio após alguns segundos. Infelizmente, como a janela Picture-in-Picture não é interativa, os usuários que assistem um vídeo nesse modo não podem fazer isso hoje.

Agora que a API Media Session está disponível para computadores (antes, ela tinha suporte apenas para dispositivos móveis), uma nova ação de sessão de mídia skipad pode ser usada para oferecer essa opção no Picture-in-Picture.

Botão &quot;Pular anúncio&quot; na janela picture-in-picture
Botão "Pular anúncio" na janela picture-in-picture

Para fornecer esse recurso, transmita uma função com skipad ao chamar setActionHandler(). Para ocultá-la, passe null. Como você pode ler abaixo, é bem simples.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

Teste o exemplo oficial de "Pular anúncio" e nos informe como esse recurso pode ser melhorado.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

Reprodução automática concedida para PWAs para computador

Agora que os Progressive Web Apps estão disponíveis em todas as plataformas para computador, estamos estendendo a regra que tínhamos para dispositivos móveis para computadores: reprodução automática com som agora é permitida para PWAs instalados. Isso só se aplica a páginas no escopo do manifesto do app da Web.

Bug do Chromium