Cette page a été traduite par l'API Cloud Translation.

Mises à jour multimédias dans Chrome 73

François Beaufort

Dans cet article, nous allons aborder les nouvelles fonctionnalités multimédias de Chrome 73, à savoir:

Les touches multimédias matérielles permettent désormais de contrôler la lecture des contenus multimédias sur ordinateur.
Les développeurs Web peuvent demander si une règle HDCP spécifique peut être appliquée.
Picture-in-picture automatique dans les PWA pour ordinateur et "Ignorer l'annonce" en Picture-in-picture arrivent bientôt en phase d'évaluation.
Les PWA de bureau bénéficient d'une lecture automatique avec son.

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 base du contenu multimédia, comme lecture/pause, piste précédente et suivante. Les casques en sont également équipés. Jusqu'à présent, les utilisateurs d'ordinateur ne pouvaient pas utiliser ces touches multimédias pour contrôler la lecture audio et vidéo dans Chrome. Cela change aujourd'hui !

Si l'utilisateur appuie sur la touche Pause, l'élément multimédia actif en cours de lecture dans Chrome être mis en veille et recevoir la mention "Mis en veille" : l'événement multimédia. Si vous appuyez sur la touche de lecture, l'élément multimédia précédemment mis en pause est réactivé et une "lecture" est déclenchée. médias . Cela fonctionne que Chrome soit au premier plan ou en arrière-plan.

Dans ChromeOS, les applications Android qui utilisent la priorité audio indiquent désormais à Chrome de mettre en pause et reprendre l'audio pour créer une expérience multimédia fluide entre les sites Web sur Chrome, Applications Chrome et Android. Cela n'est actuellement possible que sur ChromeOS un appareil équipé d'Android P.

En bref, il est recommandé 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 (elle n'était auparavant prise en charge que sur les mobiles), les développeurs Web peuvent gérer des événements associés, tels qu'un changement de titre déclenché par des touches multimédias. La 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 Lecture et Pause sont gérées automatiquement par Chrome. Toutefois, si le paramètre par défaut ne fonctionne pas, vous pouvez toujours définir des gestionnaires d'actions pour "lire" 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 pour les développeurs existante et essayez la documentation officielle Exemples de sessions.

Chromestatus Tracker | Bug Chromium

Médias chiffrés: vérification de la règle HDCP

Grâce à l'API HDCP Policy Check, les développeurs Web peuvent désormais demander si un une politique spécifique, par exemple L'exigence HDCP peut être appliquée avant d'envoyer une demande les licences Widevine et le chargement de 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 réelles du respect des règles peuvent ne sont pas disponibles sur certaines plates-formes. Par exemple, la vérification de la règle HDCP promet rejettera avec NotSupportedError sur Android et Android WebView.

Consultez notre précédente documentation pour les développeurs et essayez la version officielle exemple pour voir toutes les versions HDCP compatibles.

Projet de livraison | Chromestatus Tracker | Bug Chromium

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

Sur certaines pages, vous devrez peut-être insérer et quitter automatiquement le mode Picture-in-picture pour élément vidéo ; par exemple, les applications Web de visioconférence bénéficieraient d'une comportement automatique Picture-in-picture lorsque l'utilisateur passe de l'une à l'autre l'application Web et d'autres applications ou onglets. Malheureusement, cela n'est pas possible avec geste obligatoire de l'utilisateur. Voici la fonctionnalité Picture-in-picture automatique !

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

<video autopictureinpicture></video>

Fonctionnement approximatif:

Lorsque le document est masqué, l'élément vidéo dont le autopictureinpicture a été défini le plus récemment pour passer automatiquement en mode Picture-in-picture, si autorisé.
Lorsque le document devient visible, l'élément vidéo en mode Picture-in-picture le quitte automatiquement.

Et voilà ! Notez que la fonctionnalité Picture-in-picture automatique ne s'applique Progressive web apps (applications Web progressives) que les utilisateurs ont installées sur un ordinateur.

Consultez les spécifications pour en savoir plus et essayez la PWA officielle exemple.

Intention de test | Chromestatus Tracker | Bug Chromium

Phase d'évaluation pour l'option "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. Contenu les fournisseurs offrent souvent la possibilité d'ignorer l'annonce au bout de quelques secondes. Malheureusement, étant donné que la fenêtre Picture-in-picture n'est pas interactive, les utilisateurs qui regardent une vidéo Le Picture-in-picture ne peut pas le faire aujourd'hui.

L'API Media Session est désormais disponible sur ordinateur (compatible avec auparavant uniquement), une nouvelle action de session multimédia skipad peut être utilisée pour proposer cette fonctionnalité. en mode Picture-in-picture.

Bouton "Ignorer l'annonce" dans la fenêtre Picture-in-picture — </ph> "Ignorer l'annonce" dans la fenêtre Picture-in-picture

Pour fournir cette fonctionnalité, transmettez une fonction avec skipad lors de l'appel setActionHandler() Pour le masquer, transmettez null. Comme vous pouvez le lire ci-dessous, il 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 la fonctionnalité officielle "Ignorer l'annonce" exemple et nous expliquer comment cette fonctionnalité être améliorés.

Intention de test | Chromestatus Tracker | Bug Chromium

Lecture automatique autorisée pour les PWA de bureau

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

Bug Chromium