In diesem Artikel geht es um die neuen Medienfunktionen von Chrome 73:
- Zur Steuerung der Medienwiedergabe auf Desktops werden jetzt Hardware-Medientasten unterstützt.
- Webentwickler können abfragen, ob eine bestimmte HDCP-Richtlinie erzwungen werden kann.
- Die automatische Bild-im-Bild-Funktion für Desktop-PWAs und die Funktion Anzeige überspringen im Bild-im-Bild-Modus sind bald in Ursprungstests verfügbar.
- Für Computer-PWAs wird Autoplay mit Ton gewährt.
Unterstützung für Hardware-Medienschlüssel
Viele Tastaturen haben heutzutage Tasten zur Steuerung grundlegender Medienwiedergabefunktionen wie Wiedergabe/Pause sowie vorheriger und nächster Titel. Auch Headsets sind mit dabei. Bisher konnten Computernutzer diese Medientasten zur Steuerung der Audio- und Videowiedergabe in Chrome nicht verwenden. Das ändert sich heute.
Wenn der Nutzer die Pausetaste drückt, wird das aktive Medienelement, das in Chrome wiedergegeben wird, pausiert und empfängt ein pausiertes Medienereignis. Wenn die Wiedergabetaste gedrückt wird, wird das zuvor pausierte Medienelement fortgesetzt und empfängt ein Medienereignis „Wiedergabe“. Sie funktioniert unabhängig davon, ob Chrome im Vordergrund oder im Hintergrund ausgeführt wird.
In ChromeOS weisen Android-Apps, die Audiofokus verwenden, Chrome jetzt an, die Audiowiedergabe zu pausieren und fortzusetzen, um ein nahtloses Medienerlebnis zwischen Websites in Chrome, Chrome-Apps und Android-Apps zu schaffen. Dies wird derzeit nur auf ChromeOS-Geräten mit Android P unterstützt.
Kurz gesagt: Es empfiehlt sich, immer auf diese Medienereignisse zu warten und entsprechend zu handeln.
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.
});
Das war noch nicht alles! Die Media Session API ist jetzt für Computer verfügbar (bisher wurde sie nur auf Mobilgeräten unterstützt). Damit können Webentwickler medienbezogene Ereignisse wie Titeländerungen verarbeiten, die durch Medienschlüssel ausgelöst werden. 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 verwaltet. Sollte das Standardverhalten jedoch nicht funktionieren, können Sie dennoch einige Action-Handler für "play" (Wiedergabe) und "pause" (Pause) festlegen, 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 wird später eingeführt.
Sieh dir unsere bestehende Entwicklerdokumentation an und probiere die offiziellen Media Session-Beispiele aus.
Chromestatus-Tracker | Chromium-Fehler
Verschlüsselte Medien: HDCP-Richtlinienprüfung
Dank der HDCP Policy Check API können Webentwickler jetzt abfragen, ob eine bestimmte Richtlinie, z.B. die HDCP-Anforderung, erzwungen werden kann, bevor Sie Wivine-Lizenzen anfordern und Medien laden.
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 sind jedoch auf bestimmten Plattformen möglicherweise nicht verfügbar. Beispielsweise wird die HDCP-Richtlinienprüfung mit NotSupportedError unter Android und Android WebView abgelehnt.
Sehen Sie sich unsere frühere Entwicklerdokumentation an und probieren Sie das offizielle Beispiel aus, um alle unterstützten HDCP-Versionen zu sehen.
Intent to Ship | Chromestatus-Tracker | Chromium-Fehler
Ursprungstest für die automatische Bild-im-Bild-Funktion für installierte PWAs
Für einige Seiten kann es sinnvoll sein, für ein Videoelement automatisch Bild im Bild aufzurufen und zu belassen. Beispielsweise würden Webanwendungen für Videokonferenzen von einem automatischen Bild-im-Bild-Verhalten profitieren, wenn Nutzer zwischen der Web-App und anderen Anwendungen oder Tabs hin- und herwechseln. Das ist mit der Anforderung von Nutzergesten leider nicht möglich. Jetzt neu: der automatische Bild-im-Bild-Modus!
Damit der Wechsel zwischen Tabs und Apps möglich ist, wird dem Element <video> ein neues autopictureinpicture-Attribut hinzugefügt.
<video autopictureinpicture></video>
So funktioniert es ungefähr:
- Wenn das Dokument ausgeblendet wird, wechselt das Videoelement, dessen
autopictureinpicture-Attribut zuletzt festgelegt wurde, automatisch in den Bild-im-Bild-Modus, sofern dies zulässig ist. - Sobald das Dokument sichtbar wird, verlässt das Videoelement in der Funktion „Bild im Bild“ es automatisch.
Webseite. Die Funktion „Automatischer Bild im Bild“ gilt nur für Progressive Web-Apps, die Nutzer auf dem Computer installiert haben.
Weitere Informationen findest du spec. Du kannst auch das offizielle PWA-Beispiel ausprobieren.
Intent to Experiment | Chromestatus-Tracker | Chromium-Fehler
Ursprungstest für das Überspringen von Werbung im Bild-im-Bild-Fenster
Das Modell für Videoanzeigen besteht normalerweise aus Pre-Roll-Anzeigen. Contentanbieter bieten oft die Möglichkeit, die Anzeige nach einigen Sekunden zu überspringen. Da das Bild-im-Bild-Fenster nicht interaktiv ist, ist dies leider derzeit nicht möglich.
Da die Media Session API jetzt für Computer verfügbar ist (bisher wurde sie nur auf Mobilgeräten unterstützt), kann eine neue skipad-Mediensitzungsaktion verwendet werden, um diese Option für Bild im Bild anzubieten.
Um dieses Feature bereitzustellen, übergeben Sie beim Aufrufen von setActionHandler() eine Funktion mit skipad. Wenn Sie ihn ausblenden möchten, gehen Sie über null. Wie Sie unten lesen können, ist es 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.
}
Probieren Sie das offizielle Beispiel für „Anzeige überspringen“ aus und teilen Sie uns mit, wie diese Funktion verbessert werden kann.
Intent to Experiment | Chromestatus-Tracker | Chromium-Fehler
Autoplay für Desktop-PWAs gewährt
Da Progressive Web-Apps jetzt auf allen Desktop-Plattformen verfügbar sind, erweitern wir die Regel für Mobilgeräte auf Desktop-Computer: Autoplay mit Ton ist jetzt auch für installierte PWAs zulässig. Sie gilt nur für Seiten im Bereich des Manifests der Web-App.