Mises à jour multimédias dans Chrome 58

François Beaufort
François Beaufort
GitHub

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 remoteplayback, à l'aide de la nouvelle API ControlsList.

Contrôles multimédias natifs dans Chrome 58
Commandes multimédias natives dans Chrome 58

Cette API permet d'afficher ou de masquer les commandes multimédias natives qui n'ont pas de sens ou 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 pour l'instant un mécanisme de liste de blocage sur les contrôles natifs, avec la possibilité de les définir directement à partir du contenu HTML à l'aide du nouvel attribut controlsList. Consultez l'exemple officiel.

Utilisation en HTML :

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

Utilisation dans 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 d'expédition | Outil de suivi Chromestatus | Bug Chromium

Lecture automatique pour les applications Web progressives ajoutées à l'écran d'accueil

Auparavant, Chrome bloquait tous les autoplay avec du son sur Android sans exception. Ce n'est plus le cas. Désormais, les sites installés à l'aide du flux "Ajouter à l'écran d'accueil" amélioré sont autorisés à lire automatiquement l'audio et la vidéo diffusés à partir d'origines incluses dans le champ d'application du manifeste de l'application Web sans restriction.

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

L'audio est lu automatiquement, car /foo est dans le champ d'application.

À éviter
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

La lecture automatique de l'élément audio échoue, car /bar n'est PAS dans le champ d'application.

Intention d'expédition | Outil de suivi Chromestatus | Bug Chromium

Mettre en pause la vidéo en lecture automatique sans son lorsqu'elle est invisible

Comme vous le savez peut-être déjà, Chrome sur Android permet aux vidéos muted de commencer à être lues sans interaction de l'utilisateur. Si une vidéo est marquée comme muted et comporte l'attribut autoplay, Chrome lance la lecture de la vidéo lorsqu'elle devient visible pour 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 lorsque l'écran sera éteint et reprendra lorsque l'écran sera de nouveau allumé, comme sur Safari iOS.

Intention d'expédition | Outil de suivi Chromestatus | Bug Chromium

Requête média "color-gamut"

Les écrans à large gamme de couleurs étant de plus en plus populaires, les sites peuvent désormais accéder à la gamme approximative de couleurs compatibles avec Chrome et les périphériques 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 Improving Color on the Web (Améliorer les couleurs sur le Web). Il explique en détail comment utiliser la requête média color-gamut pour diffuser des images à large gamme de couleurs lorsque l'utilisateur se trouve sur des écrans à large gamme de couleurs et revenir aux images sRGB 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). Consultez l'exemple 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 le 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 dans 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 d'expédition | Outil de suivi Chromestatus | Bug Chromium