Actualizaciones multimedia en Chrome 75

François Beaufort
François Beaufort

Las capacidades multimedia de Chrome se actualizaron en la versión 75. En este artículo, analizaré esas funciones nuevas, que incluyen lo siguiente:

  • Predecir si la reproducción será fluida y eficiente en cuanto a energía para contenido multimedia encriptado
  • Compatibilidad con la sugerencia del atributo playsInline del elemento de video.

Medios encriptados: información de decodificación

A partir de Chrome 66, los desarrolladores web pueden usar Información de decodificación para consultar al navegador las capacidades de decodificación de contenido claro del dispositivo según información como los códecs, el perfil, la resolución, las tasas de bits, etc. Indica si la reproducción será fluida (oportuna) y eficiencia energética según las estadísticas de reproducción anteriores que registró el navegador.

Desde entonces, la especificación de la API de Media Capabilities, que define la información de decodificación, se actualizó para controlar las configuraciones de contenido multimedia encriptado también para que los sitios web que usan medios encriptados (EME) puedan seleccionar las transmisiones de contenido multimedia óptimas.

En resumen, así es como funciona la decodificación de información para EME. Prueba el ejemplo oficial.

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.
});

Las reproducciones de EME tienen rutas de acceso de código de renderización y decodificación especializadas, lo que significa una compatibilidad y rendimiento de códecs diferentes en comparación con las reproducciones claras. Por lo tanto, se debe establecer una nueva clave keySystemConfiguration en el objeto de configuración multimedia que se pasa a navigator.mediaCapabilities.decodingInfo(). El valor de esta clave es un diccionario que contiene varios tipos de EME conocidos. Esto replica las entradas proporcionadas al requestMediaKeySystemAccess() de EME con una diferencia principal: las secuencias de entradas proporcionadas a requestMediaKeySystemAccess() se compactan en un solo valor en cualquier lugar en el que la intención de la secuencia sea que requestMediaKeySystemAccess() elija un subconjunto compatible.

La información de decodificación describe la calidad (suavidad y eficiencia energética) de la compatibilidad con un solo par de transmisiones de audio y video sin tomar una decisión para el emisor. Los emisores deben seguir ordenando las configuraciones de contenido multimedia como lo hacen con requestMediaKeySystemAccess(). Solo ahora ellos mismos revisan la lista.

navigator.mediaCapabilities.decodingInfo() muestra una promesa que se resuelve de forma asíncrona con un objeto que contiene tres booleanos: supported, smooth y powerEfficient. Sin embargo, cuando se configura una clave keySystemConfiguration y supported es true, también se muestra otro objeto MediaKeySystemAccess llamado keySystemAccess. Se puede usar para solicitar algunas claves multimedia y configurar la reproducción de contenido multimedia encriptado. Por ejemplo:

// 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.
}

Ten en cuenta que la información para decodificar contenido multimedia encriptado requiere HTTPS.

Además, ten en cuenta que puede activar un mensaje del usuario en Android y ChromeOS de la misma manera que requestMediaKeySystemAccess(). Sin embargo, no mostrará más mensajes que requestMediaKeySystemAccess(), a pesar de que se requieran más llamadas para configurar la reproducción de contenido multimedia encriptado.

ALT_TEXT_HERE
Mensaje de contenido protegido

Intent de experimentar | Seguimiento de Chromestatus | Error de Chromium

HTMLVideoElement.playsInline

Chrome ahora admite el atributo booleano playsInline. Si está presente, sugiere al navegador que el video se debe mostrar "intercalado" en el documento de forma predeterminada, restringido al área de reproducción del elemento.

De manera similar a Safari, donde los elementos de video de iPhone no ingresan automáticamente al modo de pantalla completa cuando comienza la reproducción, esta sugerencia permite que algunas incorporaciones tengan una experiencia de reproducción de video en pantalla completa automática. Los desarrolladores web pueden usarla para inhabilitar esta experiencia si es necesario.

<video playsinline></video>

Como Chrome en Android y computadoras de escritorio no implementa la pantalla completa automática, no se usa la sugerencia de atributo del elemento de video playsInline.

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium