Mises à jour audio et vidéo 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
Figure 1. 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",
  ...
}

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

Mettre en pause la lecture automatique des vidéos sans son lorsqu'elles sont invisibles

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 lorsqu'elles seront hors écran et reprise lorsqu'elles seront de nouveau visibles, conformément au comportement de 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 n'êtes pas encore familiarisé avec les définitions d'espace colorimétrique, de profil colorimétrique, de gamut, de large gamme et de profondeur de couleur, je vous recommande vivement de lire l'article de blog WebKit Improving Color on the Web (Améliorer la couleur sur le Web). Il explique en détail comment utiliser la requête média color-gamut pour diffuser des images à large gamme lorsque l'utilisateur se trouve sur des écrans à large gamme 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