co-video

Reproductor de video con barra de controles personalizada y ampliamente configurable: relación de aspecto, radios, autoocultado de controles, velocidad de reproducción, Picture-in-Picture, descarga y umbral de visualización. Cada control puede mostrarse u ocultarse de forma independiente.

Demo

Ver código

<co-video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" aspect-ratio="16:9" rounded="lg"></co-video>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`allowDownload`	`allow-download`	`boolean`	`false`	Enable download functionality
`aspectRatio`	`aspect-ratio`	`"16:9" \| "1:1" \| "21:9" \| "4:3" \| "auto"`	`'16:9'`	Container aspect ratio
`autoplay`	`autoplay`	`boolean`	`false`	Auto-start playback (requires muted for browser autoplay)
`controls`	`controls`	`boolean`	`true`	Master toggle for custom control bar
`controlsAutoHide`	`controls-auto-hide`	`boolean`	`true`	Auto-hide controls after inactivity
`controlsAutoHideDelay`	`controls-auto-hide-delay`	`number`	`3000`	Milliseconds before controls hide
`currentTime`	`current-time`	`number`	`0`	Current playback position in seconds (enables resume)
`disabled`	`disabled`	`boolean`	`false`	Disabled state
`locale`	`locale`	`"en" \| "es" \| "pt"`	`'es'`	Language for labels and aria attributes
`loop`	`loop`	`boolean`	`false`	Loop playback
`muted`	`muted`	`boolean`	`false`	Muted state
`playbackRate`	`playback-rate`	`number`	`1`	Playback speed
`playbackRates`	`playback-rates`	`string`	`'[0.5, 0.75, 1, 1.25, 1.5, 2]'`	Available playback speeds (JSON array string)
`poster`	`poster`	`string`	`''`	Poster/thumbnail image URL
`preload`	`preload`	`"auto" \| "metadata" \| "none"`	`'metadata'`	Preload behavior
`rounded`	`rounded`	`"lg" \| "md" \| "none" \| "sm" \| "xl"`	`'lg'`	Border radius
`showDownload`	`show-download`	`boolean`	`false`	Show download button
`showFullscreen`	`show-fullscreen`	`boolean`	`true`	Show fullscreen button
`showPip`	`show-pip`	`boolean`	`false`	Show Picture-in-Picture button
`showPlay`	`show-play`	`boolean`	`true`	Show play/pause button
`showProgress`	`show-progress`	`boolean`	`true`	Show progress/seek bar
`showSpeed`	`show-speed`	`boolean`	`false`	Show playback speed selector
`showTime`	`show-time`	`boolean`	`true`	Show time display
`showVolume`	`show-volume`	`boolean`	`true`	Show volume controls
`src`	`src`	`string`	`''`	Video source URL
`type`	`type`	`string`	`''`	MIME type hint
`volume`	`volume`	`number`	`1`	Initial volume (0-1)
`watchThreshold`	`watch-threshold`	`number`	`0`	Progress percentage (0-100) that triggers coThresholdReached. 0 = disabled

Eventos

Evento	Detail	Bubbles	Cancelable
`coDownload`	`{ src: string; }`	✓	✓
`coEnded`	`void`	✓	✓
`coError`	`{ code: number; message: string; }`	✓	✓
`coFullscreenChange`	`{ fullscreen: boolean; }`	✓	✓
`coPause`	`void`	✓	✓
`coPipChange`	`{ pip: boolean; }`	✓	✓
`coPlay`	`void`	✓	✓
`coPlaybackRateChange`	`{ rate: number; }`	✓	✓
`coReady`	`{ duration: number; }`	✓	✓
`coSeeked`	`{ from: number; to: number; }`	✓	✓
`coThresholdReached`	`{ threshold: number; currentTime: number; duration: number; }`	✓	✓
`coTimeUpdate`	`{ currentTime: number; duration: number; progressPercent: number; }`	—	✓
`coVolumeChange`	`{ volume: number; muted: boolean; }`	✓	✓

Slots

Slot	Descripción
`(default)`	Default slot (unused, reserved for future captions/overlays)

CSS Parts

Part	Descripción
`::part(big-play)`
`::part(container)`
`::part(controls)`
`::part(poster)`
`::part(progress)`
`::part(toolbar)`
`::part(video)`

CSS Custom Properties

Este componente no expone CSS custom properties.