Atualizações de mídia no Chrome 73

François Beaufort
François Beaufort
GitHub

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

Suporte a chaves de mídia de hardware

Atualmente, muitos teclados têm teclas para controlar funções básicas de reprodução de mídia, como reproduzir/pausar, faixa anterior e próxima faixa. Os fones de ouvido também as têm. Até agora, usuários de computador 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 estiver 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 a seleção de áudio agora pedirão ao Chrome para pausar e retomar o áudio para criar uma experiência de mídia integrada entre sites no Chrome, nos apps e nos apps Android. No momento, isso tem suporte apenas em dispositivos ChromeOS com o Android P.

Em resumo, é recomendável 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 no computador (antes, ela só era compatível com dispositivos móveis), os desenvolvedores da Web podem processar eventos relacionados a mídia, como mudanças de faixa acionadas por chaves 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 tocar e pausar são gerenciadas automaticamente pelo Chrome. No entanto, se o comportamento padrão não for adequado para você, ainda será possível definir alguns gerenciadores 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 chaves de mídia de hardware está disponível no ChromeOS, macOS e Windows. o Linux virá mais tarde.

Confira nossa documentação para desenvolvedores e teste os exemplos oficiais de sessão de mídia.

Chromestatus Tracker | Bug do Chromium

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

Graças à API HDCP Policy Check, os desenvolvedores da Web agora podem consultar se uma política específica, por exemplo, o requisito de HDCP, pode ser aplicada antes da solicitação de licenças do Widevine e do carregamento de 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 reais podem não estar disponíveis em determinadas plataformas. Por exemplo, a promessa de verificação de política HDCP será rejeitada com NotSupportedError no Android e no Android WebView.

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

Intent de envio | Rastreador de status do Chrome | Bug do Chromium

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

Algumas páginas podem inserir e sair automaticamente do modo Picture-in-picture para um elemento de vídeo. Por exemplo, apps da Web de videoconferência se beneficiariam de alguns comportamentos automáticos do modo picture-in-picture quando o usuário alterna entre o app da Web e outros aplicativos ou guias. Isso não é possível com o requisito de gesto do usuário. Agora vem o picture-in-picture automático.

Para oferecer suporte a essa alternância de guia e de app, um novo atributo autopictureinpicture é adicionado ao elemento <video>.

<video autopictureinpicture></video>

Confira 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 é automaticamente removido.

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

Confira a spec para mais detalhes e tente usar o exemplo oficial de PWA (em inglês).

Intenção de fazer um experimento | Chromestatus Tracker | Bug do Chromium

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

O modelo de publicidade em vídeo normalmente consiste em anúncios precedentes. Os provedores de conteúdo geralmente permitem 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 em picture-in-picture não podem fazer isso hoje.

Com a API Media Session agora disponível em computadores (antes, ela tinha suporte apenas em dispositivos móveis), uma nova ação de sessão de mídia skipad pode ser usada para oferecer essa opção em 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á-lo, transmita 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 da opção "Pular anúncio" e nos conte como esse recurso pode ser melhorado.

Intenção de fazer um experimento | Chromestatus Tracker | Bug do Chromium

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

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

Bug do Chromium