MousePlayer хэрхэн ажилладаг вэ
Манай хяналтын бүтэц, төхөөрөмж хооронд дэлгэцийн нягтаршлыг боловсруулах байдал болон системийн хил хязгаарын энгийн заавар.
1. Бид яагаад видео бичлэг ашигладаггүй вэ
Харааны шинжилгээний хэрэгслүүд зочны дэлгэцийн стандарт видео файл (MP4 эсвэл WebM зэрэг) бичдэг гэсэн түгээмэл буруу ойлголт бий. Ингэвэл асар их зурвасын өргөн зарцуулж, вэбсайтыг тань эрс удаашруулж, бүдэг, уншигдахгүй текст үүсгэнэ.
Үүний оронд MousePlayer нь дараах нэртэй хөнгөн технологи ашигладаг: DOM агшин зургийн телеметр. Үндсэн зарчим нь дараах байдалтай:
Бүтцийн агшин зураг
Зочин таны хуудсыг нээхэд манай скрипт HTML болон загварын бүтцийн текстэн «зураглал» авна. Хуудасны зураг, видео файлыг хуулахгүйгээр элементүүдийн байрлалыг бүртгэнэ. Дахин тоглуулах үед тоглуулагч зургуудыг анхны хаягаас нь ачаална. Үүнд canvas элементүүд үл хамаарах бөгөөд агуулгыг нь зураг хэлбэрээр дамжуулна (доор үзнэ үү).
Координатын телеметр
Хэрэглэгч харилцах үед бид үйл явдлын урсгалыг бүртгэнэ: хулганы байрлал, гүйлгэлтийн гүн, товшилтын бай, хөтчийн хэмжээний өөрчлөлт, мөн хуудасны өөрчлөлт болон тохиргооноос хамааран консолын мэдэгдэл, амжилтгүй эсвэл удаан хүсэлт, ачаалах хугацааны хэмжилтүүд (Web Vitals). Хөдөлгөөн, товшилт бага хэмжээтэй. Харин хуудасны агшин зураг болон өөрчлөлт нь хуудсаас хамааран нэлээд том байж болох бөгөөд шахаж дамжуулдаг.
Theatre дахин тоглуулалт
Хяналтын самбараас сеанс үзэхэд манай тоглуулагч бүртгэсэн зураглалаар хуудсыг дахин бүтээж, виртуал курсорыг бодит цагаар хөдөлгөнө. Текст маш тод хэвээр байна.
Хөнгөн байхаар бүтээсэн: скрипт асинхроноор ачаалж, видеоны оронд жижиг тоон өгөгдлийн цэгүүд дамжуулдаг тул өөрийн ачааллыг бага байлгана. Энэ нь Core Web Vitals-д хэрхэн нөлөөлөх нь таны хуудас, хостинг болон зочны сүлжээнээс хамаарна. Тиймээс манай тоонд итгэхийн оронд өөрийн сайт дээр хэмжинэ үү. Тодорхой ачаалах хурдыг баталгаажуулахгүй – 20-р заалтыг дараахаас үзнэ үү: Үйлчилгээний нөхцөл.
2. Дэлгэцийн нягтаршил & мобайл төхөөрөмж
Өнөөдрийн хэрэглэгчид авсаархан ухаалаг утаснаас эхлээд хэт өргөн 4K суурин дэлгэц хүртэл бүхий л төхөөрөмжөөр хөтөлдөг. Вэбсайтууд дэлгэцийн янз бүрийн өргөнд тааруулан байрлалаа автоматаар зөөж, нугалж, дахин зохион байгуулдаг. Үүнийг зохицох вэб загвар гэж нэрлэдэг.
Зочны яг тэр харагдах талбайг хэрхэн тааруулдаг вэ
Дахин тоглуулалт гажихгүй байлгахын тулд MousePlayer зочны харагдах талбайн яг хэмжээг бүртгэдэг (ж.нь. 390x844 ухаалаг утсанд, эсвэл 1920x1080 суурин дэлгэцэд). Theatre тоглуулагчийг нээхэд хөдөлгүүр зочны анхны дэлгэцийн харьцааг яг тусгасан масштабтай тусгаарласан орчин үүсгэнэ.
Суурин компьютер & зөөврийн компьютерын дэлгэц
Ердийн компьютерт ижил хөтчийн сеанс дотор тасралтгүй хулганы хөдөлгөөн болон олон табын чиглүүлэлтийг бүртгэнэ. Хулгана аваачихад нээгдэх цэс тухайн үйлдлээр хуудас баримтаа өөрчилдөг бол дахин тоглуулалтад харагдана. Зөвхөн CSS-ийн hover нөлөө баримтад харагдахгүй тул дахин тоглуулалтад сэргээхгүй.
Ухаалаг утас & таблет
Мэдрэгчтэй дэлгэц хулгана аваачих курсоргүй. MousePlayer хүрэлт, шударч гүйлгэх болон чиглэлийн өөрчлөлт (босоо ба хэвтээ)-ийг бүртгэж автоматаар зохицно.
Сеансын дунд хэмжээ өөрчлөх сорилт
Зочин сеансын дунд таблетаа эргүүлэх эсвэл суурин компьютерын хөтчийн цонхны хэмжээг өөрчлөхөд вэбсайтын байрлал динамикаар өөрчлөгдөнө. MousePlayer эдгээр цонхны хэмжээ өөрчлөх үйл явдлыг бүртгэж, тоглуулах талбайг тэр даруй тасралтгүй тааруулан харилцан үйлдлийн нөхцөлийг хадгална.
3. Системийн хязгаар & техникийн хил зааг
Хэрэглэгчийн нууцлал, хөтчийн аюулгүй байдал болон өгөгдөл боловсруулах хурдыг хангахын тулд MousePlayer тодорхой техникийн хил хязгаарт ажилладаг:
| Системийн хил хязгаар | MousePlayer хэрхэн боловсруулдаг вэ |
|---|---|
| iFrames | Танай хуудастай ижил гаралтай iframe-үүдийг агуулга болон доторх харилцан үйлдэлтэй нь хамт бүртгэнэ. Өөр гаралтай суулгасан агуулгыг (ж.нь. YouTube тоглуулагч, Stripe төлбөрийн маягт) хөтчийн аюулгүй байдлын бодлогоор (Same-Origin Policy) дотроос нь бүртгэх боломжгүй. Дахин тоглуулалтад орлуулагч хэлбэрээр харагдаж, тэнд ачаалахгүй. |
| Эмзэг оролтын талбарууд (хувийн таних мэдээлэл) | Нууц үг болон төлбөрийн талбарыг нууцлалтын бүх түвшинд зочны төхөөрөмж дээр нууцалдаг. Бүх маягтын оролтыг бүрэн нууцлах нь сайт бүрийн өгөгдмөл тохиргоо юм. Та бичсэнийг бус, бичилт болсныг л харна. Хоёр хязгаар бий: хоёр сул нууцлалтын түвшнийг зөвхөн манай бичгээр өгсөн зөвшөөрлөөр идэвхжүүлнэ. Мөн нууцлалт таны өөрийн хуудасны баримтад хэвлэсэн зүйлд хүрэхгүй – хаяг харуулсан баталгаажуулах хуудас агшин зургийн хэсэг болно. Хоёуланг нь дараахад тусгасан: Өгөгдөл боловсруулах гэрээ. |
| Canvas & WebGL элементүүд | Canvas-ийн агуулгыг зураг хэлбэрээр бүртгэнэ: хуудасны агшин зурагтай нэг удаа, дараа нь өөрчлөгдөх бүрд, хамгийн ихдээ ойролцоогоор секундэд нэг удаа, хэмжээний хязгаартай. Тиймээс жигд хөдөлгөөнт дүрс дараалсан кадр хэлбэрээр харагдана. Нууцалсан хэсэг болон өөр гаралтай зураг агуулсан canvas элементэд зураг дамжуулахгүй. WebGL агуулга хоосон үлдэж болно. |
| Вэб компонентууд (Shadow DOM) | Нээлттэй shadow root-уудыг агуулгатай нь хамт бүртгэнэ. Хаалттай shadow root-д скриптүүд хандах боломжгүй тул агуулга нь дахин тоглуулалтад байхгүй. |
| Дамжуулалт & хөтчийн хадгалалт | Өгөгдлийг шифрлэсэн WebSocket холболтоор (HTTPS/WSS) илгээнэ. Жишээлбэл проксигээс шалтгаалан холболт үүсгэж чадахгүй бол скрипт шифрлэсэн HTTP замд шилжинэ. Маш том хуудасны агшин зургийг HTTPS-ээр тусад нь байршуулна. MousePlayer cookie тохируулахгүй. Танай сайт дээрх хөтчийн local storage болон session storage-ийг ашиглана. |
| Идэвхгүй AFK хугацаа | Зочин табаа нээлттэй орхиод 20 минут явбал манай хөдөлгүүр идэвхгүй байдлыг автоматаар илрүүлж, дахин тоглуулалтын үед завсрыг шахна. Ингэснээр та хөдөлгөөнгүй дэлгэц үзэхэд цаг алдахгүй. |