Medienupdates in Chrome 73

François Beaufort
François Beaufort
GitHub

In diesem Artikel geht es um die neuen Medienfunktionen in Chrome 73, darunter:

Unterstützung für Hardware-Medienschlüssel

Heutzutage verfügen viele Tastaturen über Tasten, mit denen grundlegende Funktionen zur Medienwiedergabe gesteuert werden können, Wiedergabe/Pause, vorheriger und nächster Titel. Bei Headsets ist das auch der Fall. Bis jetzt haben Sie Desktop-Nutzer konnten mit diesen Medientasten die Audio- und Videowiedergabe nicht steuern in Chrome. Das ändert sich heute.

<ph type="x-smartling-placeholder">
</ph> Medientasten der Tastatur <ph type="x-smartling-placeholder">
</ph> Medientasten der Tastatur

Wenn der Nutzer die Pausetaste drückt, wird das aktive Medienelement in Chrome, das wiedergegeben wird, und die Meldung „pausiert“ Medienereignis. Wenn die Wiedergabetaste gedrückt wird, ein zuvor pausiertes Medienelement wird fortgesetzt und Medien . Das funktioniert unabhängig davon, ob Chrome im Vordergrund oder im Hintergrund ausgeführt wird.

In ChromeOS wird Chrome nun von Android-Apps mit Audiofokus angewiesen, die Audiowiedergabe fortsetzen, um ein nahtloses Medienerlebnis zwischen Websites in Chrome zu schaffen, Chrome-Apps und Android-Apps. Dies wird derzeit nur unter ChromeOS unterstützt mit Android P.

Kurz gesagt: Es empfiehlt sich, diese Medienereignisse immer zu hören und zu handeln, entsprechend anpassen.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

Halt – das war noch nicht alles! Mit der Media Session API, die jetzt auf Desktop-Computern verfügbar ist da es vorher nur auf Mobilgeräten unterstützt wurde, können Webentwickler Medien Zugehörige Ereignisse wie Track-Änderungen, die durch Medientasten ausgelöst werden. Die Derzeit werden die Ereignisse previoustrack und nexttrack unterstützt.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Die Tasten für Wiedergabe und Pause werden von Chrome automatisch gesteuert. Wenn die Standardeinstellung für Sie nicht geeignet ist, können Sie trotzdem einige Aktions-Handler für „wiedergeben“ und „Pause“ um dies zu verhindern.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Unterstützung für Hardware-Medienschlüssel ist unter ChromeOS, macOS und Windows verfügbar. Linux kommen später hinzu.

Sehen Sie sich unsere bestehende Entwicklerdokumentation an und testen Sie die offiziellen Medien Sitzungsbeispiele.

Chromestatus-Tracker | Chromium-Programmfehler

Verschlüsselte Medien: HDCP-Richtlinienüberprüfung

Dank der HDCP Policy Check API können Webentwickler jetzt abfragen, ob ein bestimmte Richtlinie, z.B. Die HDCP-Anforderung kann vor dem Anfordern erzwungen werden Widevine-Lizenzen und das Laden von Medien

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

Die API ist auf allen Plattformen verfügbar. Die eigentlichen Richtlinienprüfungen auf bestimmten Plattformen nicht verfügbar sind. Beispiel: HDCP Policy Check Promise wird mit NotSupportedError unter Android und Android WebView abgelehnt.

Wirf einen Blick auf die vorherige Entwicklerdokumentation und probiere die offizielle Entwicklerdokumentation Beispiel, um alle unterstützten HDCP-Versionen zu sehen.

Versandabsicht | Chromestatus-Tracker | Chromium-Fehler

Ursprungstest für die Funktion „Auto-Bild im Bild“ für installierte PWAs

Manche Seiten möchten automatisch den Modus Bild im Bild aktivieren und deaktivieren, Videoelement; profitieren beispielsweise Web-Apps für Videokonferenzen automatisches Bild-im-Bild-Verhalten, wenn Nutzer zwischen die Web-App und andere Anwendungen oder Tabs. Dies ist leider mit der Anforderung für Nutzergesten. Und hier kommt der automatische Bild-im-Bild-Modus.

Um den Wechsel zwischen Tabs und Apps zu unterstützen, wurde ein neues autopictureinpicture-Attribut hinzugefügt. wird zum <video>-Element hinzugefügt.

<video autopictureinpicture></video>

Das Ganze funktioniert so ungefähr:

  • Wenn das Dokument ausgeblendet wird, ist das Videoelement, dessen autopictureinpicture zuletzt festgelegt wurde, wechselt automatisch in den Modus Bild im Bild, wenn Zulässig sind.
  • Wenn das Dokument sichtbar wird, wird das Videoelement für „Bild im Bild“ verlässt sie automatisch.

Webseite. Hinweis: Die Funktion „Automatischer Bild im Bild“ funktioniert nur bei Progressive Web-Apps, die Nutzer auf dem Desktop installiert haben

Weitere Informationen findest du in der Spezifikation. Du kannst auch die offizielle PWA ausprobieren. Stichprobe.

Experimentelle Absicht | Chromestatus-Tracker | Chromium-Fehler

Ursprungstest für das Überspringen der Anzeige im Bild-im-Bild-Fenster

Das Modell für Videoanzeigen besteht normalerweise aus Pre-Roll-Anzeigen. Inhalt Anbieter bieten häufig die Möglichkeit an, die Anzeige nach einigen Sekunden zu überspringen. Leider da das Bild-im-Bild-Fenster nicht interaktiv ist, können Nutzende Mit Bild im Bild ist das derzeit nicht möglich.

Mit der Media Session API, die jetzt auch auf Desktop-Computern verfügbar ist (unterstützt von nur auf Mobilgeräten zuvor), kann eine neue skipad-Mediensitzungsaktion verwendet werden, um diese Option für Bild im Bild aus.

<ph type="x-smartling-placeholder">
</ph> Schaltfläche „Werbung überspringen“ im Bild-im-Bild-Fenster <ph type="x-smartling-placeholder">
</ph> „Anzeige überspringen“ im Bild-im-Bild-Fenster

Übergeben Sie zum Bereitstellen dieser Funktion eine Funktion mit skipad beim Aufrufen von setActionHandler(). Über null. Wie Sie unten lesen können, ziemlich einfach.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

Testen Sie die offizielle "Anzeige überspringen" und teilen Sie uns mit, wie diese Funktion verbessert werden kann.

Experimentelle Absicht | Chromestatus-Tracker | Chromium-Fehler

Autoplay für Computer-PWAs aktiviert

Progressive Web-Apps sind jetzt auf allen Desktop-Plattformen verfügbar. Nun erweitern wir die Regel für Mobilgeräte auf Desktop-Computer: Autoplay mit Ton ist jetzt für installierte PWAs zulässig. Dies gilt nur für Seiten in Den Bereich des Web-App-Manifests.

Fehler in Chromium