Neste artigo, discutiremos os novos recursos de mídia do Chrome 73, que incluem:
- As teclas de mídia de hardware agora têm suporte para controlar a reprodução de mídia no computador.
- Os desenvolvedores da Web podem consultar se uma determinada política HDCP pode ser aplicada.
- Os recursos Picture-in-picture automático em PWAs para computadores e "Skip Ad" em picture-in-picture estão chegando aos testes de origem.
- Os PWAs para computadores têm reprodução automática com som.
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.
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.
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.