Medienupdates in Chrome 75

François Beaufort
François Beaufort

Die Medienfunktionen von Chrome wurden in Version 75 aktualisiert. In diesem Artikel geht es um folgende neue Funktionen:

  • Vorhersage, ob die Wiedergabe für verschlüsselte Medien reibungslos und energieeffizient verläuft
  • Unterstützung des playsInline-Attribut-Hinweises des Videoelements.

Verschlüsselte Medien: Informationen zur Dekodierung

Seit Chrome 66 können Webentwickler mithilfe von Decoding-Informationen den Browser anhand von Informationen wie Codecs, Profil, Auflösung und Bitrate nach den Dekodierungsfunktionen für nicht geschützte Inhalte des Geräts fragen. Anhand der bisherigen Wiedergabestatistiken, die vom Browser erfasst wurden, wird angegeben, ob die Wiedergabe flüssig (zeitnah) und energieeffizient ist.

Die Spezifikation der Media Capabilities API, die Dekodierungsinformationen definiert, wurde inzwischen aktualisiert, um auch verschlüsselte Medienkonfigurationen zu verarbeiten. So können Websites, die verschlüsselte Medien (EME) verwenden, die optimalen Medienstreams auswählen.

So funktioniert die Decodierung von Informationen für 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 unverschlüsselten Wiedergaben bedeutet. Daher muss im Medienkonfigurationsobjekt, das an navigator.mediaCapabilities.decodingInfo() übergeben wird, ein neuer keySystemConfiguration-Schlüssel festgelegt werden. Der Wert dieses Schlüssels ist ein Wörterbuch mit einer Reihe von bekannten EME-Typen. Dabei werden die Eingaben, die an requestMediaKeySystemAccess() von EME übergeben werden, mit einem wichtigen Unterschied repliziert: Sequenzen von Eingaben, die an requestMediaKeySystemAccess() übergeben werden, werden zu einem einzelnen Wert zusammengeführt, wenn die Absicht der Sequenz darin bestand, dass requestMediaKeySystemAccess() eine von ihm unterstützte Teilmenge auswählt.

Decoding-Informationen beschreiben die Qualität (Laufruhe und Energieeffizienz) der Unterstützung für ein einzelnes Paar von Audio- und Videostreams, ohne eine Entscheidung für den Anrufer zu treffen. Aufrufer sollten weiterhin die Medienkonfigurationen wie bei requestMediaKeySystemAccess() anordnen. Nur jetzt gehen sie die Liste selbst durch.

navigator.mediaCapabilities.decodingInfo() gibt ein Versprechen zurück, das asynchron mit einem Objekt mit drei Booleschen Werten supported, smooth und powerEfficient aufgelöst wird. Wenn jedoch ein keySystemConfiguration-Schlüssel festgelegt ist und supported den Wert true hat, wird auch ein weiteres MediaKeySystemAccess-Objekt namens keySystemAccess zurückgegeben. Damit können einige Medienschlüssel angefordert und die Wiedergabe verschlüsselter Medien 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.
}

Beachte, dass zum Decodieren von Informationen für verschlüsselte Medien HTTPS erforderlich ist.

Außerdem kann es auf Android- und ChromeOS-Geräten genauso wie requestMediaKeySystemAccess() eine Nutzeraufforderung auslösen. Es werden jedoch nicht mehr Aufforderungen als bei requestMediaKeySystemAccess() angezeigt, obwohl für die Einrichtung der verschlüsselten Medienwiedergabe mehr Aufrufe 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 dies den Browser darauf hin, dass das Video standardmäßig inline im Dokument angezeigt werden soll, wobei es auf den Wiedergabebereich des Elements beschränkt sein sollte.

Ähnlich wie in Safari, wo Videoelemente auf dem iPhone nicht automatisch im Vollbildmodus gestartet werden, können einige Einbettungspartner mit diesem Hinweis die Videowiedergabe automatisch im Vollbildmodus starten. Webentwickler können diese Funktion bei Bedarf deaktivieren.

<video playsinline></video>

Da Chrome auf Android-Geräten und dem Computer kein automatisches Vollbild implementiert, wird der Hinweis zum Attribut playsInline des Videoelements nicht verwendet.

Intent to Ship | Chromestatus-Tracker | Chromium-Fehler