MousePlayer nähili işleýär
Yzarlama arhitekturamyz, enjamlar boýunça ekran ölçegleri we ulgam çäkleri barada ýönekeý gollanma.
1. Näme üçin wideo ýazgysyny ulanmaýarys
Görünýän seljeriş gurallary myhmanyň ekranyny adaty wideo faýllaryna (MP4 ýa-da WebM ýaly) ýazýar diýen düşünje giňden ýaýran. Bu örän köp tor geçirijiligini sarp ederdi, websaýtyňyzy düýpli haýalladardy we teksti bulaşyk, okap bolmaýan ederdi.
Munuň ýerine MousePlayer ýeňil tehnologiýa ulanýar, ol DOM surat telemetriýasy diýlip atlandyrylýar. Esasy işleýşi şeýle:
Düzülişiň suraty
Myhman sahypaňyzy açanda, skriptimiz HTML we stil gurluşyňyzyň tekst esasly “çyzgysyny” alýar. Sahypaňyzyň surat ýa-da wideo faýllaryny göçürmezden elementleriň ýerleşişini ýazýar; pleýer gaýtadan görkezilende suratlary asyl salgysyndan ýükleýär. Kadadan çykma canvas elementleridir, olaryň mazmuny surat hökmünde iberilýär (aşakda serediň).
Koordinata telemetriýasy
Ulanyjy hereket edende waka akymyny ýazýarys: syçanjyk orunlary, süýşürme çuňlugy, basylan nyşanalar we brauzeriň ölçeg üýtgeşmeleri, şeýle hem sahypanyň öz üýtgeşmeleri we sazlamalara baglylykda konsol habarlary, şowsuz ýa-da haýal haýyşlar we ýükleme wagt ölçegleri (Web Vitals). Hereketler we basyşlar kiçi; sahypa suratlary we üýtgeşmeleri sahypa baglylykda has uly bolup biler we gysylan görnüşde iberilýär.
Teatr görnüşinde gaýtadan görkezmek
Dolandyryş paneliňizde sessiýa seredeniňizde, pleýerimiz ýazylan çyzgydan sahypany täzeden döredýär we üstünde wirtual görkezijini hakyky wagtda hereketlendirýär, tekst bolsa örän aýdyň galýar.
Ýeňil galmak üçin döredilen: skript asinkron ýüklenýär we wideonyň ýerine kiçi san maglumatlaryny iberýär, bu onuň öz agramyny az saklaýar. Munuň Core Web Vitals görkezijileriňize täsiri sahypalaryňyza, hostingiňize we myhmanyň toruna bagly, şonuň üçin bizden bir san almagyň ýerine öz saýtyňyzda ölçäň. Hiç bir anyk ýükleme tizligi kepillendirilmeýär – 20-nji bölüme serediň: Hyzmat şertleri.
2. Ekran ölçegleri & mobil enjamlar
Häzirki ulanyjylar kiçi smartfonlardan örän giň 4K kompýuter monitorlaryna çenli dürli enjamlarda gezýär. Websaýtlar dürli ekran inlerine laýyk bolmak üçin düzülişlerini awtomatik süýşürýär, ýygnaýar we täzeden ýerleşdirýär — bu uýgunlaşýan web dizaýny diýlip atlandyrylýar.
Myhmanyň takyk görünýän meýdanyny nähili gabatlaşdyrýarys
Gaýtadan görkezilişiň ýoýulmazlygy üçin MousePlayer myhmanyň takyk görünýän meýdan ölçeglerini ýazýar (mysal üçin 390x844 smartfon üçin ýa-da 1920x1080 kompýuter monitory üçin). Teatr pleýerini açanyňyzda, hereketlendirijimiz myhmanyň asyl ekran gatnaşygyny takyk gaýtalaýan ölçegli çäklendirilen gurşaw döredýär.
Stol & noutbuk ekranlary
Adaty kompýuterlerde şol bir brauzer sessiýasynyň içindäki üznüksiz syçanjyk hereketini we köp goýma nawigasiýasyny ýazýarys. Görkeziji üstüne baranda açylýan menýular sahypa şonda resminamasyny üýtgedýän bolsa gaýtadan görkezilişde görünýär; diňe CSS hover täsiri resminamada görünmeýär we ýazgyda gaýtalanmaýar.
Smartfonlar & planşetler
Sensor ekranlarda üstünde gezýän syçanjyk görkezijisi ýok. MousePlayer degme hereketlerini, süýşürmeleri we ugur çalşyklaryny (dik ýa-da kese) ýazmak arkaly awtomatik uýgunlaşýar.
Sessiýanyň ortasynda ölçeg üýtgetmegiň kynçylygy
Myhman sessiýanyň ortasynda planşetini öwürse ýa-da kompýuter brauzeriniň penjiresiniň ölçegini üýtgetse, websaýtyň düzülişi dinamiki üýtgeýär. MousePlayer bu penjire ölçeg wakalaryny ýazýar we hereketiň kontekstini saklamak üçin görkeziliş meýdanyny şol bada bökdençsiz sazlaýar.
3. Ulgam çäkleri & tehniki serhetler
Ulanyjy gizlinligine hormat goýmak, brauzer howpsuzlygyny saklamak we maglumat işlemegi çalt etmek üçin MousePlayer kesgitli tehniki çäklerde işleýär:
| Ulgam çägi | MousePlayer muny nähili çözýär |
|---|---|
| iFrames | Sahypaňyz bilen şol bir çeşmeli iframe-lar mazmuny we içindäki hereketler bilen bilelikde ýazylýar. Başga çeşmäniň ýerleşdirilen mazmuny (mysal üçin YouTube pleýerleri, Stripe töleg formalary) brauzeriň howpsuzlyk düzgünleri (Same-Origin Policy) sebäpli içinden ýazylyp bilinmeýär; gaýtadan görkezilişde orun tutujy hökmünde görünýär we şol ýerde ýüklenmeýär. |
| Duýgur giriş meýdanlary (PII) | Parol we töleg meýdanlary her gizleme derejesinde myhmanyň enjamynda gizlenýär we ähli forma girişini doly gizlemek her emläk üçin adaty sazlamadyr. Ýazylandygyny görýärsiňiz, näme ýazylandygyny däl. Iki çäk bar: has gowşak iki gizleme derejesi diňe ýazmaça tassyklamamyza görä açylýar we gizlemek öz sahypaňyzyň resminama çykarýan mazmunyna ýetmeýär – salgy görkezýän tassyklama sahypasy suratyň bir bölegidir. Ikisi hem şu ýerde düşündirilýär: DPA. |
| Canvas & WebGL elementleri | Canvas mazmuny surat hökmünde ýazylýar: sahypanyň suraty bilen bir gezek, soň üýtgände ýene, iň köp takmynan sekuntda bir gezek we ölçeg çägi bilen. Şonuň üçin ýumşak animasiýalar kadr yzygiderliligi ýaly görünýär. Gizlenen ýerlerde ýa-da başga çeşmäniň suratlaryny öz içine alýan canvas elementlerinde surat iberilmeýär; WebGL mazmuny boş galyp biler. |
| Web komponentleri (Shadow DOM) | Açyk shadow root-lar mazmuny bilen bilelikde ýazylýar. Ýapyk shadow root-lara skriptler girip bilmeýär; olaryň mazmuny gaýtadan görkezilişde ýok. |
| Geçiriş & brauzer ammary | Maglumatlar şifrlenen WebSocket birikmesi (HTTPS/WSS) arkaly iberilýär. Birikme döredilip bilinmese, mysal üçin proksi sebäpli, skript şifrlenen HTTP ýoluna geçýär; örän uly sahypa suratlary HTTPS arkaly aýratyn ýüklenýär. MousePlayer kuki goýmaýar; saýtyňyzda brauzeriň local storage we session storage ammarlaryny ulanýar. |
| Işjeň däl AFK döwürleri | Myhman goýmasyny açyk goýup, 20 minut gitse, hereketlendirijimiz işjeňsizligi awtomatik tapýar we hereketsiz ekranlara seredip wagt ýitirmezligiňiz üçin gaýtadan görkezilişde boş aralygy gysgaldýar. |