Las funciones multimedia de Chrome se actualizaron en la versión 75. En este artículo, analizaré esas nuevas funciones, que incluyen:
- Predecir si la reproducción será fluida y de bajo consumo para contenido multimedia encriptado
- Compatibilidad con la sugerencia de atributo
playsInlinedel elemento de video
Contenido multimedia encriptado: Información de decodificación
A partir de Chrome 66, los desarrolladores web han podido usar Decoding Info para consultar al navegador sobre las capacidades de decodificación de contenido claro del dispositivo en función de 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 será eficiente en función de las estadísticas de reproducción anteriores que registró el navegador.
La especificación de la API de Media Capabilities, que define la información de decodificación, se actualizó para controlar también las configuraciones de contenido multimedia encriptado, de modo que los sitios web que usan contenido multimedia encriptado (EME) puedan seleccionar los flujos de contenido multimedia óptimos.
En pocas palabras, así funciona la información de decodificación para EME. Prueba la muestra 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 código de decodificación y renderización especializadas, lo que significa que tienen una compatibilidad y un rendimiento diferentes con los códecs en comparación con las reproducciones claras. Por lo tanto, se debe establecer una nueva clave keySystemConfiguration en el objeto de configuración de contenido multimedia que se pasa a navigator.mediaCapabilities.decodingInfo(). El valor de esta clave es un diccionario que contiene una serie de tipos de EME conocidos. Esto replica las entradas proporcionadas a requestMediaKeySystemAccess() de EME con una gran diferencia: las secuencias de entradas proporcionadas a requestMediaKeySystemAccess() se aplanan a un solo valor donde el objetivo de la secuencia era que requestMediaKeySystemAccess() elija un subconjunto que admita.
La información de decodificación describe la calidad (fluidez y eficiencia energética) de la compatibilidad con un solo par de transmisiones de audio y video sin tomar una decisión por el llamador. Los emisores deben seguir ordenando configuraciones multimedia como lo hacen con requestMediaKeySystemAccess(). Solo que ahora ellos mismos recorren la lista.
navigator.mediaCapabilities.decodingInfo() muestra una promesa que se resuelve de forma asíncrona con un objeto que contiene tres valores booleanos: supported, smooth y powerEfficient. Sin embargo, cuando se establece una clave keySystemConfiguration y supported es true, también se muestra otro objeto MediaKeySystemAccess llamado keySystemAccess. Se puede usar para solicitar algunas claves de contenido 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 de decodificación para contenido multimedia encriptado requiere HTTPS.
Además, ten en cuenta que esta función puede activar una solicitud del usuario en Android y ChromeOS de la misma manera que requestMediaKeySystemAccess(). Sin embargo, no mostrará más instrucciones que requestMediaKeySystemAccess(), a pesar de que requiere más llamadas para configurar la reproducción de contenido multimedia encriptado.
Intención de experimentar | Seguimiento de Chromestatus | Error de Chromium
HTMLVideoElement.playsInline
Chrome ahora admite el atributo booleano playsInline. Si está presente, le sugiere al navegador que el video debe mostrarse "intercalado" en el documento de forma predeterminada, restringido a la zona de reproducción del elemento.
De manera similar a Safari, en el que los elementos de video en el iPhone no ingresan automáticamente al modo de pantalla completa cuando comienza la reproducción, esta sugerencia permite que algunos incorporadores tengan una experiencia de reproducción de video en pantalla completa automática. Los desarrolladores web pueden usarlo para inhabilitar esta experiencia si es necesario.
<video playsinline></video>
Como Chrome para Android y computadoras de escritorio no implementan la pantalla completa automática, no se usa la sugerencia de atributo del elemento de video playsInline.