Video
Video dibuja un video como textura de la escena. Un Glass encima lo captura y lo refracta, cosa que un elemento video del DOM no permite.
Uso
<Video src="/clip.mp4" width={640} height={360} playing={visible} />playing es la única fuente de verdad de la reproducción. loop y muted arrancan prendidos, porque sin muted el navegador no deja reproducir sin un gesto. La primitiva no lee prefers-reduced-motion: lo decide la app con playing.
Costo
Redibuja la escena una vez por frame del video: 25 renders por segundo con un clip de 25 fps, no los del monitor. En pausa no redibuja. Cada frame se sube a la GPU, así que conviene usar fuentes de 1080p o menos.
Referencia de props
| Prop | Tipo | Default | Rango | Descripción |
|---|---|---|---|---|
src | string | requerido | | URL del video. Debe ser del mismo origen o servirse con CORS. |
width | number | requerido | | Ancho del quad en píxeles CSS. |
height | number | requerido | | Alto del quad en píxeles CSS. |
fit | VideoFit | 'cover' | | Ajuste del frame al quad: 'cover' recorta, 'fill' estira. |
playing | boolean | true | | Reproduce (true) o pausa (false). Es la única fuente de verdad: al montar con true arranca solo. En pausa se ve el frame actual (al cargar, el primero) y la escena no redibuja. |
loop | boolean | true | | Vuelve a empezar al terminar. |
muted | boolean | true | | Sin audio. Con false, el navegador puede rechazar la reproducción hasta un gesto del usuario: el video queda en pausa. |
radius | number | 0 | | Radio de esquinas en píxeles. |
opacity | number | 1 | 0..1 | Opacidad global. |
softness | number | 1.5 | | Suavidad del borde AA en píxeles. |
alt | string | undefined | | Texto alternativo. Shadow Layer de runtime (opt-in): con un alt no vacío, el video también existe como un elemento role="img" invisible en la capa del bridge, proyectado sobre el quad. Sin alt o con alt="" es decorativo y no genera DOM. |
x | number | — | | |
y | number | — | | |
z | number | — | |