- Les développeurs peuvent désormais personnaliser les commandes multimédias telles que les boutons de téléchargement, de lecture en plein écran et de lecture à distance.
- Les sites installés à l'aide de la procédure "Ajouter à l'écran d'accueil" peuvent lire automatiquement les contenus audio et vidéo dans le champ d'application du fichier manifeste.
- Chrome sur Android met désormais en pause la lecture automatique d'une vidéo dont le son est coupé lorsqu'elle est invisible.
- Les développeurs peuvent désormais accéder à la gamme approximative de couleurs compatibles avec Chrome et les appareils de sortie à l'aide de la requête média
color-gamut. - Lorsque vous utilisez des extensions Media Source, il est maintenant possible de basculer entre des flux chiffrés et des flux effacés.
Personnalisation des commandes multimédias
Les développeurs peuvent désormais personnaliser les commandes multimédias natives de Chrome, telles que les boutons de téléchargement, de plein écran et de [lecture à distance], à l'aide de la nouvelle [API ControlsList].
Cette API permet d'afficher ou de masquer les commandes multimédias natives qui n'ont pas de sens, qui ne font pas partie de l'expérience utilisateur attendue ou qui n'autorisent qu'un ensemble limité de fonctionnalités.
L'implémentation actuelle est un mécanisme de liste de blocage sur les commandes natives, avec la possibilité de les définir directement à partir du contenu HTML à l'aide du nouvel attribut controlsList. Découvrez l'extrait officiel.
Utilisation en HTML:
<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>
Utilisation en 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
Intention de livraison | Outil de suivi Chromestatus | Bug Chromium
Ajout de la lecture automatique pour les progressive web apps à l'écran d'accueil
Auparavant, Chrome bloquait tous les autoplay avec le son sur Android, sans exception. Ce n'est plus vrai. À partir de maintenant, les sites installés à l'aide du flux amélioré "Ajouter à l'écran d'accueil" sont autorisés à lire automatiquement les contenus audio et vidéo diffusés à partir d'origines incluses dans le champ d'application du fichier manifeste d'application Web, sans restriction.
{
"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>
Intention de livraison | Outil de suivi Chromestatus | Bug Chromium
Mettre en pause la lecture automatique de la vidéo sans son en cas d'invisibilité
Comme vous le savez peut-être déjà, Chrome sur Android permet de lancer la lecture des vidéos muted sans interaction de l'utilisateur. Si une vidéo est marquée comme muted et possède l'attribut autoplay, Chrome commence à la lire lorsqu'elle devient visible par l'utilisateur.
À partir de Chrome 58, afin de réduire la consommation d'énergie, la lecture des vidéos avec l'attribut autoplay sera suspendue lorsqu'elles seront hors écran, puis réactivées lorsqu'elles seront rétablies, conformément au comportement de Safari sur iOS.
Intention de livraison | Outil de suivi Chromestatus | Bug Chromium
requête média "gamme de couleurs"
Comme les écrans à large gamme de couleurs sont de plus en plus populaires, les sites peuvent désormais accéder à la gamme approximative de couleurs compatibles avec Chrome et aux appareils de sortie à l'aide de la requête média color-gamut.
Si vous ne connaissez pas encore les définitions de l'espace colorimétrique, du profil de couleur, de la gamme, de la large gamme et de la profondeur de couleur, je vous recommande vivement de lire l'article de blog WebKit Améliorer les couleurs sur le Web. Elle explique en détail comment utiliser la requête multimédia color-gamut pour diffuser des images à large gamme lorsque l'utilisateur utilise un écran large et comment utiliser des images sRVB dans le cas contraire.
L'implémentation actuelle dans Chrome accepte les mots clés srgb, p3 (gamme spécifiée par l'espace colorimétrique DCI P3) et rec2020 (gamme spécifiée par l'espace colorimétrique de la recommandation ITU-R BT.2020). Découvrez l'extrait officiel.
Utilisation en 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>
Utilisation dans 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");
}
}
Utilisation en 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")';
}
Intention de livraison | Outil de suivi Chromestatus | Bug Chromium