- Les développeurs peuvent désormais personnaliser les commandes multimédias telles que les boutons de téléchargement, d'affichage 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 acceptées par 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 désormais 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, comme 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.
Pour l'instant, l'implémentation actuelle consiste en un mécanisme de liste de blocage sur les commandes natives. Il est possible 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 de l'état de Chrome | Bug Chromium
Lecture automatique pour les progressive web apps ajoutée à 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 de la procédure améliorée 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>
L'audio sera lu automatiquement, car /foo est compris dans le champ d'application.
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
Échec de la lecture automatique du contenu audio, car /bar n'est PAS inclus dans le champ d'application.
Intention de livraison | Outil de suivi de l'état de Chrome | Bug Chromium
Mettre en pause la lecture automatique de la vidéo sans le son lorsqu'elle est invisible
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 mise en pause lorsqu'elles seront hors écran et réactivées lorsqu'elles seront de nouveau visibles, conformément au comportement iOS de Safari.
Intention de livraison | Outil de suivi de l'état de Chrome | Bug Chromium
requête média color-gamut
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 acceptées par Chrome et les 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, nous vous recommandons 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 des écrans larges et revenir aux 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 UI-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 de l'état de Chrome | Bug Chromium