Vad är Picture-in-Picture (PiP)?

Picture-in-Picture är en webbläsarfunktion som låter dig poppa ut en video från den aktuella fliken till ett litet flytande fönster som förblir överst på skärmen. Du kan flytta det var som helst, ändra storlek på det och fortsätta titta medan du bläddrar på andra flikar, skriver dokument eller gör något annat på datorn — videon förblir synlig hela tiden.

PiP är inbyggt i alla moderna skrivbordswebbläsare (Chrome, Edge, Firefox, Safari) genom ett standardiserat webb-API. Det kräver inga plugin eller tillägg, och det flytande fönstret hanteras helt av operativsystemet, så det kvarstår även när du byter program.

Verktygsbeskrivning

Det här verktyget laddar en direktvideo-URL in i en HTML5-spelare och låter dig starta den i Picture-in-Picture-läge med ett klick. Klistra in en länk till en offentligt tillgänglig videofil, ladda den och tryck på "Starta Picture-in-Picture" för att koppla bort videon till ett flytande överlagringsfönster.

Format som stöds

Alla videoformat som din webbläsares inbyggda HTML5-spelare stöder:

  • MP4 (H.264 / H.265) — universellt stödd
  • WebM (VP8 / VP9 / AV1) — stödd i Chrome, Firefox, Edge
  • OGG / OGV (Theora) — stödd i Firefox och Chrome
  • MOV — stödd i Safari; begränsat stöd på andra ställen
  • M4V — stödd i de flesta Chromium-baserade webbläsare och Safari

Videofilen måste serveras över HTTP/HTTPS och servern måste tillåta cross-origin-förfrågningar (CORS) för att webbläsaren ska kunna ladda den.

Hur det fungerar

  1. URL:en du anger läses in som src för ett standard-HTML5-<video>-element.
  2. När du klickar på "Starta Picture-in-Picture" anropar webbläsaren det inbyggda requestPictureInPicture()-API:et på det elementet.
  3. Webbläsaren kopplar bort videon till ett flytande fönster som hanteras av OS-fönsterhanteraren.
  4. Om du klickar på "Avsluta Picture-in-Picture" (eller stängningsknappen på det flytande fönstret) anropas exitPictureInPicture() och videon återgår till spelaren.

Funktioner

  • Starta och avsluta PiP med ett klick direkt från webbläsaren — inga tillägg behövs
  • Fungerar med alla offentligt tillgängliga direktvideo-URL:er
  • 16:9-bildförhållandespelare med fullständiga inbyggda kontroller (spela, pausa, söka, volym, helskärm)
  • Startar automatiskt uppspelning innan du går in i PiP så videon är inte frusen
  • Upptäcker om PiP inte stöds i den aktuella webbläsaren och visar ett tydligt meddelande

Användningsfall

  • Titta på en handledningsvideo i ett flytande fönster medan du följer med i en kodredigerare eller en annan webbläsarflik
  • Övervaka en livestream eller inspelad videofeed medan du arbetar i andra program
  • Håll en videoreferens synlig medan du redigerar dokument, kalkylblad eller designfiler

Begränsningar

  • Videoservern måste tillåta att filen hämtas från ett annat ursprung (CORS-huvuden krävs). Många CDN:er och direktfilvärdtjänster gör redan detta; vissa gör det inte.
  • PiP är inte tillgängligt i alla webbläsare — särskilt vissa mobila webbläsare och äldre skrivbordsversioner stöder inte API:et.
  • Strömningsplaylistformat som HLS (.m3u8) och DASH (.mpd) stöds inte direkt; endast progressiva nedladdnings-URL:er fungerar.

Vanliga frågor

Varför misslyckas videon att ladda? Servern som är värd för videon kanske inte innehåller Access-Control-Allow-Origin-huvudet som tillåter cross-origin-inläsning, eller URL:en kan kräva autentisering. Prova en direktöffentlig länk till en videofil.

Varför är PiP-knappen inaktiverad? Du måste ladda en video först genom att ange en URL och klicka på "Ladda video". Knappen blir aktiv när en källa är inställd.

Fungerar detta på mobil? Picture-in-Picture-API:et har begränsat stöd på mobila webbläsare. På iOS stöder Safari PiP för videor men beteendet kan skilja sig åt. På Android kan Chrome stödja det beroende på version och OS-inställningar.