Ontgrendel spannende gebruiksscenario's met de Document Picture-in-Picture API

Jad Joubran

Gepubliceerd: 4 maart 2025

Met de Document Picture-in-Picture API (Document PiP API) kunnen webapplicaties een zwevend venster dat altijd op de voorgrond staat openen (een picture-in-picture-venster) waarin willekeurige HTML-inhoud kan worden weergegeven.

Deze API bouwt voort op de Picture-in-Picture API voor <video> , waarmee u video in een PiP-venster kunt blijven gebruiken.

Omdat de Document PiP API elke willekeurige HTML-inhoud kan weergeven, kunt u deze gebruiken om spannende nieuwe gebruiksscenario's te ontgrendelen.

Browserondersteuning en progressieve verbetering

Browser Support

• 116
• 116
• x
• x

Source

Op het moment van schrijven is de Document Picture-in-Picture API beperkt beschikbaar.

Dit zou u er echter niet van moeten weerhouden om het te gebruiken met progressieve verbetering of sierlijke degradatie .

Zorg er bij het plannen van uw gebruiksscenario voor dat u deze als een progressieve verbetering beschouwt en niet als een standaardfunctie. In dit artikel zie je een voorbeeld van sierlijke degradatie.

Verbetering van de gebruikerservaring van de leerling met de Document PiP API

LearnHTMLCSS.online is een interactief leerplatform dat semantische en toegankelijke HTML en CSS leert. Het biedt een interactieve teksteditor en een browservoorbeeldvenster.

De volgende screencast toont de lay-out van de app; het scherm is verdeeld in twee kolommen. De eerste kolom bevat de code-editor. De tweede kolom bevat een lay-out met tabbladen. Standaard kan de gebruiker de instructies van de uitdaging zien en kan hij op het tabblad Browser klikken om een ​​live voorbeeld te bekijken.

Als student wil je soms het browservoorbeeldvenster maximaliseren. Dit is een perfecte gelegenheid om ondersteuning toe te voegen voor de Document Picture-in-Picture API.

Om dit te implementeren, begint u met het controleren op browserondersteuning:

const isPipSupported = "documentPictureInPicture" in window;

U kunt deze variabele nu gebruiken om documentPictureInPicture aanroepen af ​​te ronden, of om vroegtijdig terug te keren vanuit een functie die afhankelijk is van Document PiP. De volgende code controleert op ondersteuning van Document PiP en opent vervolgens een Document PiP-venster.

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

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

Afhankelijk van uw gebruikssituatie kunt u elke breedte en hoogte voor het venster opgeven. U kunt proberen een bepaald element of het huidige document te matchen, of zelfs vaste waarden opgeven.

Tot nu toe heb je een leeg document. U moet het nu vullen met inhoud.

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

Voor uitdagingen met CSS-code moet je ook de CSS synchroniseren.

Dat is het! U hebt nu een knop voor maximaliseren die in een apart PiP-venster wordt geopend. Naast het maximaliseren van het browservoorbeeldtabblad kunt u dit ook naar een apart scherm verplaatsen als u een externe monitor heeft, of zelfs de hoofdwebapp en het browservoorbeeldtabblad opnieuw indelen in een kolomindeling.

Terugval

Houd er rekening mee dat deze API een beperkte beschikbaarheid heeft. Op browsers en apparaten waarop deze API niet wordt ondersteund, moet u een fallback-gedrag (sierlijke degradatie) bieden.

In plaats van dat de knop Maximaliseren het hele browservoorbeeldtabblad eruit haalt, kunnen we ervoor zorgen dat het alle resterende ruimte van de huidige webapp in beslag neemt.

Probeer dit gedrag in verschillende browsers: https://learnhtmlcss.online/app.html?id=2096

Vergeet niet op de kleine details in de tooltips te letten. Wanneer isPipSupported true is, schakelt de tooltip van de knop Maximaliseren/minimaliseren tussen Picture-in-Picture invoeren en Picture-in-Picture afsluiten . Aan de andere kant, wanneer isPipSupported false is, wordt het terugvalgedrag beschreven met Maximize en Minimalize .

---

Zoals u kunt zien, kan de Document Picture-in-Picture API opwindende nieuwe gebruiksscenario's voor uw webapp ontgrendelen in combinatie met progressieve verbeteringen of sierlijke degradaties.

Laat je niet beperken door de beperkte browserondersteuning, en vergeet niet om een ​​goede fallback-use-case te hebben.

Bekijk de documentatie voor Document PiP om verschillende voorbeelden en gebruiksscenario's van deze API te verkennen.