Medienupdates in Chrome 75

François Beaufort
François Beaufort

Die Medienfunktionen von Chrome wurden in Version 75 aktualisiert. In diesem Artikel gehe ich auf diese neuen Funktionen ein:

  • Vorhersage, ob die Wiedergabe bei verschlüsselten Medien reibungslos und energieeffizient verläuft.
  • Unterstützung des Attributhinweiss playsInline des Videoelements

Verschlüsselte Medien: Informationen zur Decodierung

Seit Chrome 66 können Webentwickler Informationen zur Decodierung verwenden, um den Browser anhand von Informationen wie Codecs, Profil, Auflösung, Bitraten usw. nach den Möglichkeiten zur Decodierung von Inhalten des Geräts abzufragen. Anhand der zuvor vom Browser aufgezeichneten Wiedergabestatistiken wird angegeben, ob die Wiedergabe reibungslos (rechtzeitig) und energieeffizient erfolgt.

Die Media Capabilities API-Spezifikation, die Decodierungsinformationen definiert, wurde inzwischen aktualisiert, um auch verschlüsselte Medienkonfigurationen zu verarbeiten, sodass Websites mit verschlüsselten Medien (EME) die optimalen Medienstreams auswählen können.

So funktioniert „Decoding Info for EME“: Probieren Sie das offizielle Beispiel aus.

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-Wiedergaben haben spezielle Decodierungs- und Rendering-Codepfade, was eine andere Codec-Unterstützung und -Leistung im Vergleich zu klaren Wiedergaben bedeutet. Daher muss ein neuer keySystemConfiguration-Schlüssel im Medienkonfigurationsobjekt festgelegt werden, das an navigator.mediaCapabilities.decodingInfo() übergeben wird. Der Wert dieses Schlüssels ist ein Wörterbuch, das eine Reihe von bekannten EME-Typen enthält. Dadurch werden die an die requestMediaKeySystemAccess() von EME bereitgestellten Eingaben repliziert, allerdings mit einem Hauptunterschied: Die Sequenzen von Eingaben, die für requestMediaKeySystemAccess() bereitgestellt werden, werden überall dort, wo die Sequenz beabsichtigt war, eine Teilmenge auszuwählen, die von requestMediaKeySystemAccess() unterstützt werden soll, zu einem einzigen Wert vereinfacht.

„Decoding Info“ (Decodierungsinformationen) beschreibt die Qualität (Flüssigkeit und Energieeffizienz) der Unterstützung für ein einzelnes Paar von Audio- und Videostreams, ohne eine Entscheidung für den Aufrufer zu treffen. Aufrufer sollten Medienkonfigurationen weiterhin wie bei requestMediaKeySystemAccess() anordnen. Erst jetzt gehen sie die Liste selbst durch.

navigator.mediaCapabilities.decodingInfo() gibt ein Versprechen zurück, das asynchron mit einem Objekt aufgelöst wird, das drei boolesche Werte enthält: supported, smooth und powerEfficient. Wenn jedoch ein keySystemConfiguration-Schlüssel festgelegt ist und supported den Wert true hat, wird auch ein weiteres MediaKeySystemAccess-Objekt mit dem Namen keySystemAccess zurückgegeben. Damit können einige Medienschlüssel angefordert und die verschlüsselte Medienwiedergabe eingerichtet werden. Beispiel:

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

Beachten Sie, dass für die Decodierung von verschlüsselten Medien HTTPS erforderlich ist.

Außerdem kann er auf die gleiche Weise wie requestMediaKeySystemAccess() eine Nutzeraufforderung unter Android und ChromeOS auslösen. Es werden jedoch nicht mehr Aufforderungen als requestMediaKeySystemAccess() angezeigt, auch wenn mehr Aufrufe zum Einrichten der verschlüsselten Medienwiedergabe erforderlich sind.

ALT_TEXT_HERE
Prompt für geschützte Inhalte

Intent to Experiment | Chromestatus-Tracker | Chromium-Fehler

HTMLVideoElement.playsInline

Chrome unterstützt jetzt das boolesche Attribut playsInline. Falls vorhanden, weist sie den Browser darauf hin, dass das Video standardmäßig „inline“ im Dokument angezeigt werden sollte und auf den Wiedergabebereich des Elements beschränkt ist.

Ähnlich wie bei Safari, in denen Videoelemente auf iPhones nicht automatisch in den Vollbildmodus wechseln, wenn die Wiedergabe beginnt, ermöglicht dieser Hinweis einigen Einbettungen eine automatische Wiedergabe von Videos im Vollbildmodus. Bei Bedarf können Webentwickler diese Funktion deaktivieren.

<video playsinline></video>

Da in Chrome unter Android und auf dem Computer der automatische Vollbildmodus nicht implementiert ist, wird der Attributhinweis für das Videoelement playsInline nicht verwendet.

Intent to Ship | Chromestatus-Tracker | Chromium-Fehler