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

Jad Joubran

Gepubliceerd: 4 maart 2025

De Document Picture-in-Picture API (Document PiP API) stelt webapplicaties in staat een zwevend venster te openen dat altijd bovenaan blijft staan ​​(een picture-in-picture-venster) en waarin willekeurige HTML-inhoud kan worden weergegeven.

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

Omdat de Document PiP API willekeurige HTML-inhoud kan weergeven, kunt u deze gebruiken om spannende nieuwe toepassingsmogelijkheden te ontdekken.

Browserondersteuning en progressieve verbetering

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

Dit zou je er echter niet van moeten weerhouden om het te gebruiken met progressieve verbetering of geleidelijke afname van de beeldkwaliteit .

Bij het plannen van je use case is het belangrijk om deze te beschouwen als een progressieve verbetering in plaats van een standaardfunctie. In dit artikel zie je een voorbeeld van graceful degradation.

De gebruikerservaring van de leerling verbeteren met de Document PiP API

LearnHTMLCSS.online is een interactief leerplatform dat semantische en toegankelijke HTML en CSS aanleert. Het biedt een interactieve teksteditor en een voorbeeldvenster voor de browser.

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 ziet de gebruiker de instructies van de uitdaging en kan hij/zij op het tabblad Browser klikken om een ​​live preview te bekijken.

Als student wil je misschien wel eens het voorbeeldvenster van je browser maximaliseren. Dit is een perfecte gelegenheid om ondersteuning voor de Document Picture-in-Picture API toe te voegen.

Om dit te implementeren, controleer eerst of de browser dit ondersteunt:

const isPipSupported = "documentPictureInPicture" in window;

Je kunt deze variabele nu gebruiken om documentPictureInPicture aanroepen te omwikkelen, of om vroegtijdig terug te keren uit een functie die afhankelijk is van Document PiP. De volgende code controleert of Document PiP wordt ondersteund 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 specifieke toepassing kunt u elke gewenste breedte en hoogte voor het venster opgeven. U kunt proberen een bepaald element, het huidige document of zelfs vaste waarden te evenaren.

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

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

Voor problemen met CSS-code is het ook nodig om de CSS te synchroniseren.

Dat is alles! Je hebt nu een maximalisatieknop waarmee je een apart PiP-venster kunt openen. Naast het maximaliseren van het browservoorbeeldvenster kun je het ook naar een apart scherm verplaatsen als je een externe monitor hebt, of zelfs de hoofdwebapplicatie en het browservoorbeeldvenster in een kolomindeling plaatsen.

Terugvaloptie

Houd er rekening mee dat deze API beperkt beschikbaar is. Op browsers en apparaten waar deze API niet wordt ondersteund, moet u een alternatieve oplossing (graceful degradation) implementeren.

In plaats van dat de maximalisatieknop het hele browservoorbeeldtabblad opent, kunnen we ervoor zorgen dat deze de resterende ruimte van de huidige webapplicatie inneemt.

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

Vergeet niet om op de kleine details in de tooltips te letten. Wanneer isPipSupported true is, schakelt de tooltip van de maximaliseer-/minimaliseerknop tussen 'Picture-in-Picture inschakelen' en 'Picture-in-Picture uitschakelen' . Wanneer isPipSupported daarentegen false is, wordt het alternatieve gedrag beschreven met 'Maximaliseren' en 'Minimaliseren' .

Zoals u ziet, kan de Document Picture-in-Picture API spannende nieuwe gebruiksmogelijkheden voor uw webapplicatie ontsluiten in combinatie met progressieve verbetering of graceful degradation.

Laat je niet beperken door de beperkte browserondersteuning en vergeet niet een degelijk alternatief te hebben.

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