Atualizações de mídia no Chrome 75

François Beaufort
François Beaufort

Os recursos de mídia do Chrome foram atualizados na versão 75. Neste artigo, falarei sobre os novos recursos, que incluem:

  • Prever se a reprodução será suave e eficiente em termos de energia para mídia criptografada.
  • Suporte à dica do atributo playsInline do elemento de vídeo.

Mídia criptografada: informações de decodificação

Desde o Chrome 66, os desenvolvedores da Web podem usar as Informações de decodificação para consultar o navegador sobre as capacidades de decodificação de conteúdo claras do dispositivo com base em informações como codecs, perfil, resolução, taxas de bits etc. Ela indica se a reprodução será suave (oportuna) e com base em estatísticas de reprodução anteriores registradas pelo navegador.

A especificação da API Media Capabilities, que define informações de decodificação, foi atualizada para lidar com configurações de mídia criptografada também para que os sites que usam mídia criptografada (EME, na sigla em inglês) possam selecionar os fluxos de mídia ideais.

Em poucas palavras, veja como funciona a decodificação de informações para o EME. Teste o exemplo oficial (link em inglês).

const encryptedMediaConfig = {
  type: 'media-source', // or 'file'
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  },
  keySystemConfiguration: {
    keySystem: 'com.widevine.alpha',
    videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
  }
};

navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
  if (!result.supported) {
    console.log('Argh! This encrypted media configuration is not supported.');
    return;
  }

  if (!result.keySystemAccess) {
    console.log('Argh! Encrypted media support is not available.')
    return;
  }

  console.log('This encrypted media configuration is supported.');
  console.log('Playback should be' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');

  // TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});

As reproduções EME têm caminhos de código especializados para decodificação e renderização, o que significa diferentes suporte para codec e desempenho em comparação com reproduções claras. Portanto, uma nova chave keySystemConfiguration precisa ser definida no objeto de configuração de mídia transmitido para navigator.mediaCapabilities.decodingInfo(). O valor dessa chave é um dicionário que contém vários tipos de EME conhecidos. Isso replica as entradas fornecidas ao requestMediaKeySystemAccess() do EME com uma grande diferença: as sequências de entradas fornecidas para requestMediaKeySystemAccess() são niveladas para um único valor sempre que a intent da sequência for fazer com que requestMediaKeySystemAccess() escolha um subconjunto compatível.

A decodificação de informações descreve a qualidade (suavidade e eficiência de energia) do suporte para um único par de streams de áudio e vídeo sem tomar uma decisão para o autor da chamada. Os autores da chamada ainda precisam ordenar as configurações de mídia da mesma forma que fazem com requestMediaKeySystemAccess(). Só agora eles percorrem a lista sozinhos.

navigator.mediaCapabilities.decodingInfo() retorna uma promessa que é resolvida de forma assíncrona com um objeto contendo três booleanos: supported, smooth e powerEfficient. No entanto, quando uma chave keySystemConfiguration é definida e supported é true, outro objeto MediaKeySystemAccess chamado keySystemAccess também é retornado. Ele pode ser usado para solicitar algumas chaves de mídia e configurar a reprodução de mídia criptografada. Veja um exemplo:

// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
  navigator.mediaCapabilities.decodingInfo(mediaConfig)
);

// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
  if (result.supported && result.smooth) {
    bestConfig = result;
    break;
  }
}

if (bestConfig) {
  const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
  // TODO: rest of EME path as-is
} else {
  // Argh! No smooth configs found.
  // TODO: Maybe choose the lowest resolution and framerate available.
}

A decodificação de informações para mídia criptografada exige HTTPS.

Além disso, esteja ciente de que isso pode acionar uma solicitação do usuário no Android e no ChromeOS da mesma forma que em requestMediaKeySystemAccess(). No entanto, ele não vai mostrar mais solicitações do que requestMediaKeySystemAccess(), apesar de exigir mais chamadas para configurar a reprodução de mídia criptografada.

ALT_TEXT_HERE
Comando de conteúdo protegido

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

HTMLVideoElement.playsInline

O Chrome agora oferece suporte ao atributo booleano playsInline. Se presente, ela indica ao navegador que o vídeo precisa ser exibido "in-line" no documento por padrão, limitado à área de reprodução do elemento.

Da mesma forma que o Safari, em que os elementos de vídeo no iPhone não entram automaticamente no modo de tela cheia quando a reprodução começa, essa dica permite que alguns incorporados tenham uma experiência de reprodução de vídeo em tela cheia automaticamente. Os desenvolvedores da Web podem usá-lo para desativar essa experiência, se necessário.

<video playsinline></video>

Como o Chrome no Android e no computador não implementa a tela cheia automática, a dica do atributo do elemento de vídeo playsInline não é usada.

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