Medienupdates in Chrome 58

François Beaufort
François Beaufort
GitHub

Mediensteuerung anpassen

Entwickler können jetzt die nativen Media-Steuerelemente von Chrome wie die Schaltflächen für Download, Vollbild und remoteplayback mit der neuen ControlsList API anpassen.

Native Mediensteuerung in Chrome 58
Native Mediensteuerungen in Chrome 58

Mit dieser API können Sie native Media-Steuerelemente ein- oder ausblenden, die keinen Sinn ergeben oder nicht Teil der erwarteten Nutzererfahrung sind, oder nur eine begrenzte Anzahl von Funktionen zulassen.

Die aktuelle Implementierung ist vorerst ein Blocklist-Mechanismus für native Steuerelemente, die mit dem neuen Attribut controlsList direkt aus HTML-Inhalten festgelegt werden können. Offizielles Beispiel

Verwendung in HTML:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

Verwendung in JavaScript:

var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"

video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true

Intent to Ship | Chromestatus Tracker | Chromium-Fehler

Autoplay für progressive Web-Apps, die dem Startbildschirm hinzugefügt wurden

Bisher wurden in Chrome alle autoplay mit Ton auf Android-Geräten ohne Ausnahme blockiert. Das ist nicht mehr der Fall. Ab sofort dürfen Websites, die über den verbesserten Ablauf zum Hinzufügen zum Startbildschirm installiert wurden, Audio und Video, die von Ursprüngen bereitgestellt werden, die im Web-App-Manifest enthalten sind, ohne Einschränkungen automatisch abspielen.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
Do
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Die Audiowiedergabe wird automatisch gestartet, da /foo im Bereich liegt.

Don'ts
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Die automatische Wiedergabe von Audioinhalten schlägt fehl, da /bar NICHT im Bereich liegt.

Intent to Ship | Chromestatus Tracker | Chromium-Fehler

Automatisch abgespielte stummgeschaltete Videos pausieren, wenn sie nicht sichtbar sind

Wie Sie vielleicht schon wissen, können muted-Videos in Chrome für Android ohne Nutzerinteraktion wiedergegeben werden. Wenn ein Video als muted gekennzeichnet ist und das Attribut autoplay hat, beginnt Chrome mit der Wiedergabe des Videos, sobald es für den Nutzer sichtbar wird.

Ab Chrome 58 wird die Wiedergabe von Videos mit dem Attribut autoplay pausiert, wenn sie nicht auf dem Bildschirm zu sehen sind, und fortgesetzt, wenn sie wieder im Blickfeld sind. Dies entspricht dem Verhalten von Safari unter iOS.'

Intent to Ship | Chromestatus Tracker | Chromium-Fehler

Medienabfrage „color-gamut“

Da Bildschirme mit großem Farbraum immer beliebter werden, können Websites jetzt über die Media-Anfrage color-gamut auf den ungefähren Farbbereich zugreifen, der von Chrome und Ausgabegeräten unterstützt wird.

Wenn Sie mit den Definitionen von Farbraum, Farbprofil, Gamut, Wide-Gamut und Farbtiefe noch nicht vertraut sind, empfehle ich Ihnen, den WebKit-Blogbeitrag Improving Color on the Web zu lesen. Dort wird ausführlich beschrieben, wie Sie die Media-Anfrage color-gamut verwenden, um Bilder mit großem Farbraum auf Bildschirmen mit großem Farbraum auszuliefern und ansonsten auf sRGB-Bilder zurückzugreifen.

In der aktuellen Implementierung in Chrome werden die Keywords srgb, p3 (Farbskala, die durch den DCI P3-Farbraum angegeben wird) und rec2020 (Farbskala, die durch den ITU-R-Farbraum BT.2020 angegeben wird) akzeptiert. Offizielles Beispiel

Verwendung in HTML:

<picture>
  <source media="(color-gamut: p3)" srcset="photo-p3.jpg">
  <source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
  <img src="photo-srgb.jpg">
</picture>

Verwendung in CSS:

main {
  background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
  main {
    background-image: url("photo-p3.jpg");
  }
}

@media (color-gamut: rec2020) {
  main {
    background-image: url("photo-rec2020.jpg");
  }
}

Verwendung in JavaScript:

// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}

Intent to Ship | Chromestatus Tracker | Chromium-Fehler