- Entwickler können jetzt Mediensteuerelemente anpassen, z. B. die Schaltflächen zum Herunterladen, für den Vollbildmodus und für die Remote-Wiedergabe.
- Auf Websites, die über den Ablauf „Zum Startbildschirm hinzufügen“ installiert wurden, können Audio und Video im Manifestbereich automatisch wiedergegeben werden.
- In Chrome für Android wird die automatische Wiedergabe eines stummgeschalteten Videos jetzt pausiert, wenn es nicht sichtbar ist.
- Entwickler können jetzt mit der
color-gamut-Media-Query auf den ungefähren Farbbereich zugreifen, der von Chrome und Ausgabegeräten unterstützt wird. - Bei Verwendung von Media Source Extensions ist es jetzt möglich, zwischen verschlüsselten und unverschlüsselten Streams zu wechseln.
Mediensteuerung anpassen
Entwickler können jetzt die nativen Media-Steuerelemente von Chrome wie die Schaltflächen zum Herunterladen, für den Vollbildmodus und für [remoteplayback] mit der neuen [ControlsList API] anpassen.
Mit dieser API können Sie native Media-Steuerelemente ein- oder ausblenden, die nicht sinnvoll sind oder nicht zur erwarteten Nutzerfreundlichkeit gehören, oder nur eine begrenzte Anzahl von Funktionen zulassen.
Die aktuelle Implementierung ist vorerst ein Blockierungslistenmechanismus für native Steuerelemente, der direkt über HTML-Inhalte mit dem neuen Attribut controlsList festgelegt werden kann. 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 hat 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",
...
}
<html>
<link rel="canonical" href="https://example.com/foo">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
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 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 dringend, den WebKit-Blogbeitrag Improving Color on the Web zu lesen. Dort wird ausführlich beschrieben, wie Sie die Medienabfrage color-gamut verwenden, um Bilder mit großem Farbraum auf Bildschirmen mit großem Farbraum und ansonsten sRGB-Bilder bereitzustellen.
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")';
}