MousePlayer အလုပ်လုပ်ပုံ

ခြေရာခံစနစ်ဗိသုကာ၊ စက်များအကြား မျက်နှာပြင်ပုံရိပ်ပြတ်သားမှု ကိုင်တွယ်ပုံနှင့် စနစ်နယ်နိမိတ်များအတွက် ရိုးရှင်းသောလမ်းညွှန်။

1. ဗီဒီယိုမှတ်တမ်းတင်ခြင်းကို ဘာကြောင့် မသုံးသနည်း

ပုံရိပ်ခွဲခြမ်းစိတ်ဖြာကိရိယာများက ဧည့်သည်မျက်နှာပြင်ကို ပုံမှန်ဗီဒီယိုဖိုင် (MP4 သို့မဟုတ် WebM ကဲ့သို့) အဖြစ် မှတ်တမ်းတင်သည်ဟု အများက မှားထင်ကြသည်။ ထိုနည်းသည် ဒေတာလွှဲပြောင်းပမာဏ များစွာသုံး၊ ဝဘ်ဆိုက် အလွန်နှေးစေပြီး စာသားကို မှုန်ဝါးဖတ်မရ ဖြစ်စေမည်။

ထို့အစား MousePlayer သည် ပေါ့ပါးသောနည်းပညာကို သုံးသည်။ ၎င်း၏အမည်မှာ DOM ပုံရိပ် တယ်လီမက်ထရီဖြစ်သည်။ အခြေခံအလုပ်လုပ်ပုံမှာ:

ဖွဲ့စည်းပုံပုံရိပ်

ဧည့်သည်က စာမျက်နှာဖွင့်သောအခါ စခရစ်က HTML နှင့် စတိုင်ဖွဲ့စည်းပုံ၏ စာသားအခြေပြု “ပုံစံပြာ” ကို ယူသည်။ စာမျက်နှာပုံ သို့မဟုတ် ဗီဒီယိုဖိုင်များ မကူးဘဲ အစိတ်အပိုင်းများ တည်နေရာကို မှတ်တမ်းတင်သည်။ ပြန်ဖွင့်စဉ် ဖွင့်ကြည့်စက်က ပုံများကို မူရင်းလိပ်စာမှ တင်သည်။ ခြွင်းချက်မှာ canvas အစိတ်အပိုင်းများဖြစ်ပြီး ၎င်းတို့၏အကြောင်းအရာကို ပုံအဖြစ် ပို့သည် (အောက်တွင် ကြည့်ပါ)။

ကိုဩဒိနိတ် တယ်လီမက်ထရီ

အသုံးပြုသူ လုပ်ဆောင်နေစဉ် မောက်စ်တည်နေရာ၊ စာမျက်နှာရွှေ့အနက်၊ ကလစ်ပစ်မှတ်နှင့် ဘရောက်ဇာအရွယ်ပြောင်းမှုအပြင် စာမျက်နှာကိုယ်တိုင် ပြောင်းလဲမှုများကို ဖြစ်ရပ်စီးကြောင်းအဖြစ် မှတ်တမ်းတင်သည်။ သတ်မှတ်ချက်အလိုက် ကွန်ဆိုးလ်စာ၊ မအောင်မြင်သော သို့မဟုတ် နှေးသောတောင်းဆိုမှုနှင့် တင်ချိန်တိုင်းတာချက်များ (Web Vitals) လည်း ပါဝင်သည်။ ရွေ့လျားမှုနှင့် ကလစ်များသည် သေးငယ်သည်။ စာမျက်နှာပုံရိပ်နှင့် ပြောင်းလဲမှုများမှာ စာမျက်နှာအပေါ်မူတည်၍ များစွာကြီးနိုင်ပြီး ချုံ့၍ ပို့သည်။

Theatre ပြန်ဖွင့်ကြည့်ခြင်း

ဒက်ရှ်ဘုတ်တွင် ဆက်ရှင်ကြည့်သောအခါ ဖွင့်ကြည့်စက်က မှတ်တမ်းတင်ဖွဲ့စည်းပုံကိုသုံး၍ စာမျက်နှာပြန်တည်ဆောက်ပြီး အတုညွှန်တံကို အချိန်နှင့်တစ်ပြေးညီ ရွှေ့သည်၊ စာသားကို အလွန်ပြတ်သားစွာ ထားသည်။

ပေါ့ပါးနေစေရန် တည်ဆောက်ထားသည်: စခရစ်သည် အချိန်မတူညီစွာတင်ပြီး ဗီဒီယိုအစား သေးငယ်သော ဂဏန်းဒေတာမှတ်များကို ပို့သဖြင့် ကိုယ်တိုင်သုံးစွဲပမာဏ နည်းစေသည်။ Core Web Vitals အပေါ် သက်ရောက်မှုသည် စာမျက်နှာ၊ ဟို့စ်နှင့် ဧည့်သည်ကွန်ရက်ပေါ် မူတည်သောကြောင့် ဝန်ဆောင်မှုပေးသူ၏ကိန်းကို အခြေမခံဘဲ ကိုယ်ပိုင်ဝဘ်ဆိုက်တွင် တိုင်းတာပါ။ သီးခြားတင်နှုန်းကို အာမမခံပါ – အပိုဒ် 20 ကို ကြည့်ပါ၊ သက်ဆိုင်ရာစာတမ်းမှာ ဝန်ဆောင်မှုစည်းကမ်းချက်များဖြစ်သည်။

2. မျက်နှာပြင်ပုံရိပ်ပြတ်သားမှု & မိုဘိုင်းစက်များ ကိုင်တွယ်ခြင်း

ယနေ့အသုံးပြုသူများသည် သေးငယ်သောစမတ်ဖုန်းမှ အလွန်ကျယ်သော 4K ဒက်စ်တော့မော်နီတာအထိ သုံးကြသည်။ ဝဘ်ဆိုက်များက အကျယ်မတူသည့် မျက်နှာပြင်များနှင့် ကိုက်ညီရန် အပြင်အဆင်ကို အလိုအလျောက်ရွှေ့၊ ခေါက်၊ ပြန်စီကြသည်။ ဤသဘောတရားကို Responsive Web Design ဟု ခေါ်သည်။

ဧည့်သည်၏ တိကျသောမြင်ရသည့်ဧရိယာနှင့် ကိုက်ညီစေပုံ

ပြန်ဖွင့်ကြည့်မှု ပုံမပျက်စေရန် MousePlayer က ဧည့်သည်မြင်ရသည့်ဧရိယာ အတိုင်းအတာကို အတိအကျ မှတ်တမ်းတင်သည် (ဥပမာ 390x844 စမတ်ဖုန်းအတွက် သို့မဟုတ် 1920x1080 ဒက်စ်တော့မော်နီတာအတွက်)။ Theatre ဖွင့်ကြည့်စက် ဖွင့်သောအခါ အင်ဂျင်က ဧည့်သည်မူရင်းမျက်နှာပြင်အချိုးကို အတိအကျ တုပသော အရွယ်ချိန်ထားသည့် သီးခြားပတ်ဝန်းကျင် ဖန်တီးသည်။

ဒက်စ်တော့ & လက်ပ်တော့မျက်နှာပြင်များ

ပုံမှန်ကွန်ပျူတာများတွင် ဘရောက်ဇာဆက်ရှင်တစ်ခုအတွင်း အဆက်မပြတ်မောက်စ်ရွေ့လျားမှုနှင့် တက်ဘ်များအကြား သွားလာမှုကို ဖမ်းယူသည်။ ညွှန်တံတင်၍ ဖွင့်သောမီနူးက စာမျက်နှာ၏ document ကို ပြောင်းပါက ပြန်ဖွင့်မှုတွင် ပေါ်သည်။ CSS သက်သက် hover အကျိုးသက်ရောက်မှုသည် document တွင် မမြင်ရသဖြင့် ပြန်မဖော်ပြပါ။

စမတ်ဖုန်း & တက်ဘလက်များ

ထိတွေ့မျက်နှာပြင်များတွင် လွင့်တင်ထားသော မောက်စ်ညွှန်တံ မရှိပါ။ MousePlayer က ထိနှိပ်မှု၊ ပွတ်ဆွဲစာမျက်နှာရွှေ့မှုနှင့် ဦးတည်ရာပြောင်းမှု (ဒေါင်လိုက်နှင့် အလျားလိုက်) ကို မှတ်တမ်းတင်၍ အလိုအလျောက် လိုက်လျောညီထွေဖြစ်စေသည်။

ဆက်ရှင်အလယ် အရွယ်ပြောင်းမှုစိန်ခေါ်မှု

ဧည့်သည်က ဆက်ရှင်အတွင်း တက်ဘလက်လှည့် သို့မဟုတ် ဒက်စ်တော့ဘရောက်ဇာဝင်းဒိုး အရွယ်ပြောင်းပါက ဝဘ်ဆိုက်အပြင်အဆင်လည်း ပြောင်းသည်။ MousePlayer က ဝင်းဒိုးအရွယ်ပြောင်းဖြစ်ရပ်များကို ဖမ်းယူပြီး ပြန်ဖွင့် canvas ကို ချက်ချင်းချောမွေ့စွာ ညှိပေးသဖြင့် အပြန်အလှန်လုပ်ဆောင်မှုအခြေအနေ မပျောက်ပါ။

3. စနစ်ကန့်သတ်ချက်များ & နည်းပညာနယ်နိမိတ်များ

အသုံးပြုသူကိုယ်ရေးလုံခြုံမှုကို လေးစား၊ ဘရောက်ဇာလုံခြုံရေး ထိန်းသိမ်းပြီး ဒေတာစီမံဆောင်ရွက်မှု မြန်စေရန် MousePlayer သည် သတ်မှတ်နည်းပညာနယ်နိမိတ်များအတွင်း အလုပ်လုပ်သည်:

စနစ်နယ်နိမိတ် MousePlayer ကိုင်တွယ်ပုံ
iFrame များ စာမျက်နှာနှင့် မူလရင်းမြစ်တူသော iframe များကို အကြောင်းအရာနှင့် အတွင်းအပြန်အလှန်လုပ်ဆောင်မှုနှင့်အတူ မှတ်တမ်းတင်သည်။ အခြားမူလရင်းမြစ်မှ ထည့်သွင်းအကြောင်းအရာ (ဥပမာ YouTube ဖွင့်ကြည့်စက်၊ Stripe ငွေပေးချေဖောင်) ကို ဘရောက်ဇာလုံခြုံရေးမူဝါဒ (Same-Origin Policy) ကြောင့် အတွင်းပိုင်း မှတ်တမ်းမတင်နိုင်ပါ။ ပြန်ဖွင့်မှုတွင် နေရာဖြည့်အကွက်အဖြစ် ပေါ်ပြီး ထိုနေရာတွင် မတင်ပါ။
ထိခိုက်လွယ်သော ထည့်သွင်းအကွက်များ (PII) စကားဝှက်နှင့် ငွေပေးချေအကွက်များကို ဖုံးကွယ်အဆင့်တိုင်းတွင် ဧည့်သည်စက်ပေါ်၌ ဖုံးကွယ်ပြီး ဖောင်ထည့်သွင်းချက်အားလုံး အပြည့်အဝဖုံးကွယ်ခြင်းသည် ဝဘ်ဆိုက်တိုင်း၏ မူလသတ်မှတ်ချက်ဖြစ်သည်။ ရိုက်ခဲ့သည်ကိုသာ မြင်ရပြီး ရိုက်သည့်အကြောင်းအရာ မမြင်ရပါ။ ကန့်သတ်ချက်နှစ်ခု ရှိသည်: ပိုအားနည်းသောအဆင့်နှစ်ခုကို စာဖြင့်ခွင့်ပြုမှသာ ဖွင့်နိုင်ပြီး ကိုယ်ပိုင်စာမျက်နှာက document ထဲ ထုတ်ပြသောအရာကို ဖုံးကွယ်မှုက မလွှမ်းခြုံပါ – လိပ်စာပြသော အတည်ပြုစာမျက်နှာသည် ပုံရိပ်၏အစိတ်အပိုင်းဖြစ်သည်။ နှစ်ချက်လုံးကို ဖော်ပြထားသောစာတမ်းမှာ ဒေတာစီမံဆောင်ရွက်မှုသဘောတူညီချက်ဖြစ်သည်။
Canvas & WebGL အစိတ်အပိုင်းများ Canvas အကြောင်းအရာကို ပုံအဖြစ် မှတ်တမ်းတင်သည်: စာမျက်နှာပုံရိပ်နှင့် တစ်ကြိမ်၊ ထို့နောက် ပြောင်းတိုင်း ထပ်ယူသည်၊ အများဆုံး တစ်စက္ကန့်တစ်ကြိမ်ခန့်နှင့် အရွယ်ကန့်သတ်ချက် ရှိသည်။ ထို့ကြောင့် ချောမွေ့သော လှုပ်ရှားပုံများကို ပုံအစဉ်လိုက်အဖြစ် မြင်ရသည်။ ဖုံးကွယ်ထားသောဧရိယာ သို့မဟုတ် အခြားရင်းမြစ်မှပုံ ပါသော canvas အတွက် ပုံမပို့ပါ။ WebGL အကြောင်းအရာ ဗလာဖြစ်နေနိုင်သည်။
Web Component များ (Shadow DOM) ဖွင့်ထားသော shadow root များကို အကြောင်းအရာနှင့်အတူ မှတ်တမ်းတင်သည်။ ပိတ်ထားသော shadow root များကို စခရစ်က မဝင်နိုင်သဖြင့် ပြန်ဖွင့်မှုတွင် အကြောင်းအရာ မပါပါ။
ပို့ဆောင်မှု & ဘရောက်ဇာသိမ်းဆည်းမှု ဒေတာကို ကုဒ်ဝှက်ထားသော WebSocket ချိတ်ဆက်မှု (HTTPS/WSS) မှ ပို့သည်။ ဥပမာ proxy ကြောင့် ချိတ်ဆက်၍မရပါက စခရစ်သည် ကုဒ်ဝှက်ထားသော HTTP လမ်းကြောင်းသို့ ပြောင်းသည်။ အလွန်ကြီးသောစာမျက်နှာပုံရိပ်များကို HTTPS မှ သီးခြားတင်သည်။ MousePlayer သည် ကွတ်ကီးမသတ်မှတ်ပါ။ ဝဘ်ဆိုက်ပေါ်ရှိ ဘရောက်ဇာ၏ local storage နှင့် session storage ကို သုံးသည်။
မလှုပ်ရှားသော AFK ကာလများ ဧည့်သည်က တက်ဘ်ဖွင့်ထားပြီး မိနစ် 20 ထွက်သွားပါက အင်ဂျင်က မလှုပ်ရှားမှုကို အလိုအလျောက်သိရှိပြီး ပြန်ဖွင့်စဉ် အဟကို ချုံ့ပေးသဖြင့် ငြိမ်နေသောမျက်နှာပြင်ကို ကြည့်၍ အချိန်မကုန်စေပါ။