ວິທີທີ່ MousePlayer ເຮັດວຽກ

ຄູ່ມືງ່າຍໆກ່ຽວກັບສະຖາປັດຕະຍະກຳການຕິດຕາມ, ການຈັດການຄວາມລະອຽດໜ້າຈໍຂ້າມອຸປະກອນ ແລະ ຂອບເຂດລະບົບ.

1. ເປັນຫຍັງພວກເຮົາບໍ່ໃຊ້ການບັນທຶກວິດີໂອ

ຄວາມເຂົ້າໃຈຜິດທົ່ວໄປແມ່ນເຄື່ອງມືວິເຄາະແບບພາບບັນທຶກໜ້າຈໍຜູ້ເຂົ້າຊົມເປັນໄຟລ໌ວິດີໂອມາດຕະຖານ (ເຊັ່ນ MP4 ຫຼື WebM). ການເຮັດເຊັ່ນນັ້ນຈະໃຊ້ແບນວິດຫຼາຍ, ເຮັດໃຫ້ເວັບໄຊຊ້າລົງຫຼາຍ ແລະ ເຮັດໃຫ້ຂໍ້ຄວາມມົວຈົນອ່ານບໍ່ໄດ້.

ແທນທີ່ນັ້ນ MousePlayer ໃຊ້ເຕັກໂນໂລຊີທີ່ເບົາ ຊື່ວ່າ ການວັດພາບໜ້າ DOM. ນີ້ແມ່ນວິທີເຮັດວຽກພື້ນຖານ:

ພາບໜ້າແບບແຜນຜັງ

ເມື່ອຜູ້ເຂົ້າຊົມເປີດໜ້າ ສະຄຣິບຈະບັນທຶກ “ແຜນຜັງ” ແບບຂໍ້ຄວາມຂອງ HTML ແລະ ໂຄງສ້າງຮູບແບບ. ມັນບັນທຶກຕຳແໜ່ງອົງປະກອບໂດຍບໍ່ຄັດລອກໄຟລ໌ຮູບຫຼືວິດີໂອຂອງໜ້າ; ເຄື່ອງຫຼິ້ນໂຫຼດຮູບຈາກທີ່ຢູ່ເດີມໃນລະຫວ່າງຫຼິ້ນຄືນ. ຂໍ້ຍົກເວັ້ນແມ່ນອົງປະກອບ canvas ເຊິ່ງສົ່ງເນື້ອຫາເປັນຮູບ (ເບິ່ງຂ້າງລຸ່ມ).

ການວັດພິກັດ

ໃນຂະນະທີ່ຜູ້ໃຊ້ມີປະຕິສຳພັນ ພວກເຮົາບັນທຶກກະແສເຫດການ: ຕຳແໜ່ງເມົາສ໌, ຄວາມເລິກການເລື່ອນ, ເປົ້າໝາຍຄລິກ ແລະ ການປ່ຽນຂະໜາດບຣາວເຊີ ລວມທັງການປ່ຽນແປງໜ້າເອງ ແລະ ອີງຕາມການຕັ້ງຄ່າ ຂໍ້ຄວາມຄອນໂຊນ, ຄຳຮ້ອງຂໍທີ່ລົ້ມເຫຼວຫຼືຊ້າ ແລະ ຄ່າວັດເວລາໂຫຼດ (Web Vitals). ການເຄື່ອນໄຫວແລະຄລິກມີຂະໜາດນ້ອຍ; ພາບໜ້າແລະການປ່ຽນແປງໜ້າອາດໃຫຍ່ກວ່າຫຼາຍຕາມໜ້າ ແລະ ຈະສົ່ງແບບບີບອັດ.

ການຫຼິ້ນຄືນແບບໂຮງລະຄອນ

ເມື່ອເບິ່ງເຊດຊັນໃນແດຊບອດ ເຄື່ອງຫຼິ້ນຈະສ້າງໜ້າຄືນຈາກແຜນຜັງທີ່ບັນທຶກ ແລະ ເຄື່ອນຕົວຊີ້ຈຳລອງຜ່ານໜ້າແບບທັນທີ ໂດຍຂໍ້ຄວາມຍັງຄົມຊັດ.

ອອກແບບໃຫ້ເບົາ: ສະຄຣິບໂຫຼດແບບບໍ່ຂັດຂວາງ ແລະ ສົ່ງຈຸດຂໍ້ມູນຕົວເລກຂະໜາດນ້ອຍແທນວິດີໂອ ຈຶ່ງໃຊ້ຊັບພະຍາກອນນ້ອຍ. ຜົນຕໍ່ Core Web Vitals ຂຶ້ນກັບໜ້າ, ໂຮສຕິ້ງ ແລະ ເຄືອຂ່າຍຜູ້ເຂົ້າຊົມ ດັ່ງນັ້ນຄວນວັດໃນເວັບໄຊຂອງທ່ານເອງແທນການເຊື່ອຕົວເລກຈາກພວກເຮົາ. ບໍ່ຮັບປະກັນຄວາມໄວໂຫຼດສະເພາະ – ເບິ່ງຂໍ້ 20 ຂອງ ເງື່ອນໄຂການບໍລິການ.

2. ການຈັດການຄວາມລະອຽດໜ້າຈໍ & ອຸປະກອນມືຖື

ຜູ້ໃຊ້ໃນມື້ນີ້ໃຊ້ທຸກຢ່າງຕັ້ງແຕ່ສະມາດໂຟນຂະໜາດນ້ອຍຈົນເຖິງຈໍຄອມພິວເຕີ 4K ກວ້າງຫຼາຍ. ເວັບໄຊປັບ, ພັບ ແລະ ຈັດຮູບແບບຄືນອັດຕະໂນມັດໃຫ້ເໝາະກັບຄວາມກວ້າງໜ້າຈໍຕ່າງກັນ—ແນວຄິດທີ່ເອີ້ນວ່າການອອກແບບເວັບແບບປັບຕົວ.

ວິທີທຽບພື້ນທີ່ສະແດງຜົນໃຫ້ກົງກັບຜູ້ເຂົ້າຊົມ

ເພື່ອບໍ່ໃຫ້ການຫຼິ້ນຄືນບິດເບືອນ MousePlayer ບັນທຶກຂະໜາດພື້ນທີ່ສະແດງຜົນຂອງຜູ້ເຂົ້າຊົມຢ່າງແມ່ນຍຳ (ເຊັ່ນ 390x844 ສຳລັບສະມາດໂຟນ ຫຼື 1920x1080 ສຳລັບຈໍຄອມພິວເຕີ). ເມື່ອເປີດເຄື່ອງຫຼິ້ນແບບໂຮງລະຄອນ ເຄື່ອງຈັກຈະສ້າງ sandbox ທີ່ປັບຂະໜາດໃຫ້ກົງກັບອັດຕາສ່ວນໜ້າຈໍເດີມຂອງຜູ້ເຂົ້າຊົມຢ່າງສົມບູນ.

ຈໍຄອມພິວເຕີຕັ້ງໂຕະ & ແລັບທັອບ

ໃນຄອມພິວເຕີທົ່ວໄປ ພວກເຮົາບັນທຶກການເຄື່ອນໄຫວເມົາສ໌ຕໍ່ເນື່ອງ ແລະ ການທ່ອງຫຼາຍແຖບໃນເຊດຊັນບຣາວເຊີດຽວກັນ. ເມນູທີ່ເປີດເມື່ອຊີ້ຈະປາກົດໃນການຫຼິ້ນຄືນ ຖ້າໜ້າປ່ຽນເອກະສານໃນຕອນນັ້ນ; ເອັບເຟັກຊີ້ດ້ວຍ CSS ລ້ວນບໍ່ປາກົດໃນເອກະສານ ແລະ ຈະບໍ່ສ້າງຄືນໃນການຫຼິ້ນຄືນ.

ສະມາດໂຟນ & ແທັບເລັດ

ຈໍສຳຜັດບໍ່ມີຕົວຊີ້ເມົາສ໌ທີ່ຊີ້ຄ້າງ. MousePlayer ປັບຕົວອັດຕະໂນມັດໂດຍບັນທຶກການແຕະ, ການປັດເລື່ອນ ແລະ ການປ່ຽນທິດທາງ (ແນວຕັ້ງກັບແນວນອນ).

ຄວາມທ້າທາຍຂອງການປ່ຽນຂະໜາດລະຫວ່າງເຊດຊັນ

ຖ້າຜູ້ເຂົ້າຊົມໝຸນແທັບເລັດ ຫຼື ປ່ຽນຂະໜາດໜ້າຕ່າງບຣາວເຊີຄອມພິວເຕີລະຫວ່າງເຊດຊັນ ຮູບແບບເວັບໄຊຈະປ່ຽນຕາມ. MousePlayer ບັນທຶກເຫດການປ່ຽນຂະໜາດໜ້າຕ່າງ ແລະ ປັບ canvas ການຫຼິ້ນຢ່າງລຽບງ່າຍໃນທັນທີ ເພື່ອຮັກສາບໍລິບົດປະຕິສຳພັນ.

3. ຂີດຈຳກັດລະບົບ & ຂອບເຂດເຕັກນິກ

ເພື່ອເຄົາລົບຄວາມເປັນສ່ວນຕົວ, ຮັກສາຄວາມປອດໄພບຣາວເຊີ ແລະ ໃຫ້ປະມວນຜົນຂໍ້ມູນໄວ MousePlayer ເຮັດວຽກພາຍໃນຂອບເຂດເຕັກນິກທີ່ກຳນົດ:

ຂອບເຂດລະບົບ ວິທີທີ່ MousePlayer ຈັດການ
iFrames iframe ທີ່ມີຕົ້ນທາງດຽວກັບໜ້າຈະຖືກບັນທຶກພ້ອມເນື້ອຫາແລະປະຕິສຳພັນພາຍໃນ. ເນື້ອຫາຝັງຈາກຕົ້ນທາງອື່ນ (ເຊັ່ນ ເຄື່ອງຫຼິ້ນ YouTube, ຟອມຊຳລະເງິນ Stripe) ບັນທຶກພາຍໃນບໍ່ໄດ້ເພາະນະໂຍບາຍຄວາມປອດໄພບຣາວເຊີ (Same-Origin Policy); ຈະປາກົດເປັນກ່ອງແທນໃນການຫຼິ້ນຄືນ ແລະ ບໍ່ໂຫຼດຢູ່ທີ່ນັ້ນ.
ຊ່ອງປ້ອນທີ່ລະອຽດອ່ອນ (PII) ຊ່ອງລະຫັດຜ່ານແລະຊຳລະເງິນຖືກປິດບັງໃນອຸປະກອນຜູ້ເຂົ້າຊົມໃນທຸກລະດັບ ແລະ ການປິດບັງຂໍ້ມູນຟອມທັງໝົດແມ່ນຄ່າເລີ່ມຕົ້ນຂອງທຸກເວັບໄຊ. ທ່ານເຫັນວ່າມີການພິມ ແຕ່ບໍ່ເຫັນສິ່ງທີ່ພິມ. ມີສອງຂໍ້ຈຳກັດ: ສອງລະດັບທີ່ປິດບັງໜ້ອຍກວ່າຈະເປີດໄດ້ເມື່ອພວກເຮົາອະນຸມັດເປັນລາຍລັກອັກສອນເທົ່ານັ້ນ ແລະ ການປິດບັງບໍ່ຄຸ້ມຄອງສິ່ງທີ່ໜ້າຂອງທ່ານພິມໃສ່ເອກະສານ – ໜ້າຢືນຢັນທີ່ສະແດງທີ່ຢູ່ແມ່ນສ່ວນຂອງພາບໜ້າ. ທັງສອງລະບຸໄວ້ໃນ ຂໍ້ຕົກລົງປະມວນຜົນຂໍ້ມູນ.
ອົງປະກອບ Canvas & WebGL ເນື້ອຫາ canvas ບັນທຶກເປັນຮູບ: ໜຶ່ງຄັ້ງພ້ອມພາບໜ້າ ແລະ ອີກຄັ້ງເມື່ອປ່ຽນແປງ, ສູງສຸດປະມານໜຶ່ງຄັ້ງຕໍ່ວິນາທີ ແລະ ຈຳກັດຂະໜາດ. ພາບເຄື່ອນໄຫວລຽບຈຶ່ງປາກົດເປັນລຳດັບເຟຣມ. ບໍ່ສົ່ງຮູບໃນບໍລິເວນທີ່ປິດບັງ ຫຼື ສຳລັບ canvas ທີ່ມີຮູບຈາກຕົ້ນທາງອື່ນ; ເນື້ອຫາ WebGL ອາດຍັງວ່າງ.
Web Components (Shadow DOM) ບັນທຶກ shadow root ແບບເປີດພ້ອມເນື້ອຫາ. ສະຄຣິບເຂົ້າເຖິງ shadow root ແບບປິດບໍ່ໄດ້; ເນື້ອຫາຈະຂາດຈາກການຫຼິ້ນຄືນ.
ການສົ່ງຂໍ້ມູນ & ພື້ນທີ່ເກັບບຣາວເຊີ ສົ່ງຂໍ້ມູນຜ່ານການເຊື່ອມຕໍ່ WebSocket ທີ່ເຂົ້າລະຫັດ (HTTPS/WSS). ຖ້າເຊື່ອມຕໍ່ບໍ່ໄດ້ ເຊັ່ນ ເພາະ proxy ສະຄຣິບຈະໃຊ້ເສັ້ນທາງ HTTP ທີ່ເຂົ້າລະຫັດສຳຮອງ; ພາບໜ້າຂະໜາດໃຫຍ່ຫຼາຍຈະອັບໂຫຼດແຍກຜ່ານ HTTPS. MousePlayer ບໍ່ຕັ້ງຄຸກກີ; ມັນໃຊ້ local storage ແລະ session storage ຂອງບຣາວເຊີໃນເວັບໄຊຂອງທ່ານ.
ໄລຍະບໍ່ໃຊ້ງານ AFK ຖ້າຜູ້ເຂົ້າຊົມປະແຖບເປີດໄວ້ແລ້ວຍ່າງໜີໄປ 20 ນາທີ ເຄື່ອງຈັກຈະກວດພົບການບໍ່ໃຊ້ງານອັດຕະໂນມັດ ແລະ ຫຍໍ້ຊ່ວງຫວ່າງໃນການຫຼິ້ນຄືນ ເພື່ອບໍ່ໃຫ້ເສຍເວລາເບິ່ງໜ້າຈໍນິ່ງ.