Le funzionalità multimediali di Chrome sono state aggiornate nella versione 75. In questo articolo parlerò di queste nuove funzionalità, tra cui:
- Previsione del livello di fluidità della riproduzione e dell'efficienza energetica per i contenuti multimediali criptati.
- Supporto del suggerimento per l'attributo
playsInlinedell'elemento video.
Contenuti multimediali criptati: informazioni di decodifica
A partire da Chrome 66, gli sviluppatori web possono utilizzare le informazioni di decodifica per interrogare il browser sulle chiare capacità di decodifica dei contenuti del dispositivo in base a informazioni quali codec, profilo, risoluzione, velocità in bit e così via. Indica se la riproduzione sarà fluida (tempestiva) ed efficiente dal punto di vista energetico in base alle precedenti statistiche di riproduzione registrate dal browser.
Da allora, la specifica dell'API Media Capabilities che definisce le informazioni di decodifica, è stata aggiornata per gestire anche le configurazioni di contenuti multimediali criptati, in modo che i siti web che utilizzano contenuti multimediali criptati (EME) possano selezionare gli stream multimediali ottimali.
In breve, ecco come funziona la decodifica delle informazioni per EME. Prova il campione ufficiale.
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.
});
Le riproduzioni EME hanno percorsi di decodifica e rendering specializzati, il che significa che il supporto e le prestazioni dei codec sono diversi rispetto alle riproduzioni nitide. Di conseguenza,
è necessario impostare una nuova chiave keySystemConfiguration nell'oggetto di configurazione dei contenuti multimediali
passato a navigator.mediaCapabilities.decodingInfo(). Il valore di questa chiave è un dizionario che contiene una serie di tipi di EME noti. Questo replica gli input forniti a requestMediaKeySystemAccess() di EME con una grande differenza: le sequenze di input forniti a requestMediaKeySystemAccess() vengono suddivise in un singolo valore ogni volta che l'intento della sequenza era far scegliere a requestMediaKeySystemAccess() un sottoinsieme supportato.
Le informazioni di decodifica descrive la qualità (uniformità ed efficienza energetica) del supporto per una singola coppia di stream audio e video senza prendere una decisione per il chiamante. I chiamanti dovrebbero comunque ordinare le configurazioni dei contenuti multimediali come fanno con
requestMediaKeySystemAccess(). ma ora completano la lista.
navigator.mediaCapabilities.decodingInfo() restituisce una promessa che si risolve
in modo asincrono con un oggetto contenente tre booleani: supported, smooth
e powerEfficient. Tuttavia, quando una chiave keySystemConfiguration è impostata e supported è true, viene restituito anche un altro oggetto MediaKeySystemAccess denominato keySystemAccess. Può essere usato per richiedere chiavi
multimediali e configurare la riproduzione di contenuti multimediali criptati. Esempio:
// 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.
}
Tieni presente che la decodifica delle informazioni per i contenuti multimediali criptati richiede il protocollo HTTPS.
Inoltre, tieni presente che potrebbe attivare una richiesta dell'utente su Android e ChromeOS allo stesso modo di requestMediaKeySystemAccess(). Tuttavia, non mostrerà più richieste di requestMediaKeySystemAccess(), nonostante siano richieste più chiamate per configurare la riproduzione di contenuti multimediali criptati.
Intenzione di esperimento | Tracker dello stato di Chrome | Bug di Chromium
HTMLVideoElement.playsInline
Chrome ora supporta l'attributo booleano playsInline. Se presente, suggerisce al browser che il video deve essere visualizzato "in linea" nel documento per impostazione predefinita, vincolato all'area di riproduzione dell'elemento.
Analogamente a Safari, dove gli elementi video su iPhone non entrano automaticamente in modalità a schermo intero all'avvio della riproduzione, questo suggerimento consente ad alcuni incorporatori di avere un'esperienza di riproduzione dei video a schermo intero automatico. Gli sviluppatori web possono usarla per disattivare questa esperienza, se necessario.
<video playsinline></video>
Poiché Chrome su Android e desktop non implementa la modalità a schermo intero automatico, il suggerimento relativo all'attributo dell'elemento video playsInline non viene utilizzato.
Intenzione di spedizione | Tracker dello stato di Chrome | Bug di Chromium