Vaizdas vaizde: išsamus vaizdo perdangos diegimo vadovas

„Vaizdas vaizde“ (angl. Picture-in-Picture, PiP) tapo įprasta šiuolaikinių vaizdo įrašų atkūrimo funkcija. Nuo stalinių kompiuterių naršyklių iki mobiliųjų programėlių, PiP leidžia vartotojams atskirti vaizdo įrašą nuo pagrindinio konteksto ir perdengti jį ant kito turinio, taip sudarant sąlygas atlikti kelias užduotis vienu metu ir didinant vartotojų įsitraukimą. Šiame vadove pateikiama išsami PiP diegimo apžvalga, apimanti įvairias platformas, naršykles, API ir geriausias praktikas kūrėjams visame pasaulyje.

Kas yra „Vaizdas vaizde“ (PiP)?

„Vaizdas vaizde“ yra vartotojo sąsajos funkcija, leidžianti vaizdo įrašą rodyti slankiajame lange, kuris dažnai būna mažesnis už pradinį vaizdo įrašo elementą ir perdengia kitą turinį ekrane. Tai leidžia vartotojams toliau žiūrėti vaizdo įrašą ir tuo pačiu metu sąveikauti su kitomis programomis ar tinklalapiais. Įsivaizduokite tai kaip miniatiūrinį, visada viršuje esantį vaizdo grotuvą, kuris seka jus po jūsų skaitmeninę darbo erdvę.

„Vaizdas vaizde“ diegimo privalumai

• Patobulinta vartotojo patirtis: PiP suteikia vartotojams galimybę atlikti kelias užduotis vienu metu, nenutraukiant vaizdo įrašo peržiūros. Tai ypač naudinga mokomajam turiniui, pamokoms, naujienų transliacijoms ir pramogoms.
• Didesnis įsitraukimas: Leisdama vartotojams matyti vaizdo turinį sąveikaujant su kitomis programomis, PiP gali padidinti įsitraukimą ir laiką, praleistą platformoje.
• Pagerintas prieinamumas: PiP gali būti naudinga vartotojams, kuriems reikia remtis informacija iš kitų programų žiūrint vaizdo įrašą.
• Šiuolaikiška vartotojo sąsaja: PiP diegimas atitinka šiuolaikines vartotojo sąsajos tendencijas ir suteikia sudėtingesnę bei patogesnę vartotojo patirtį.

„Vaizdas vaizde“ funkciją palaikančios platformos ir naršyklės

PiP palaikymas yra prieinamas įvairiose platformose ir naršyklėse. Tačiau konkretus diegimas ir galimos funkcijos gali skirtis.

Stalinių kompiuterių naršyklės

• Google Chrome: „Chrome“ turi tvirtą PiP palaikymą per HTML5 vaizdo API.
• Mozilla Firefox: „Firefox“ taip pat siūlo integruotą PiP palaikymą.
• Safari: „Safari“ „macOS“ ir „iOS“ sistemose palaiko PiP žiniatinklio vaizdo įrašams.
• Microsoft Edge: Remiantis „Chromium“, „Edge“ palaiko PiP per HTML5 vaizdo API.

Mobiliosios platformos

• Android: „Android“ teikia integruotą PiP palaikymą programoms.
• iOS: „iOS“ taip pat palaiko PiP vaizdo turiniui programose.

„Vaizdas vaizde“ diegimas žiniatinklyje

Pagrindinis PiP diegimo žiniatinklyje metodas yra naudojant HTML5 vaizdo API. Ši API suteikia standartizuotą būdą valdyti vaizdo įrašų atkūrimą ir aktyvuoti PiP funkciją.

HTML5 vaizdo API

HTML5 vaizdo API apima `requestPictureInPicture()` metodą, kuris leidžia scenarijui programiškai prašyti PiP režimo vaizdo elementui. Tuomet naršyklė tvarko PiP lango sukūrimą ir valdymą.

Pavyzdys: pagrindinis PiP diegimas

Štai pagrindinis pavyzdys, kaip įdiegti PiP naudojant „JavaScript“ ir HTML5 vaizdo API:

<video id="myVideo" src="your-video.mp4" controls></video>
<button id="pipButton">Įjungti „Vaizdas vaizde“</button>

<script>
 const video = document.getElementById('myVideo');
 const pipButton = document.getElementById('pipButton');

 pipButton.addEventListener('click', async () => {
 try {
 if (document.pictureInPictureElement) {
 document.exitPictureInPicture();
 } else {
 await video.requestPictureInPicture();
 }
 } catch (error) {
 console.error('Klaida įjungiant „Vaizdas vaizde“:', error);
 }
 });
</script>

Paaiškinimas:

• HTML apima vaizdo elementą ir mygtuką, skirtą PiP aktyvuoti.
• „JavaScript“ kodas prideda įvykio klausytoją mygtukui.
• Paspaudus mygtuką, kodas patikrina, ar PiP elementas jau egzistuoja. Jei taip, jis išeina iš PiP režimo.
• Priešingu atveju, jis iškviečia `video.requestPictureInPicture()`, kad paprašytų PiP režimo.
• Įtrauktas klaidų tvarkymas, kad būtų galima sugauti bet kokias galimas problemas PiP inicijavimo metu.

Suderinamumas su įvairiomis naršyklėmis

Nors HTML5 vaizdo API suteikia standartizuotą sąsają, vis dar gali egzistuoti specifinių naršyklės niuansų. Svarbu išbandyti savo diegimą įvairiose naršyklėse, kad užtikrintumėte nuoseklų elgesį. Funkcijų aptikimas gali būti naudojamas norint sklandžiai tvarkyti atvejus, kai PiP nepalaikomas.

Pavyzdys: funkcijų aptikimas

if ('pictureInPictureEnabled' in document) {
 // PiP palaikomas
 const pipButton = document.getElementById('pipButton');
 pipButton.addEventListener('click', async () => {
 try {
 if (document.pictureInPictureElement) {
 document.exitPictureInPicture();
 } else {
 await video.requestPictureInPicture();
 }
 } catch (error) {
 console.error('Klaida įjungiant „Vaizdas vaizde“:', error);
 }
 });
} else {
 // PiP nepalaikomas
 document.getElementById('pipButton').style.display = 'none'; // Paslėpti mygtuką
 console.log('„Vaizdas vaizde“ nepalaikomas šioje naršyklėje.');
}

Šis kodo fragmentas patikrina, ar `document` objekte yra `pictureInPictureEnabled` savybė. Jei savybė egzistuoja, PiP yra palaikomas ir mygtukas įjungiamas. Priešingu atveju, mygtukas paslepiamas, o konsolėje užregistruojamas pranešimas.

PiP lango pritaikymas

Nors HTML5 vaizdo API pirmiausia tvarko PiP lango sukūrimą ir valdymą, kai kurios naršyklės gali suteikti ribotas galimybes pritaikyti lango išvaizdą ir elgseną. Šios parinktys dažnai yra specifinės naršyklei ir gali būti nepasiekiamos visose platformose.

Pavyzdžiui, kai kurios naršyklės gali leisti programiškai valdyti PiP lango dydį ir padėtį, o kitos gali palikti šiuos aspektus vartotojo pasirinkimui.

„Vaizdas vaizde“ diegimas mobiliosiose platformose

PiP diegimas mobiliosiose platformose paprastai apima platformai specifinių API naudojimą. Tiek „Android“, tiek „iOS“ teikia integruotą PiP palaikymą, tačiau diegimo detalės skiriasi.

„Android“ „Vaizdas vaizde“

„Android“ sistemoje PiP diegiamas naudojant `PictureInPictureParams` klasę ir `enterPictureInPictureMode()` metodą. Galite nurodyti PiP lango kraštinių santykį ir pradines ribas naudodami `PictureInPictureParams` objektą.

Pavyzdys: „Android“ PiP diegimas (supaprastintas)

// Kotlin pavyzdys
import android.app.PictureInPictureParams
import android.util.Rational

fun enterPipMode() {
 val aspectRatio = Rational(videoView.width, videoView.height)
 val params = PictureInPictureParams.Builder()
 .setAspectRatio(aspectRatio)
 .build()
 enterPictureInPictureMode(params)
}

Paaiškinimas:

• Kodo fragmentas apskaičiuoja vaizdo peržiūros kraštinių santykį.
• Jis sukuria `PictureInPictureParams` objektą su nurodytu kraštinių santykiu.
• Jis iškviečia `enterPictureInPictureMode()` su `PictureInPictureParams` objektu, kad įjungtų PiP režimą.

„iOS“ „Vaizdas vaizde“

„iOS“ sistemoje PiP pirmiausia tvarkomas `AVPictureInPictureController` klasės pagalba. Galite sukurti šios klasės egzempliorių ir susieti jį su `AVPlayerLayer`, kad įgalintumėte PiP funkciją.

Pavyzdys: „iOS“ PiP diegimas (supaprastintas)

// Swift pavyzdys
import AVKit

var pipController: AVPictureInPictureController?

func setupPip() {
 guard AVPictureInPictureController.isPictureInPictureSupported() else { return }
 pipController = AVPictureInPictureController(playerLayer: playerLayer)
 pipController?.delegate = self
 pipController?.start()
}

Paaiškinimas:

• Kodas patikrina, ar PiP palaikomas įrenginyje.
• Jis sukuria `AVPictureInPictureController` egzempliorių, susietą su `playerLayer`.
• Jis nustato valdiklio delegatą ir paleidžia PiP režimą.

Vartotojo patirties aspektai

Diegiant PiP, svarbu atsižvelgti į vartotojo patirtį. Štai keletas pagrindinių veiksnių, į kuriuos reikia atsižvelgti:

• Intuityvūs valdikliai: Pateikite aiškius ir intuityvius valdiklius PiP režimui įjungti ir išjungti. Naudokite standartines piktogramas ir etiketes, su kuriomis vartotojai yra susipažinę.
• Sklandus perėjimas: Užtikrinkite sklandų perėjimą tarp įprasto atkūrimo ir PiP režimo. Venkite staigių vaizdo dydžio ar padėties pokyčių.
• Pritaikymo parinktys: Leiskite vartotojams pritaikyti PiP lango dydį ir padėtį. Tai suteikia labiau personalizuotą patirtį.
• Konteksto suvokimas: Atsižvelkite į kontekstą, kuriame naudojamas PiP. Pavyzdžiui, galbūt norėsite automatiškai įjungti PiP režimą, kai vartotojas išeina iš vaizdo įrašo puslapio.
• Prieinamumas: Užtikrinkite, kad PiP langas būtų prieinamas vartotojams su negalia. Suteikite navigaciją klaviatūra ir ekrano skaitytuvo palaikymą.

Geriausios „Vaizdas vaizde“ diegimo praktikos

Štai keletas geriausių praktikų, kurių reikia laikytis diegiant PiP:

• Kai įmanoma, naudokite HTML5 vaizdo API: HTML5 vaizdo API suteikia standartizuotą ir suderinamą su įvairiomis naršyklėmis būdą diegti PiP žiniatinklyje.
• Mobiliosioms platformoms naudokite platformai specifines API: Mobiliosiose platformose pasinaudokite integruotomis PiP API, kurias teikia „Android“ ir „iOS“.
• Kruopščiai išbandykite: Išbandykite savo diegimą įvairiose naršyklėse, platformose ir įrenginiuose, kad užtikrintumėte nuoseklų elgesį.
• Sklandžiai tvarkykite klaidas: Įdiekite tinkamą klaidų tvarkymą, kad sugautumėte bet kokias galimas problemas PiP inicijavimo ar atkūrimo metu.
• Optimizuokite našumą: Užtikrinkite, kad PiP langas neigiamai nepaveiktų kitų programų ar tinklalapių našumo.
• Pateikite aiškias instrukcijas: Jei reikia, pateikite aiškias instrukcijas vartotojams, kaip naudoti PiP funkciją.

Pažangios „Vaizdas vaizde“ technikos

Be pagrindinio PiP diegimo, yra keletas pažangių technikų, kurios gali būti naudojamos siekiant pagerinti vartotojo patirtį:

Sinchronizuotas atkūrimas

Galite sinchronizuoti PiP vaizdo įrašo atkūrimą su kitu turiniu puslapyje. Pavyzdžiui, šalia vaizdo įrašo galite rodyti susijusią informaciją ar interaktyvius elementus.

Interaktyvūs PiP langai

Kai kurios platformos leidžia kurti interaktyvius PiP langus, kuriuose yra valdiklių ar kitų vartotojo sąsajos elementų. Tai gali būti naudojama siekiant suteikti labiau įtraukiančią patirtį.

Keli PiP langai

Nors tai rečiau pasitaiko, kai kurios programos gali palaikyti kelis PiP langus. Tai gali būti naudinga norint vienu metu rodyti kelias vaizdo transliacijas.

Iššūkiai ir svarstymai

Diegiant PiP gali kilti keletas iššūkių:

• Suderinamumas su naršyklėmis: Užtikrinti nuoseklų elgesį skirtingose naršyklėse gali būti sudėtinga dėl skirtingo HTML5 vaizdo API palaikymo lygio ir naršyklėms specifinių niuansų.
• Platformų fragmentacija: Mobiliosios platformos turi skirtingas PiP API, todėl reikalingi platformai specifiniai diegimai.
• Našumo optimizavimas: Norint išlaikyti optimalų našumą su PiP, ypač įrenginiuose su ribotais ištekliais, reikia kruopštaus optimizavimo.
• Vartotojo sąsajos dizainas: Sukurti intuityvią ir prieinamą vartotojo sąsają PiP gali būti sudėtinga, ypač atsižvelgiant į skirtingus ekrano dydžius ir įvesties metodus.
• Saugumo problemos: PiP diegimas gali sukelti saugumo problemų, jei tai daroma neatsargiai. Užtikrinkite, kad PiP langas būtų tinkamai izoliuotas („sandboxed“) ir kad vartotojo duomenys būtų apsaugoti.

Ateities „Vaizdas vaizde“ tendencijos

Tikėtina, kad ateityje PiP bus labiau integruojamas su kitomis technologijomis, tokiomis kaip papildytoji realybė (AR) ir virtualioji realybė (VR). Įsivaizduokite galimybę perdengti vaizdo transliaciją ant realaus pasaulio objekto arba peržiūrėti virtualią aplinką PiP lange.

Kita tendencija yra didėjantis PiP naudojimas bendradarbiavimo programose. Pavyzdžiui, vaizdo konferencijų įrankiai galėtų naudoti PiP, kad leistų vartotojams stebėti susitikimą dirbant su kitomis užduotimis.

Išvada

„Vaizdas vaizde“ yra galinga funkcija, galinti žymiai pagerinti vaizdo įrašų atkūrimo programų vartotojo patirtį. Suprasdami skirtingus diegimo metodus, platformas, naršykles ir API, kūrėjai gali sukurti sklandžias ir įtraukiančias PiP patirtis vartotojams visame pasaulyje. PiP toliau tobulėjant, jis vaidins vis svarbesnį vaidmenį ateityje vartojant vaizdo įrašus ir atliekant kelias užduotis vienu metu.

Šis vadovas pateikė išsamią PiP diegimo apžvalgą, apimančią įvairius aspektus nuo pagrindinių principų iki pažangių technikų. Laikydamiesi šiame vadove pateiktų geriausių praktikų, kūrėjai gali sukurti aukštos kokybės PiP patirtis, atitinkančias jų vartotojų poreikius.