Mikä on Picture-in-Picture (PiP)?

Picture-in-Picture on selainominaisuus, jonka avulla voit avata videon nykyisestä välilehdestä pieneen kelluvan ikkunaan, joka pysyy kaiken muun päällä näytölläsi. Voit siirtää sitä mihin tahansa, muuttaa sen kokoa ja jatkaa katselua samalla kun selaat muita välilehtiä, kirjoitat asiakirjoja tai teet mitä tahansa muuta tietokoneellasi – video pysyy näkyvissä koko ajan.

PiP on sisäänrakennettu kaikkiin moderneihin työpöytäselaimiin (Chrome, Edge, Firefox, Safari) standardoidun web-API:n kautta. Se ei vaadi liitännäisiä tai laajennuksia, ja kelluva ikkuna hallinnoidaan kokonaan käyttöjärjestelmän toimesta, joten se säilyy jopa kun vaihdat sovelluksia.

Työkalun kuvaus

Tämä työkalu lataa minkä tahansa suoran videon URL-osoitteen HTML5-soittimeen ja antaa sinun käynnistää sen Picture-in-Picture-tilassa yhdellä napsautuksella. Liitä linkki julkisesti saatavilla olevaan videotiedostoon, lataa se ja paina "Käynnistä Picture-in-Picture" irrottaaksesi videon kelluvan päällekkäisen ikkunan.

Tuetut muodot

Mikä tahansa videomuoto, jonka selaimesi alkuperäinen HTML5-soitin tukee:

  • MP4 (H.264 / H.265) — universaalisti tuettu
  • WebM (VP8 / VP9 / AV1) — tuettu Chromessa, Firefoxissa ja Edgessa
  • OGG / OGV (Theora) — tuettu Firefoxissa ja Chromessa
  • MOV — tuettu Safarissa; rajoitettu tuki muualla
  • M4V — tuettu useimmissa Chromium-pohjaisissa selaimissa ja Safarissa

Videotiedosto on oltava jaettu HTTP/HTTPS-protokollan kautta ja palvelimen on sallittava cross-origin-pyynnöt (CORS), jotta selain voi ladata sen.

Kuinka se toimii

  1. Antamasi URL-osoite ladataan vakio-HTML5-<video>-elementin src-attribuuttiin.
  2. Kun napsautat "Käynnistä Picture-in-Picture", selain kutsuu kyseisen elementin alkuperäistä requestPictureInPicture() API:a.
  3. Selain irrottaa videon kelluvan ikkunaan, jonka hallinnoi käyttöjärjestelmän ikkunanhallinta.
  4. "Poistu Picture-in-Picture-tilasta" -painikkeen napsauttaminen (tai kelluvan ikkunan sulkemispainike) kutsuu exitPictureInPicture() -funktiota ja palauttaa videon soittimeen.

Ominaisuudet

  • Yksinkertainen PiP-käynnistys ja poistuminen suoraan selaimesta – laajennuksia ei tarvita
  • Toimii minkä tahansa julkisesti saatavilla olevan suoran videon URL-osoitteen kanssa
  • 16:9-kuvasuhteen soitin, jossa on kaikki alkuperäiset ohjaimet (toisto, tauko, siirtyminen, äänenvoimakkuus, kokoruutu)
  • Aloittaa toiston automaattisesti ennen PiP-tilaan siirtymistä, joten video ei jää paikoilleen
  • Havaitsee, jos PiP ei ole tuettu nykyisessä selaimessa, ja näyttää selkeän viestin

Käyttötapaukset

  • Katso opetusvideoita kelluvan ikkunan kautta samalla kun seuraat koodin muokkausta tai toista selaimen välilehteä
  • Valvo live-striimia tai tallennettua videosyötettä samalla kun työskentelet muissa sovelluksissa
  • Pidä videoviite näkyvissä asiakirjoja, laskentataulukoita tai suunnittelutiedostoja muokatessasi

Rajoitukset

  • Videopalvelimen on sallittava tiedoston noutaminen eri alkuperästä (CORS-otsikot vaaditaan). Monet CDN:t ja suorat tiedostopalvelimet tekevät tämän jo; jotkut eivät.
  • PiP ei ole saatavilla kaikissa selaimissa – erityisesti jotkut mobiiliselaimet ja vanhemmat työpöytäversiot eivät tue API:a.
  • Striimaussoittolistojen muodot, kuten HLS (.m3u8) ja DASH (.mpd), eivät ole suoraan tuettuja; vain progressiivisen latauksen URL-osoitteet toimivat.

Usein kysytyt kysymykset

Miksi video ei lataudu? Videota isännöivä palvelin ei ehkä sisällä Access-Control-Allow-Origin-otsikkoa, joka sallii cross-origin-latauksen, tai URL-osoite saattaa vaatia todennusta. Kokeile suoraa julkista linkkiä videotiedostoon.

Miksi PiP-painike on poistettu käytöstä? Sinun on ensin ladattava video antamalla URL-osoite ja napsauttamalla "Lataa video". Painike aktivoituu, kun lähde on asetettu.

Toimiiko tämä mobiililaitteilla? Picture-in-Picture API:lla on rajoitettu tuki mobiiliselaimissa. iOS:ssä Safari tukee PiP:ää videoille, mutta käyttäytyminen voi poiketa. Androidissa Chrome saattaa tukea sitä versiosta ja käyttöjärjestelmän asetuksista riippuen.