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 Document Picture-in-Picture (API Document PIP) permet aux applications Web d'ouvrir une fenêtre flottante toujours au premier plan (une fenêtre Picture-in-picture) pouvant afficher n'importe quel contenu HTML.

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.

Comme l'API Document PiP peut afficher n'importe quel contenu HTML, vous pouvez l'utiliser pour débloquer de nouveaux cas d'utilisation intéressants.

Prise en charge des navigateurs et amélioration progressive

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

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

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

Améliorer l'expérience utilisateur de l'apprenant avec l'API Document PiP

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, dont 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 à 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'élève, vous pouvez parfois souhaiter agrandir 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 les appels documentPictureInPicture ou pour effectuer un retour anticipé à partir d'une fonction qui repose sur le Picture-in-Picture de document. Le code suivant vérifie la compatibilité avec le mode PIP pour les documents, puis ouvre une fenêtre PIP pour les documents.

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 l'instant, votre document est vide. Vous devez maintenant l'alimenter en 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à ! Vous disposez désormais d'un bouton "Agrandir" qui ouvre une fenêtre PIP distincte.En plus d'agrandir 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 colonne.

Action de remplacement

N'oubliez pas que la disponibilité de cette API est limitée. Sur les navigateurs et appareils où cette API n'est pas prise en charge, vous devrez fournir un comportement de secours (dégradation progressive).

Au lieu de faire en sorte que le bouton "Agrandir" extraie l'intégralité de l'onglet de prévisualisation du navigateur, nous pouvons faire en sorte qu'il occupe tout l'espace restant de l'application Web actuelle.

Testez 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 "Agrandir/Réduire" bascule entre Passer en mode Picture-in-picture et Quitter le mode Picture-in-picture. En revanche, lorsque isPipSupported est défini sur false, le comportement de secours est décrit avec Maximize et Minimize.

Comme vous pouvez le constater, l'API Document Picture-in-Picture peut débloquer 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 correct.

Consultez la documentation sur le Picture-in-picture de document pour découvrir différents exemples et cas d'utilisation de cette API.