Le funzionalità multimediali di Chrome sono state aggiornate nella versione 75. In questo articolo, discuteremo queste nuove funzionalità, tra cui:
- Prevedere se la riproduzione sarà fluida ed efficiente per i contenuti multimediali criptati.
- Supporto dell'indicazione dell'attributo
playsInlinedell'elemento video.
Contenuti multimediali criptati: informazioni sul decodifica
Da Chrome 66, gli sviluppatori web possono utilizzare Informazioni decodifica per eseguire query sul browser in merito alle capacità di decodifica dei contenuti chiari del dispositivo in base a informazioni quali codec, profilo, risoluzione, velocità in bit e così via. Indica se la riproduzione sarà fluida (tempestiva) e a basso consumo energetico in base alle statistiche di riproduzione precedenti registrate dal browser.
Da allora, la specifica dell'API Media Capabilities, che definisce le informazioni di decodifica, è stata aggiornata per gestire anche le configurazioni dei 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 funzionano le informazioni di decodifica 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 codice di decodifica e rendering specializzati, il che significa che supportano codec diversi e hanno un rendimento diverso rispetto alle riproduzioni chiare. 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 ben noti. In questo modo vengono replicati gli input forniti a requestMediaKeySystemAccess() di EME con una differenza sostanziale: le sequenze di input fornite a requestMediaKeySystemAccess() vengono appiattite in un unico valore se l'intento della sequenza era che requestMediaKeySystemAccess() scegliesse un sottoinsieme supportato.
La voce Informazioni decodifica descrive la qualità (fluidità ed efficienza energetica) del supporto di una singola coppia di stream audio e video senza prendere una decisione per l'utente che chiama. Gli utenti che effettuano chiamate devono comunque ordinare le configurazioni multimediali come fanno conrequestMediaKeySystemAccess(). Solo che ora eseguono l'elenco autonomamente.
navigator.mediaCapabilities.decodingInfo() restituisce una promessa che si risolve
in modo asincrono con un oggetto contenente tre valori booleani: supported, smooth
e powerEfficient. Tuttavia, quando viene impostata una chiave keySystemConfiguration e supported è true, viene restituito anche un altro oggetto MediaKeySystemAccess denominato keySystemAccess. Può essere utilizzato per richiedere alcune chiavi multimediali
e configurare la riproduzione di contenuti multimediali criptati. Ecco un 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 le informazioni di decodifica per i contenuti multimediali criptati richiedono HTTPS.
Inoltre, tieni presente che potrebbe attivare una richiesta all'utente su Android e ChromeOS come avviene per requestMediaKeySystemAccess(). Tuttavia, non mostrerà più prompt rispetto a requestMediaKeySystemAccess(), nonostante richieda più chiamate per configurare la riproduzione di contenuti multimediali criptati.
Intent to Experiment | Chromestatus Tracker | Bug di Chromium
HTMLVideoElement.playsInline
Chrome ora supporta l'attributo booleano playsInline. Se presente, indica 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 attivano automaticamente la modalità a schermo intero all'inizio della riproduzione, questo suggerimento consente ad alcuni inserzionisti di avere un'esperienza di riproduzione video a schermo intero automatico. Gli sviluppatori web possono utilizzarlo per disattivare questa esperienza, se necessario.
<video playsinline></video>
Poiché Chrome su Android e computer non implementa il passaggio automatico in modalità a schermo intero, il suggerimento per l'attributo elemento videoplaysInline non viene utilizzato.