De mediamogelijkheden van Chrome zijn bijgewerkt in versie 75. In dit artikel bespreek ik de nieuwe functies, waaronder:
- Voorspellen of het afspelen soepel en energiezuinig zal verlopen voor gecodeerde media.
- Ondersteuning van de
playsInlineattribuuthint van het video-element.
Gecodeerde media: decoderingsinformatie
Sinds Chrome 66 kunnen webontwikkelaars Decoding Info gebruiken om de browser te vragen naar de duidelijke mogelijkheden voor het decoderen van inhoud van het apparaat op basis van informatie zoals de codecs, profiel, resolutie, bitrates, enz. Het geeft aan of het afspelen soepel zal verlopen (tijdig) en energiezuinig op basis van eerdere afspeelstatistieken geregistreerd door de browser.
De Media Capabilities API- specificatie, die Decoding Info definieert, is sindsdien bijgewerkt om ook gecodeerde mediaconfiguraties te verwerken, zodat websites die gecodeerde media (EME) gebruiken, de optimale mediastreams kunnen selecteren.
In een notendop is dit hoe Decoderingsinformatie voor EME werkt. Probeer het officiële monster eens.
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.
});
EME-playbacks hebben gespecialiseerde decoderings- en renderingcodepaden, wat andere codec-ondersteuning en -prestaties betekent in vergelijking met duidelijke playbacks. Daarom moet er een nieuwe keySystemConfiguration -sleutel worden ingesteld in het mediaconfiguratieobject dat wordt doorgegeven aan navigator.mediaCapabilities.decodingInfo() . De waarde van deze sleutel is een woordenboek dat een aantal bekende EME-typen bevat. Dit repliceert de invoer die is geleverd aan EME's requestMediaKeySystemAccess() met één groot verschil: reeksen invoer die zijn verstrekt aan requestMediaKeySystemAccess() worden afgevlakt tot een enkele waarde, waar de bedoeling van de reeks was om requestMediaKeySystemAccess() een subset te laten kiezen die het ondersteunt.
Decoderingsinfo beschrijft de kwaliteit (soepelheid en energie-efficiëntie) van ondersteuning voor een enkel paar audio- en videostreams zonder dat de beller een beslissing neemt. Bellers moeten nog steeds mediaconfiguraties bestellen, zoals ze doen met requestMediaKeySystemAccess() . Alleen lopen ze nu zelf de lijst.
navigator.mediaCapabilities.decodingInfo() retourneert een belofte die asynchroon wordt opgelost met een object dat drie booleans bevat: supported , smooth en powerEfficient . Wanneer echter een keySystemConfiguration sleutel is ingesteld en supported is true , wordt er ook nog een ander MediaKeySystemAccess object met de naam keySystemAccess geretourneerd. Het kan worden gebruikt om een aantal mediasleutels aan te vragen en het gecodeerd afspelen van media in te stellen. Hier is een voorbeeld:
// 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.
}
Houd er rekening mee dat voor het decoderen van informatie voor gecodeerde media HTTPS vereist is.
Houd er bovendien rekening mee dat het op Android en ChromeOS een gebruikersprompt kan activeren op dezelfde manier als requestMediaKeySystemAccess() . Het zal echter niet meer aanwijzingen tonen dan requestMediaKeySystemAccess() , ondanks dat er meer oproepen nodig zijn om het gecodeerd afspelen van media in te stellen.
Intentie om te experimenteren | Chromestatustracker | Chroombug
HTMLVideoElement.playsInline
Chrome ondersteunt nu het booleaanse attribuut playsInline . Indien aanwezig, geeft het aan de browser door dat de video standaard "inline" in het document moet worden weergegeven, beperkt tot het afspeelgebied van het element.
Net als in Safari, waar video-elementen op de iPhone niet automatisch naar de modus Volledig scherm gaan wanneer het afspelen begint, zorgt deze hint ervoor dat sommige insluiters automatisch video op volledig scherm kunnen afspelen. Webontwikkelaars kunnen het gebruiken om zich indien nodig af te melden voor deze ervaring.
<video playsinline></video>
Omdat Chrome op Android en desktop geen automatisch volledig scherm implementeert, wordt de attribuuthint playsInline video-element niet gebruikt.