Näin se toimii: tekniikka, tarkkuudet ja rajat

1. Miksi emme käytä videotallennusta

Yleinen väärinkäsitys on, että visuaaliset analyysityökalut tallentavat tavallisia videotiedostoja (kuten MP4 tai WebM) kävijän näytöstä. Se kuluttaisi valtavasti kaistaa, hidastaisi sivustoa huomattavasti ja tuottaisi sumeaa, lukukelvotonta tekstiä.

MousePlayer käyttää sen sijaan kevyttä tekniikkaa nimeltä DOM-tilannekuvatelemetria. Näin se toimii käytännössä:

Sivun rakennekuva

Kun kävijä avaa sivun, skripti ottaa tekstipohjaisen ”rakennekuvan” HTML:stä ja tyylirakenteesta. Se tallentaa elementtien sijainnit kopioimatta sivun kuva- tai videotiedostoja; soitin lataa kuvat alkuperäisistä osoitteista toiston aikana. Poikkeus ovat canvas-elementit, joiden sisältö siirretään kuvana (katso alla).

Koordinaattitelemetria

Käyttäjän toimiessa tallennamme tapahtumavirran: hiiren sijainnit, vierityssyvyyden, klikkauskohteet ja selainkoon muutokset sekä itse sivumuutokset ja asetuksista riippuen konsoliviestit, epäonnistuneet tai hitaat pyynnöt ja latausaikamittaukset (Web Vitals). Liikkeet ja klikkaukset ovat pieniä; sivun tilannekuvat ja muutokset voivat olla paljon suurempia ja ne siirretään pakattuina.

Teatteritoisto

Koontinäytössä istuntoa katsottaessa soitin luo sivun uudelleen tallennetusta rakennekuvasta ja siirtää virtuaalista osoitinta sen päällä reaaliajassa, tekstin pysyessä terävänä.

Suunniteltu kevyeksi: skripti latautuu asynkronisesti ja siirtää pieniä numeropisteitä videon sijaan, joten sen oma kuormitus pysyy pienenä. Vaikutus Core Web Vitals -mittareihin riippuu sivuista, palvelinympäristöstä ja kävijän verkosta, joten mittaa omalla sivustolla sen sijaan, että käyttäisit meiltä saatua lukua. Tiettyä latausnopeutta ei taata – katso kohta 20 asiakirjasta Käyttöehdot.

2. Näyttötarkkuudet & mobiililaitteet

Nykykäyttäjät selaavat pienistä älypuhelimista ultraleveisiin 4K-näyttöihin. Sivustot siirtävät, taittavat ja järjestävät asettelua automaattisesti näyttöleveyden mukaan — tätä kutsutaan responsiiviseksi verkkosuunnitteluksi.

Kävijän näkyvän alueen tarkka vastaavuus

Vääristymien estämiseksi MousePlayer tallentaa kävijän näkyvän alueen tarkat mitat (esim. 390x844 älypuhelimella tai 1920x1080 tietokonenäytöllä). Teatterisoitin avattaessa moottori luo skaalatun hiekkalaatikon, joka vastaa tarkasti kävijän alkuperäistä kuvasuhdetta.

Tietokoneiden & kannettavien näytöt

Tavallisilla tietokoneilla tallennamme jatkuvan hiiren liikkeen ja välilehtien välisen navigoinnin saman selainistunnon sisällä. Osoittimen alla avautuvat valikot näkyvät toistossa, jos sivu muuttaa samalla dokumenttia; puhdas CSS-hover-vaikutus ei näy dokumentissa eikä toistu.

Älypuhelimet & tabletit

Kosketusnäytöissä ei ole leijuvaa hiiren osoitinta. MousePlayer mukautuu automaattisesti tallentamalla napautukset, pyyhkäisyvierityksen ja suunnanvaihdot (pysty ja vaaka).

Koon muuttaminen kesken istunnon

Jos kävijä kääntää tablettia tai muuttaa selainikkunan kokoa kesken istunnon, sivuston asettelu muuttuu dynaamisesti. MousePlayer tallentaa muutokset ja mukauttaa toistopintaa saumattomasti lennossa, jotta vuorovaikutuksen asiayhteys säilyy.

3. Järjestelmän rajat & tekniset rajoitukset

Käyttäjän yksityisyyden, selainturvallisuuden ja nopean tietojenkäsittelyn vuoksi MousePlayer toimii määritellyissä teknisissä rajoissa:

Järjestelmän raja	MousePlayerin käsittely
iFrames	Sivun kanssa samaa alkuperää olevat iframet tallennetaan sisältöineen ja toimintoineen. Muun alkuperän upotettua sisältöä (esim. YouTube-soittimet ja Stripe-maksulomakkeet) ei voi tallentaa sisäisesti selaimen tietoturvasääntöjen (Same-Origin Policy) vuoksi; se näkyy toistossa paikkamerkkinä eikä lataudu siellä.
Arkaluonteiset syötekentät (henkilötiedot)	Salasana- ja maksukentät peitetään kävijän laitteella kaikilla peittämistasoilla, ja kaikkien lomakesyötteiden täysi peittäminen on jokaisen sivuston oletus. Näkyy, että kirjoitettiin, ei mitä kirjoitettiin. Kaksi rajoitusta: kaksi heikompaa tasoa otetaan käyttöön vain kirjallisella hyväksynnällämme, eikä peittäminen koskaan kata sivun itse dokumenttiin tulostamaa sisältöä – osoitteen näyttävä vahvistussivu kuuluu tilannekuvaan. Molemmat kuvataan asiakirjassa Henkilötietojen käsittelysopimus.
Canvas- & WebGL-elementit	Canvasin sisältö tallennetaan kuvana: kerran sivun tilannekuvan mukana ja uudelleen muutosten yhteydessä, enintään noin kerran sekunnissa ja kokorajan puitteissa. Sulavat animaatiot näkyvät siksi ruutusarjana. Peitetyiltä alueilta tai muun alkuperän kuvia sisältävistä canvas-elementeistä ei siirretä kuvaa; WebGL-sisältö voi jäädä tyhjäksi.
Web Components (Shadow DOM)	Avoimet shadow root -rakenteet tallennetaan sisältöineen. Suljetut eivät ole skriptien käytettävissä; niiden sisältö puuttuu toistosta.
Siirto & selaimen tallennustila	Tiedot lähetetään salatun WebSocket-yhteyden kautta (HTTPS/WSS). Jos sitä ei voida muodostaa esimerkiksi välityspalvelimen vuoksi, skripti käyttää salattua HTTP-reittiä; hyvin suuret sivun tilannekuvat lähetetään erikseen HTTPS:llä. MousePlayer ei aseta evästeitä; se käyttää sivustolla selaimen paikallista ja istuntokohtaista tallennustilaa.
Toimettomat AFK-jaksot	Jos kävijä jättää välilehden auki ja poistuu 20 minuutiksi, moottori tunnistaa toimettomuuden automaattisesti ja tiivistää tauon toistossa, jottei aikaa kulu pysähtyneiden näkymien katsomiseen.

Miten voimme auttaa?