Fermer

décembre 30, 2024

Premiers pas avec l’API Document Picture-in-Picture

Premiers pas avec l’API Document Picture-in-Picture


Explorez l’API Document Picture-in-Picture en détail et comment nous pouvons l’utiliser dans une application Web simple écrite en HTML, CSS et JavaScript simples.

Vous êtes-vous déjà demandé comment les applications Web peuvent créer du contenu flottant ? Eh bien, c’est grâce au API de document Picture-in-Picture (PIP). L’essence de cette API est d’améliorer l’expérience utilisateur. Il permet aux utilisateurs de choisir de consommer du contenu Web via une fenêtre flottante à partir d’un site Web qu’ils visitent tout en pouvant naviguer dans d’autres onglets ou applications du navigateur sur leur appareil.

Dans ce guide, nous explorerons cette API en détail. Nous commencerons par examiner son origine, son fonctionnement et comment nous pouvons l’utiliser dans une application Web simple écrite en HTML, CSS et JavaScript simples.

L’API Picture-in-Picture et l’API Document Picture-in-Picture

Le API Image dans l’image est le prédécesseur de l’API Document Picture-in-Picture, meilleure et plus améliorée. Même si elles sont toujours au-dessus des fenêtres flottantes, les premières présentaient une énorme limitation, à savoir le fait que la fenêtre flottante, une fois créée, ne pouvait contenir qu’un seul élément vidéo HTML (<video></video>), et manquait de personnalisation du style et de l’apparence pour répondre aux besoins du développeur.

La nouvelle API Document Picture-in-Picture permet au développeur de créer une fenêtre flottante et de personnaliser le contenu de cette fenêtre en fonction de ses besoins.

La fonction Fenêtre ouverte()

Bien que la fenêtre PIP flottante créée par l’API Document Picture-in-Picture puisse ressembler à quelque chose de nouveau, ce n’est pas le cas. Il repose sur une idée répandue à laquelle nous sommes habitués lors de la création d’applications Web quotidiennes : le fait qu’un contexte de navigation, c’est-à-dire une fenêtre ou un onglet, peut créer un autre contexte de navigation. En termes simples, une fenêtre A avec l’onglet A peut créer une nouvelle fenêtre B et/ou un nouvel onglet B.

La forme la plus simple est une balise d’ancrage qui peut être placée sur une page et, lorsque vous cliquez dessus, créer un nouvel onglet ou remplacer l’onglet actuel.

L’API Document Picture-in-Picture est basée sur l’API la plus avancée window.open() fonction qui fait la même chose en nous permettant de créer de nouveaux contextes de navigation dans le code par programmation. Nous avons plusieurs options lors de l’appel de cette fonction ; dans les cas typiques, nous appelons cette fonction pour effectuer les opérations suivantes :

  • Créez un nouveau contexte de navigation pour remplacer l’ancien, comme indiqué ci-dessous.
<body>
  <button id="btn">open new window</button>
  <script>
    btn.addEventListener("click", () => {
      window.open("http://localhost:5500/pip/pb.htm", "_self");
    });
  </script>
</body>

Dans l’exemple ci-dessus, nous remplaçons l’onglet actuel par du nouveau contenu, ce que nous faisons lors d’une navigation régulière avec des balises d’ancrage.

Remplacer l'onglet actuel

  • Créez un nouvel onglet et ajoutez-le à la fenêtre actuelle.

Création d'un nouvel onglet

  • Créez une nouvelle fenêtre distincte de celle dans laquelle nous parcourons actuellement, et c’est ce qu’est la fenêtre Document PIP, avec quelques différences cependant, comme nous le verrons. La page qui ouvre la nouvelle fenêtre peut également manipuler le contenu de la nouvelle fenêtre et ajouter du nouveau contenu ou le styliser, comme indiqué ci-dessous.
<h1 style="font-size: 100px">this will create a new window</h1>
<button id="btn">
  open <b> new window/tab</b> and chage its background color
</button>
<script>
  btn.addEventListener("click", () => {
    const newWindow = window.open(
      "http://127.0.0.1:5500/pip/page2.htm",
      "_blank",
      "width=800,height=500,popup=true,status=false,scrollbars=false,location=false"
    );
    setTimeout(() => {
      console.log(newWindow);
      newWindow.document.documentElement.style.backgroundColor = "red";
    }, 3000);
  });
</script>

Dans l’exemple ci-dessus, le script de la page crée une nouvelle fenêtre avec un onglet contenant une page chargée depuis http://127.0.0.1:5500/pip/page2.htm. Parce que la nouvelle page provient du même site, la fenêtre d’ouverture peut accéder à l’objet window de la nouvelle page et, dans notre cas, changer trivialement sa couleur d’arrière-plan en rouge après 3 secondes.

Créer une nouvelle fenêtre

J’ai testé dans Safari ; vous pouvez tester dans d’autres navigateurs comme Chrome ou Firefox et simplement afficher un nouvel onglet au lieu d’une nouvelle fenêtre. Ces navigateurs choisissent parfois de traiter les onglets comme des fenêtres.

L’API Document Picture-in-Picture présente quelques différences clés par rapport à l’API Document Picture-in-Picture. Window.open fonction:

  • La fenêtre nouvellement créée flotte au-dessus du navigateur de l’utilisateur dans une fenêtre séparée.
  • La fenêtre flottante n’a pas de barre d’adresse. Il contient déjà la même adresse que l’ouvre-porte (même origine) et ne peut pas être parcouru comme une fenêtre de navigateur classique.
  • La fermeture de la page qui a créé la fenêtre flottante ferme également la fenêtre PIP flottante.
  • La page/l’onglet qui a créé la fenêtre PIP ne peut pas spécifier où la fenêtre flottante apparaîtra. Ceci est pour des raisons de sécurité ; le navigateur prend cette décision.
  • Une seule fenêtre flottante PIP peut être active pour un onglet à la fois, donc si un utilisateur a créé la veuve flottante PIP sur l’onglet A dans son navigateur et qu’il ouvre l’onglet B et crée une autre fenêtre PIP, celle créée par A est fermée, et le nouveau sur B est ouvert.

L’API du document PIP est accessible via le window.documentPictureInPicture objet. Cet objet détient les propriétés nécessaires pour créer la fenêtre flottante et manipuler son contenu.

Ce que nous allons construire

L'application terminée

Comme indiqué ci-dessus, dans notre mini-application, nous avons un bouton qui, lorsque vous cliquez dessus, crée la fenêtre PIP et y insère les éléments image et vidéo. Lorsque nous fermons la fenêtre PIP, le contenu est restauré dans la fenêtre parent.

Tout le code que nous allons écrire sera dans un seul fichier HTML. Exécutez la commande suivante dans votre terminal pour créer le répertoire de travail :

mkdir test
cd test
touch index.html

Mettons maintenant à jour le index.html fichier avec le balisage de base dont nous aurons besoin.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="" rel="stylesheet" />
    <title>this is Picture-in-Picture api</title>
  </head>
  <body>
    <div id="playerContainer">
      <div id="player">
        <video
          id="video"
          width="300"
          src="https://videos.pexels.com/video-files/26711048/11990794_1440_2560_60fps.mp4"
          controls
        ></video>
      </div>
      <img
        src="https://media.istockphoto.com/id/474935824/photo/minions-toy-isolated-on-white-background.jpg?s=612x612&w=0&k=20&c=Hnb9mpoc6-_669mnUHGdH6_sOziBFTdvtzV0efW64IA="
        alt=""
        id="img"
      />
    </div>
    <button id="pipToggleButton">Open Picture-in-Picture window</button>
    <button id="hideBtn" style="display: none">close Picture-in-Picture</button>
    <script></script>
  </body>
</html>

Notez que nous avons attribué des identifiants à la plupart des éléments HTML. Cela signifie que nous pourrons utiliser ces identifiants comme variables dans notre script.

Si vous affichez ce fichier dans votre navigateur, il devrait ressembler à ceci :

La page Web

Nos balises de script sont vides pour l’instant. Dans les prochaines sections, nous mettrons à jour son contenu progressivement.

Création de la fenêtre Image dans l’image

let pipWindow;
pipToggleButton.addEventListener("click", async () => {
  
  if (!("documentPictureInPicture" in window)) {
    return;
  }
  pipWindow = await window.documentPictureInPicture.requestWindow({
    width: 400,
    height: 600,
  });
});

Lorsqu’un événement de clic se produit sur le bouton, pour des mesures de sécurité, nous vérifions si le navigateur prend en charge l’API PIP du document ; nous invoquons alors le window.documentPictureInPicture.requestWindow() fonction pour essayer d’afficher la fenêtre PIP. Cette fonction accepte plusieurs options, et nous avons précisé les dimensions de la fenêtre souhaitée.

Si la promesse est résolue avec succès, nous obtenons deux choses : d’abord, la fenêtre PIP est affichée, puis nous obtenons une référence au nouvel objet fenêtre. Nous avons stocké cette référence dans une variable appelée pipWindow.

Les dimensions de la fenêtre PIP sont à nouveau limitées pour des raisons de sécurité afin d’empêcher un attaquant de tromper l’utilisateur en l’incitant à interagir avec du contenu malveillant dans la nouvelle fenêtre. Ainsi, spécifier une valeur élevée qui dépasse les dimensions maximales autorisées ne fonctionnera pas.

Lorsque nous cliquons sur le bouton dans le navigateur, nous devrions voir la fenêtre PIP affichée comme indiqué ci-dessous. Notez également que cette fenêtre reste flottante même si nous réduisons notre navigateur. Nous voyons également cette fenêtre lorsque nous utilisons d’autres applications sur notre appareil.

Fenêtre PIP vide créée

Mettre des choses dans la fenêtre PIP

Mettons à jour le contenu du gestionnaire d’événements click.


pipWindow.document.body.append(player);
pipWindow.document.body.append(img);
pipWindow.document.documentElement.style.overflowX = "hidden";
pipWindow.document.body.style.backgroundColor = "gray";
pipToggleButton.style.display = "none";
hideBtn.style.display = "inline-block";

Pour l’instant, notre fenêtre PIP est vide. Pour le rendre utile, nous devons le remplir avec du contenu. La fenêtre peut être remplie avec n’importe quel contenu que vous avez généralement sur une page Web ordinaire, y compris le balisage, les scripts et le CSS.

Dans notre cas, nous avons ajouté notre video et image éléments dans le corps de la fenêtre en utilisant le nœud DOM normal append() fonction.

Nous avons également modifié les styles de nos boutons pour afficher uniquement le bouton qui ferme la fenêtre.

Nous pouvons également styliser cette fenêtre et son contenu à notre guise. Dans notre cas, nous avons simplement changé la couleur de fond. En regardant notre page, cela devrait ressembler à ceci :

Vidéo et image insérées dans la fenêtre PIP

Notez que nous les avons simplement déplacés vers la nouvelle fenêtre, donc l’ancienne fenêtre ne les a plus. Nous n’avons pas cloné les nœuds afin que, lorsqu’ils ferment éventuellement la fenêtre PIP, l’état des nœuds soit préservé sans altérer l’expérience de l’utilisateur. Par exemple, si nous devions cloner le video et placez-le dans la fenêtre PIP, cela signifierait que nous avons affaire à deux nœuds vidéo ; si l’utilisateur ferme la fenêtre PIP, la lecture devra être redémarrée sur la fenêtre principale car les deux nœuds vidéo sont distincts.

Fermeture et sortie de la fenêtre Picture-in-Picture

Il existe deux manières de fermer la fenêtre PIP. La première consiste à cliquer sur l’un de ses contrôles, et l’autre le fait par programme en appelant le paramètre de la fenêtre PIP. close() méthode.

Fermer la fenêtre PIP

Quelle que soit la méthode que nous choisissons lorsque nous fermons la fenêtre PIP, nous souhaitons généralement ramener tout ou partie de son contenu dans la fenêtre qui l’a créé. Allons-y et faisons-le

pipWindow.addEventListener("pagehide", () => {
  const allElementsInPipWindow = pipWindow.window.document.body.children;
  window.document.documentElement.append(...allElementsInPipWindow);
  hideBtn.style.display = "none";
  pipToggleButton.style.display = "inline-block";
  return;
});
hideBtn.addEventListener("click", () => {
  window.documentPictureInPicture.window.close();
  
  hideBtn.style.display = "none";
});

La fenêtre PIP a un pagehide événement qui nous permet de faire un peu de ménage. Lorsqu’il est fermé, nous enregistrons un rappel qui commence par récupérer tous les nœuds que nous avons ajoutés à son corps, puis les rajoute à la fenêtre parent.

Nous enregistrons également un click écouteur d’événements sur le close bouton pour appeler la fenêtre PIP close() méthode pour fermer la fenêtre par programme.

Conclusion

L’API Document PIP permet de créer des applications riches et hautement interactives. Ce guide nous montre comment utiliser cette API et l’idée qui la sous-tend ; j’espère qu’à l’avenir, nous pourrons utiliser cette API dans nos frameworks préférés pour créer des choses étonnantes.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link