Mises à jour multimédias dans Chrome 73

François Beaufort
François Beaufort

Cet article présente les nouvelles fonctionnalités multimédias de Chrome 73:

Compatibilité avec les clés multimédias matérielles

De nos jours, de nombreux claviers disposent de touches permettant de contrôler les fonctions de lecture de contenus multimédias de base comme lecture/pause, titre précédent et suivant. Ils sont aussi disponibles sur les casques. Jusqu'à présent, les utilisateurs d'ordinateurs ne pouvaient pas utiliser ces touches multimédias pour contrôler la lecture audio et vidéo dans Chrome. Cela change aujourd'hui !

Touches multimédias du clavier
Touches multimédias du clavier

Si l'utilisateur appuie sur la touche Pause, l'élément multimédia actif en cours de lecture dans Chrome est mis en pause et reçoit un événement multimédia "paused". Si vous appuyez sur la touche de lecture, l'élément multimédia mis en pause précédemment est réactivé et reçoit un événement multimédia de lecture. Elle fonctionne, que Chrome soit au premier plan ou en arrière-plan.

Dans ChromeOS, les applications Android qui utilisent la priorité audio indiqueront désormais à Chrome de mettre en pause et de reprendre le son pour créer une expérience multimédia fluide entre les sites Web sur Chrome, les applications Chrome et les applications Android. Actuellement, cette fonctionnalité n'est disponible que sur les appareils ChromeOS exécutant Android P.

Pour résumer, les bonnes pratiques recommandent de toujours écouter ces événements médiatiques et d'agir en conséquence.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

Et ce n'est pas tout ! Avec l'API Media Session désormais disponible sur ordinateur (auparavant prise en charge sur mobile uniquement), les développeurs Web peuvent gérer les événements multimédias tels que la modification de piste déclenchée par des touches multimédias. Les événements previoustrack et nexttrack sont actuellement acceptés.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Les touches de lecture et de pause sont gérées automatiquement par Chrome. Toutefois, si le comportement par défaut ne vous convient pas, vous pouvez toujours définir des gestionnaires d'actions pour "lecture" et "pause" pour éviter cela.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Les clés multimédias matérielles sont compatibles avec ChromeOS, macOS et Windows. Linux viendra plus tard.

Consultez notre documentation destinée aux développeurs et essayez les exemples officiels de Media Session.

Outil de suivi de l'état de Chrome | Bug Chromium

Contenu multimédia chiffré: vérification du respect des règles HDCP

Grâce à l'API HDCP Policy Check, les développeurs Web peuvent désormais demander si une règle spécifique, telle que l'exigence HDCP, peut être appliquée avant de demander des licences Widevine et de charger des médias.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

L'API est disponible sur toutes les plates-formes. Toutefois, les vérifications de règle réelles peuvent ne pas être disponibles sur certaines plates-formes. Par exemple, la promesse de vérification des règles HDCP sera rejetée avec NotSupportedError sur Android et Android WebView.

Consultez notre ancienne documentation destinée aux développeurs et essayez l'exemple officiel pour voir toutes les versions HDCP compatibles.

Intention de livraison | Outil de suivi de l'état de Chrome | Bug Chromium

Phase d'évaluation pour la fonctionnalité Picture-in-picture automatique pour les PWA installées

Certaines pages peuvent souhaiter activer et quitter automatiquement le mode Picture-in-picture pour un élément vidéo. Par exemple, les applications Web de visioconférence bénéficieront d'un comportement Picture-in-picture automatique lorsque l'utilisateur passera de l'application Web à d'autres applications ou onglets. Ce n'est malheureusement pas possible avec l'exigence de geste de l'utilisateur. Voici donc la fonctionnalité Picture-in-picture automatique.

Pour permettre le changement d'onglet et d'application, un nouvel attribut autopictureinpicture est ajouté à l'élément <video>.

<video autopictureinpicture></video>

Voici comment cela fonctionne:

  • Lorsque le document est masqué, l'élément vidéo dont l'attribut autopictureinpicture a été défini le plus récemment passe automatiquement en Picture-in-picture, s'il est autorisé.
  • Lorsque le document devient visible, l'élément vidéo en Picture-in-picture le quitte automatiquement.

Voilà, c'est terminé ! Notez que la fonctionnalité Picture-in-picture automatique ne s'applique qu'aux progressive web apps (applications Web progressives) installées sur ordinateur par les utilisateurs.

Pour en savoir plus, consultez la spec et essayez à l'aide de l'exemple de PWA officiel.

Intention de test | Outil de suivi de l'état de Chrome | Bug Chromium

Phase d'évaluation pour ignorer l'annonce dans la fenêtre Picture-in-picture

Le modèle d'annonce vidéo se compose généralement d'annonces pré-roll. Les fournisseurs de contenu offrent souvent la possibilité d'ignorer l'annonce au bout de quelques secondes. Malheureusement, comme la fenêtre Picture-in-picture n'est pas interactive, les utilisateurs qui regardent une vidéo en mode Picture-in-picture ne peuvent pas le faire aujourd'hui.

Avec l'API Media Session désormais disponible sur ordinateur (auparavant prise en charge sur mobile uniquement), une nouvelle action de session multimédia skipad peut être utilisée pour proposer cette option en Picture-in-picture.

Bouton &quot;Ignorer l&#39;annonce&quot; dans la fenêtre Picture-in-picture
Bouton "Ignorer l'annonce" dans la fenêtre Picture-in-picture

Pour fournir cette fonctionnalité, transmettez une fonction avec skipad lorsque vous appelez setActionHandler(). Pour le masquer, transmettez null. Comme vous pouvez le lire ci-dessous, c'est assez simple.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

Essayez l'exemple officiel "Ignorer l'annonce" et indiquez-nous comment nous pourrions améliorer cette fonctionnalité.

Intention de test | Outil de suivi de l'état de Chrome | Bug Chromium

Lecture automatique autorisée pour les PWA de bureau

Maintenant que les progressive web apps sont disponibles sur toutes les plates-formes pour ordinateur, nous étendons la règle que nous avions mise en place sur mobile aux ordinateurs de bureau: la lecture automatique avec du son est désormais autorisée pour les PWA installées. Notez qu'il ne s'applique qu'aux pages du champ d'application du fichier manifeste de l'application Web.

Bug Chromium