Wat is Picture-in-Picture (PiP)?

Picture-in-Picture is een browserfunctie waarmee je een video uit het huidige tabblad in een klein zwevend venster kunt zetten dat boven alles op je scherm blijft. Je kunt het overal heen verplaatsen, het formaat wijzigen en blijven kijken terwijl je andere tabbladen bladert, documenten schrijft of iets anders op je computer doet — de video blijft de hele tijd zichtbaar.

PiP is ingebouwd in alle moderne desktopbrowsers (Chrome, Edge, Firefox, Safari) via een gestandaardiseerde web-API. Het vereist geen plugins of extensies, en het zwevende venster wordt volledig beheerd door het besturingssysteem, dus het blijft bestaan zelfs wanneer je van toepassing wisselt.

Gereedschapbeschrijving

Dit gereedschap laadt elke directe video-URL in een HTML5-speler en laat je deze met één klik in Picture-in-Picture-modus starten. Plak een link naar een openbaar toegankelijk videobestand, laad het en druk op "Picture-in-Picture starten" om de video in een zwevend overlay-venster los te koppelen.

Ondersteunde formaten

Elk videoformaat dat de native HTML5-speler van je browser ondersteunt:

  • MP4 (H.264 / H.265) — universeel ondersteund
  • WebM (VP8 / VP9 / AV1) — ondersteund in Chrome, Firefox, Edge
  • OGG / OGV (Theora) — ondersteund in Firefox en Chrome
  • MOV — ondersteund in Safari; beperkte ondersteuning elders
  • M4V — ondersteund in de meeste op Chromium gebaseerde browsers en Safari

Het videobestand moet via HTTP/HTTPS worden geserveerd en de server moet cross-origin-verzoeken (CORS) toestaan zodat de browser het kan laden.

Hoe het werkt

  1. De URL die je invoert, wordt geladen als de src van een standaard HTML5 <video>-element.
  2. Wanneer je op "Picture-in-Picture starten" klikt, roept de browser de native requestPictureInPicture()-API op dat element aan.
  3. De browser koppelt de video los in een zwevend venster dat door de OS-vensterbeheerder wordt beheerd.
  4. Als je op "Picture-in-Picture afsluiten" klikt (of op de sluitknop van het zwevende venster), roept het exitPictureInPicture() aan en keert de video terug naar de speler.

Functies

  • Picture-in-Picture starten en afsluiten met één klik rechtstreeks vanuit de browser — geen extensies nodig
  • Werkt met elke openbaar toegankelijke directe video-URL
  • 16:9 aspect ratio-speler met volledige native besturingselementen (afspelen, pauzeren, zoeken, volume, volledig scherm)
  • Start automatisch afspelen voordat Picture-in-Picture wordt geactiveerd, zodat de video niet bevriest
  • Detecteert of Picture-in-Picture niet wordt ondersteund in de huidige browser en toont een duidelijk bericht

Gebruiksscenario's

  • Bekijk een zelfstudie-video in een zwevend venster terwijl je meevolgt in een code-editor of ander browsertabblad
  • Controleer een livestream of opgenomen videofeed terwijl je in andere toepassingen werkt
  • Houd een videoverwijzing zichtbaar terwijl je documenten, spreadsheets of ontwerpbestanden bewerkt

Beperkingen

  • De videoserver moet toestaan dat het bestand van een ander domein wordt opgehaald (CORS-headers vereist). Veel CDN's en directe bestandshosts doen dit al; sommige niet.
  • Picture-in-Picture is niet beschikbaar in alle browsers — met name sommige mobiele browsers en oudere desktopversies ondersteunen de API niet.
  • Streamingplaylist-formaten zoals HLS (.m3u8) en DASH (.mpd) worden niet rechtstreeks ondersteund; alleen progressieve download-URL's werken.

Veelgestelde vragen

Waarom kan de video niet worden geladen? De server die de video host, bevat mogelijk niet de Access-Control-Allow-Origin-header die cross-origin laden toestaat, of de URL vereist mogelijk verificatie. Probeer een directe openbare link naar een videobestand.

Waarom is de Picture-in-Picture-knop uitgeschakeld? Je moet eerst een video laden door een URL in te voeren en op "Video laden" te klikken. De knop wordt actief zodra een bron is ingesteld.

Werkt dit op mobiel? De Picture-in-Picture-API heeft beperkte ondersteuning in mobiele browsers. Op iOS ondersteunt Safari Picture-in-Picture voor video's, maar het gedrag kan verschillen. Op Android kan Chrome het ondersteunen, afhankelijk van de versie en OS-instellingen.