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

Débloquez des cas d'utilisation intéressants avec l'API Picture-in-Picture pour les documents

Jad Joubran

Publié le 4 mars 2025

L'API Picture-in-Picture de document (API PiP de document) permet aux applications Web d'ouvrir une fenêtre flottante toujours en haut de l'écran (une fenêtre PiP) pouvant afficher n'importe quel contenu HTML arbitraire.

Cette API s'appuie sur l'API Picture-in-Picture pour <video>, qui vous permet de continuer à regarder des vidéos dans une fenêtre PiP.

Étant donné que l'API Picture-in-picture pour les documents peut afficher n'importe quel contenu HTML arbitraire, vous pouvez l'utiliser pour découvrir de nouveaux cas d'utilisation intéressants.

Prise en charge des navigateurs et amélioration progressive

Browser Support

Source

Au moment de la rédaction de cet article, l'API Picture-in-Picture pour les documents est disponible de manière limitée.

Toutefois, cela ne vous empêche pas de l'utiliser avec l'amélioration progressive ou la dégradation élégante.

Lorsque vous planifiez votre cas d'utilisation, veillez à le traiter comme une amélioration progressive plutôt que comme une fonctionnalité standard. Cet article présente un exemple de dégradation élégante.

Améliorer l'expérience utilisateur de l'apprenant avec l'API Picture-in-picture pour les documents

LearnHTMLCSS.online est une plate-forme d'apprentissage interactive qui enseigne le HTML et le CSS sémantiques et accessibles. Il propose un éditeur de texte interactif et une fenêtre d'aperçu du navigateur.

La vidéo suivante montre la mise en page de l'application. L'écran est divisé en deux colonnes. La première colonne contient l'éditeur de code. La deuxième colonne contient une mise en page avec onglets. Par défaut, l'utilisateur peut voir les instructions du défi et cliquer sur l'onglet Navigateur pour afficher un aperçu en direct.

En tant qu'étudiant, vous pouvez parfois souhaiter maximiser la fenêtre d'aperçu du navigateur. C'est l'occasion idéale d'ajouter la compatibilité avec l'API Picture-in-Picture de Document.

Pour ce faire, commencez par vérifier la compatibilité du navigateur:

const isPipSupported = "documentPictureInPicture" in window;

Vous pouvez désormais utiliser cette variable pour encapsuler tous les appels documentPictureInPicture ou pour renvoyer un retour anticipé à partir d'une fonction qui s'appuie sur le mode PiP du document. Le code suivant vérifie la prise en charge de la PiP de document, puis ouvre une fenêtre de PiP de document.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

Selon votre cas d'utilisation, vous pouvez spécifier n'importe quelle largeur et hauteur pour la fenêtre. Vous pouvez essayer de faire correspondre un élément particulier, le document actuel ou même fournir des valeurs fixes.

Pour le moment, votre document est vide. Vous devez maintenant y insérer du contenu.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

En cas de problème avec le code CSS, vous devrez également synchroniser le CSS.

Et voilà ! Un bouton de maximiser s'affiche désormais et s'ouvre dans une fenêtre PIP distincte.En plus de maximiser l'onglet d'aperçu du navigateur, vous pouvez également le déplacer vers un écran distinct si vous disposez d'un moniteur externe, ou même réorganiser l'application Web principale et l'onglet d'aperçu du navigateur dans une mise en page en colonnes.

Action de remplacement

N'oubliez pas que cette API est disponible dans un nombre limité de pays. Sur les navigateurs et les appareils où cette API n'est pas prise en charge, vous devez fournir un comportement de remplacement (dégradation élégante).

Au lieu de faire sortir l'intégralité de l'onglet d'aperçu du navigateur avec le bouton de maximiser, nous pouvons le faire occuper tout l'espace restant de l'application Web actuelle.

Essayez ce comportement dans différents navigateurs: https://learnhtmlcss.online/app.html?id=2096

N'oubliez pas de prêter attention aux petits détails dans les info-bulles. Lorsque isPipSupported est défini sur true, l'info-bulle du bouton de maximiser/réduire bascule entre Activer le mode Picture-in-picture et Désactiver le mode Picture-in-picture. En revanche, lorsque isPipSupported est false, le comportement de remplacement est décrit avec Maximize (Maximiser) et Minimize (Réduire).

Comme vous pouvez le constater, l'API Picture-in-Picture pour les documents peut ouvrir de nouveaux cas d'utilisation intéressants pour votre application Web lorsqu'elle est combinée à l'amélioration progressive ou à la dégradation élégante.

Ne vous laissez pas limiter par la compatibilité limitée des navigateurs et n'oubliez pas de prévoir un cas d'utilisation de secours approprié.

Consultez la documentation sur le mode PiP pour les documents pour découvrir divers exemples et cas d'utilisation de cette API.