Atualizações de mídia no Chrome 73

François Beaufort
François Beaufort
GitHub

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

Suporte a teclas de mídia de hardware

Atualmente, muitos teclados possuem teclas para controlar funções básicas de reprodução de mídia, como reproduzir/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 a partir de 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 em reprodução no Chrome ser pausada e receber uma mensagem "pausada" evento de mídia. Se a tecla de reprodução for pressionada, o elemento de mídia previamente pausado será retomado e receberá uma mídia evento. Ela funciona mesmo se o Chrome estiver em primeiro ou segundo plano.

No ChromeOS, os apps Android que usam foco de áudio agora vão pedir para o Chrome pausar e retomar o áudio para criar uma experiência de mídia integrada entre sites no Chrome Apps do Chrome e apps Android. No momento, isso só está disponível no ChromeOS dispositivo com o Android P.

Resumindo, é uma boa prática sempre ouvir esses eventos de mídia e agir de maneira adequada.

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, só havia suporte para dispositivos móveis. Os desenvolvedores Web cuidam de mídias eventos relacionados, como a mudança de faixa acionada por teclas de mídia. A eventos previoustrack e nexttrack são suportados no momento.

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 padrão não funcionar para você, ainda será possível definir alguns manipuladores de ação 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, no macOS e no Windows. Linux virá mais tarde.

Confira nossa documentação para desenvolvedores e confira a documentação de mídia oficial Amostras de sessão.

Rastreador Chromestatus | Bug do Chromium

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

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

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

Intent de envio | Rastreador Chromestatus | Bug do Chromium

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

Em algumas páginas, talvez você queira entrar e sair do modo Picture-in-picture automaticamente elemento de vídeo Por exemplo, apps da Web de videoconferência se beneficiariam de algumas comportamento de picture-in-picture automático quando o usuário alterna entre aplicativo da web e outros aplicativos ou guias. Infelizmente, isso não é possível com a requisito de gesto do usuário. Então, aí vem o picture-in-picture automático!

Para oferecer suporte a essa alternância entre guias e apps, um novo atributo autopictureinpicture é adicionado ao elemento <video>.

<video autopictureinpicture></video>

Veja como isso funciona:

  • Quando o documento fica oculto, o elemento de vídeo em que autopictureinpicture foi definido mais recentemente entrará automaticamente no modo picture-in-picture se permitido.
  • Quando o documento se torna visível, o elemento de vídeo no modo picture-in-picture sair dela automaticamente.

Pronto. Observe que o recurso Picture-in-Picture automático se aplica apenas a Progressive Web Apps que os usuários instalaram no computador.

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

Intenção de fazer experimentos | Rastreador Chromestatus | Bug do Chromium

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

O modelo de publicidade em vídeo geralmente consiste em anúncios precedentes. Conteúdo os provedores 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 ao vídeo O recurso picture-in-picture não pode fazer isso hoje.

Com a API Media Session agora disponível em computadores, ela era compatível com somente para dispositivos móveis antes), uma nova ação de sessão de mídia skipad poderá ser usada para oferecer em Picture-in-picture.

Botão &quot;Pular anúncio&quot; na janela picture-in-picture
"Pular anúncio" botão 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, é bastante 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.
}

Experimente a opção oficial "Pular anúncio" amostra e informe como esse recurso pode pode ser melhorada.

Intenção de fazer experimentos | Rastreador Chromestatus | 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 para computador, estamos estendendo a regra do celular para o computador: reprodução automática com o som agora é permitido para PWAs instalados. Isso só se aplica a páginas em o escopo do manifesto do app da Web.

Bug do Chromium