Bí MousePlayer ṣe ń ṣiṣẹ́

Ìtọ́sọ́nà tó rọrùn sí ìṣètò ìtọ́pa wa, bí a ṣe ń bá ìwọ̀n ojú ìbòjú lò káàkiri ẹ̀rọ àti ààlà ètò.

1. Ìdí tí a kò fi ń lo ìgbàsílẹ̀ fídíò

Èrò àìtọ́ tí ó wọ́pọ̀ ni pé irinṣẹ́ ìtúpalẹ̀ àwòrán ń gbàsílẹ̀ fáìlì fídíò déédéé (bí MP4 tàbí WebM) ti ojú ìbòjú àlejò. Ṣíṣe bẹ́ẹ̀ yóò jẹ bandwidth ńlá, dín iyára ojúlé wẹ́ẹ̀bù yín kù gidigidi, kí ó sì dá ọ̀rọ̀ tí kò mọ́ tí kò ṣeé kà sílẹ̀.

Dípò rẹ̀, MousePlayer lo ẹ̀rọ fẹ́ẹ́rẹ́fẹ́ tí a mọ̀ sí Telemetry àwòrán DOM. Bí ó ṣe ń ṣiṣẹ́ ní ìpìlẹ̀ nìyí:

Àwòrán àpẹrẹ ìpìlẹ̀

Nígbà tí àlejò ṣí ojú ìwé yín, síkírípù wa gba “àpẹrẹ ìpìlẹ̀” tí ó dá lórí ọ̀rọ̀ ti HTML àti ìṣètò àṣà yín. Ó gbàsílẹ̀ ibi tí ohun wà láìda fáìlì àwòrán tàbí fídíò ojú ìwé yín kọ; ẹ̀rọ ìtúnṣeré ń mú àwòrán wọlé láti àdírẹ́sì ìpilẹ̀ṣẹ̀ wọn nígbà ìtúnṣeré. Àyàfi ni ohun canvas, tí a ń fi àkóónú rẹ̀ ránṣẹ́ gẹ́gẹ́ bí àwòrán (ẹ wo ìsàlẹ̀).

Telemetry ipò

Bí olùlò ṣe ń ṣe ìbáṣepọ̀, a ń gbàsílẹ̀ ìṣàn ìṣẹ̀lẹ̀: ipò eku, ìjìnlẹ̀ yíyí ojú ìwé, àfojúsùn ìtẹ̀ àti àtúnwọ̀n aṣàwákiri, pẹ̀lú àyípadà sí ojú ìwé fúnra rẹ̀ àti, gẹ́gẹ́ bí ètò, ìfiránṣẹ́ console, ìbéèrè tó kùnà tàbí tó lọ́ra àti ìwọ̀n àkókò ìmúwọlé (Web Vitals). Ìṣípò àti ìtẹ̀ kéré; àwòrán ojú ìwé àti àyípadà ojú ìwé lè tóbi púpọ̀ gẹ́gẹ́ bí ojú ìwé, a sì ń fi ránṣẹ́ ní ìfúnpọ̀.

Ìtúnṣeré gbọ̀ngàn ìwòran

Nígbà tí ẹ wo ìgbà ìlò nínú dashboard yín, ẹ̀rọ ìtúnṣeré wa ń tún ojú ìwé dá pẹ̀lú àpẹrẹ tí a gbàsílẹ̀, ó sì ń mú atọ́ka àwòṣe rìn káàkiri rẹ̀ ní àkókò gidi, tó ń pa ọ̀rọ̀ mọ́ ní mímú kedere.

A kọ ọ́ láti má wuwo: síkírípù ń wọlé lọ́tọ̀, ó sì ń fi àwọn nọ́ńbà dátà kékeré ránṣẹ́ dípò fídíò, èyí tó ń mú kí ipa tirẹ̀ kéré. Ohun tí èyí túmọ̀ sí fún Core Web Vitals yín dá lórí ojú ìwé yín, ìgbàlejò yín àti nẹ́tíwọ́ọ̀kì àlejò yín, nítorí náà ẹ wọn án lórí ojúlé tiyín dípò gbígba nọ́ńbà láti ọ̀dọ̀ wa. A kò ṣe ìdánilójú iyára ìmúwọlé pàtó – ẹ wo ẹ̀ka 20 ti Òfin Ìlò.

2. Bí a ṣe ń bá ìwọ̀n ojú ìbòjú & ẹ̀rọ alágbèéká lò

Olùlò òde òní ń ṣàwákiri lórí ohun gbogbo láti fóònù ọlọ́gbọ́n kékeré sí ojú ìbòjú desktop 4K fífẹ̀ gan-an. Ojúlé wẹ́ẹ̀bù ń yí, pọ̀, kí ó sì tún ìṣètò rẹ̀ tò fúnra rẹ̀ láti bá ìwọ̀n fífẹ̀ ojú ìbòjú tó yàtọ̀ mu — èrò tí a mọ̀ sí Responsive Web Design.

Bí a ṣe ń bá agbègbè àwòrán gangan àlejò mu

Láti rí i dájú pé ìtúnṣeré kò dà bí ohun tí a ti yí po, MousePlayer ń gbàsílẹ̀ ìwọ̀n agbègbè àwòrán gangan àlejò (bí 390x844 fún fóònù ọlọ́gbọ́n tàbí 1920x1080 fún ojú ìbòjú desktop). Nígbà tí ẹ ṣí ẹ̀rọ ìtúnṣeré gbọ̀ngàn ìwòran, ẹ̀rọ wa ń ṣẹ̀dá àgbègbè ìdánwò tí a ṣàtúnwọ̀n, tó ń fi ìpín ìwọ̀n ojú ìbòjú ìpilẹ̀ṣẹ̀ àlejò hàn gẹ́lẹ́.

Ojú ìbòjú desktop & laptop

Lórí kọ̀ǹpútà déédéé, a ń gba ìṣípò eku tí ń tẹ̀síwájú àti ìrìn kiri táàbù púpọ̀ láàárín ìgbà ìlò aṣàwákiri kan náà. Àkójọ tó ń ṣí nígbà fífi eku lé ohun ń hàn nínú ìtúnṣeré níbi tí ojú ìwé bá yí document rẹ̀ padà nígbà náà; ipa hover CSS nìkan kò hàn nínú document, a kò sì tún un ṣe nínú ìtúnṣeré.

Fóònù ọlọ́gbọ́n & tablet

Ojú ìbòjú ìfọwọ́kàn kò ní atọ́ka eku tó ń fò lókè. MousePlayer ń ṣàtúnṣe fúnra rẹ̀ nípa gbígbàsílẹ̀ ìfọwọ́kàn, yíyí ojú ìwé ní fífà àti ìyípadà ìtọ́sọ́nà (gígùn àti fífẹ̀).

Ìpèníjà àtúnwọ̀n láàárín ìgbà ìlò

Bí àlejò bá yí tablet rẹ̀ tàbí tún ìwọ̀n fèrèsé aṣàwákiri desktop rẹ̀ ṣe láàárín ìgbà ìlò, ìṣètò ojúlé wẹ́ẹ̀bù ń yípadà. MousePlayer ń gba ìṣẹ̀lẹ̀ àtúnwọ̀n fèrèsé yìí, ó sì ń ṣàtúnṣe canvas ìṣeré láìdènà lẹ́sẹ̀kẹsẹ̀, kí àyíká ìbáṣepọ̀ lè wà ní pípamọ́.

3. Ààlà ètò & ààlà ẹ̀rọ

Láti bọ̀wọ̀ fún àṣírí olùlò, pa ààbò aṣàwákiri mọ́ àti mú ṣíṣiṣẹ́ dátà yára, MousePlayer ń ṣiṣẹ́ láàárín ààlà ẹ̀rọ tí a ṣàlàyé:

Ààlà ètò Bí MousePlayer ṣe ń bá a lò
iFrames A gbàsílẹ̀ iframe tí ó ní origin kan náà pẹ̀lú ojú ìwé yín pẹ̀lú àkóónú rẹ̀ àti ìbáṣepọ̀ inú rẹ̀. A kò lè gbàsílẹ̀ àkóónú tí a fi sínú ojú ìwé láti origin mìíràn (bí ẹ̀rọ ìṣeré YouTube, fọ́ọ̀mù ìsanwó Stripe) nínú rẹ̀ nítorí òfin ààbò aṣàwákiri (Same-Origin Policy); ó hàn gẹ́gẹ́ bí ààyè ìdípò nínú ìtúnṣeré, a kò sì mú un wọlé níbẹ̀.
Pápá ìmúwọlé àṣírí (PII) A bo pápá ọ̀rọ̀ aṣínà àti ìsanwó lórí ẹ̀rọ àlejò ní gbogbo ipele bíbo, bíbo gbogbo ìmúwọlé fọ́ọ̀mù pátápátá sì ni àkọ́kọ́ fún gbogbo ojúlé. Ẹ rí pé títẹ̀wé ṣẹlẹ̀, kì í ṣe ohun tí a tẹ̀. Ààlà méjì kan án: ipele bíbo méjì tí kò lágbára ṣiṣẹ́ pẹ̀lú ìfọwọ́sí wa ní kíkọ nìkan, bíbo kò sì dé ohun tí ojú ìwé tiyín tẹ sínú document láéláé – ojú ìwé ìmúdájú tó fi àdírẹ́sì hàn jẹ́ apá àwòrán ojú ìwé. A ṣàlàyé méjèèjì nínú DPA.
Ohun Canvas & WebGL A gbàsílẹ̀ àkóónú canvas gẹ́gẹ́ bí àwòrán: lẹ́ẹ̀kan pẹ̀lú àwòrán ojú ìwé, àti lẹ́ẹ̀kan sí i ní gbogbo ìgbà tó yípadà, nǹkan bí ẹ̀ẹ̀kan fún ìṣẹ́jú àáyá kan tó pọ̀ jù, pẹ̀lú ààlà ìwọ̀n. Nítorí náà àwòrán eré tó rọrùn ń hàn gẹ́gẹ́ bí ọ̀wọ́ férémù. A kò fi àwòrán ránṣẹ́ ní àgbègbè tí a bo tàbí fún canvas tó ní àwòrán origin mìíràn; àkóónú WebGL lè dúró ní òfo.
Web Component (Shadow DOM) A gbàsílẹ̀ shadow root tó ṣí pẹ̀lú àkóónú rẹ̀. Síkírípù kò lè dé shadow root tó pa dé; àkóónú rẹ̀ kò sí nínú ìtúnṣeré.
Ìrìnnà & ìpamọ́ aṣàwákiri A fi dátà ránṣẹ́ lórí ìsopọ̀ WebSocket tí a fi ìpàrokò sí (HTTPS/WSS). Bí a kò bá lè dá a sílẹ̀, bíi nítorí proxy, síkírípù ń padà sí ọ̀nà HTTP tí a fi ìpàrokò sí; a ń gbé àwòrán ojú ìwé tó tóbi gan-an sókè lọ́tọ̀ lórí HTTPS. MousePlayer kò ṣètò cookie; ó lo local storage àti session storage aṣàwákiri lórí ojúlé yín.
Àkókò àìṣiṣẹ́ AFK Bí àlejò bá fi táàbù rẹ̀ sílẹ̀ ní ṣíṣí, tí ó sì lọ fún ìṣẹ́jú 20, ẹ̀rọ wa ń rí àìṣiṣẹ́ fúnra rẹ̀, ó sì ń fún àlàfo àìṣiṣẹ́ pọ̀ nígbà ìtúnṣeré kí ẹ má bàa fi àkókò ṣòfò wíwo ojú ìbòjú tí kò rìn.