Le plus léger : un canevas plus lecture/pause/boucle/déplacement. À utiliser là où une page ne fait que rejouer une forme déjà dessinée et ne veut pas de ciel derrière.
<rr0-ufo src="sighting.json"></rr0-ufo>| Membre | Nature | Rôle |
|---|---|---|
src | attribut | URL d'un enregistrement, chargée à la connexion et à chaque changement |
sightingData | propriété | L'enregistrement comme objet simple — à relire après modification, ou à poser au lieu d'utiliser src |
sighting | propriété (lecture) | Le modèle vivant : date et lieu réels, plus la chronologie de l'enregistrement |
loadFromSrc(url) | méthode (async) | Ce que déclenche l'attribut. À attendre quand l'enregistrement doit être arrivé avant toute autre chose — jouer avant sa résolution trouve une chronologie de longueur nulle |
play() / pause() | méthode | Dire quel état on veut, plutôt que basculer l'état courant |
togglePlayPause() | méthode | Ce que font le bouton et le clic |
playbackState | propriété (lecture) | "stopped", "playing" ou "paused" |
currentTime | propriété | La tête de lecture, dans les unités de la chronologie — pas des millisecondes réelles, voir positionLabel |
seekableDuration | propriété (lecture) | L'étendue que currentTime peut prendre |
autoReplayEnabled | propriété | La lecture en boucle, active par défaut. À mettre à false si vous voulez l'événement ended |
positionLabel / durationLabel | propriété (lecture) | Position et durée déjà mises en forme — heure réelle quand l'observation en énonce une |
refresh() | méthode | Relit la durée et repeint — à appeler après avoir modifié sighting.timeline de l'extérieur |
canvasElement / renderer | propriété (lecture) | Le <canvas>, et ce qui peint dessus |
enableClickToPlay | propriété | Si un clic bascule la lecture et un double-clic le plein écran (les deux, ou aucun). À mettre à false là où le canevas vous sert à autre chose |
fullscreenTarget | propriété | Quel élément le bouton plein écran agrandit. <rr0-scene> y met sa propre scène, pour que ce soit le ciel qui s'agrandisse et non la seule surcouche |
Ce qu'il émet#
| Événement | Quand | Où l'écouter |
|---|---|---|
ended | Une fois, quand la lecture atteint la fin sans boucler. Ni à la pause, ni à un déplacement manuel jusqu'à la fin | N'importe où : il est bubbling et composed, donc il sort de <rr0-scene> et de <rr0-sighting> et atteint l'élément que vous avez posé sur la page. C'est ainsi qu'on enchaîne plusieurs enregistrements |
timedisplaychange | Quand les compteurs basculent entre heure et temps écoulé | N'importe où, comme ci-dessus |
timeupdate | À chaque image de lecture et à chaque déplacement, avec detail.time | Sur cet élément seulement. Il n'est ni bubbling ni composed : une page qui tient un <rr0-scene> doit passer par son ufoElement — il est destiné aux éléments qui composent celui-ci |
L'intégrer#
<script type="module" src="https://ufoathome.org/lib/rr0-ufo.mjs"></script>
<rr0-ufo src="sighting.json"></rr0-ufo>Ou, après npm install @rr0/ufoathome : import "@rr0/ufoathome/ufo".
Le bundle pèse 16 Ko compressé et enregistre le tag lui-même — rien d'autre à appeler.
Le hub dit ce que cela suppose par ailleurs,
et partager une observation a l'exemple complet, à essayer et à copier.