Video
House-styled video player with a glowing poster play overlay and minimal custom controls over the native video element.
<arc-video>Overview
Video wraps the native <video> element in the house player chrome. Before the first play it shows the poster with a large, glowing play button; once playback starts, a minimal floating control bar takes over: play/pause, a monospace time readout, a scrub bar that seeks directly, a mute toggle, and a fullscreen button. During playback the bar dims after two seconds of idle rather than disappearing. It stays legible and clickable, so the controls never have to be summoned, and it comes back to full strength whenever the pointer is over the player or a control takes focus. Under reduced motion the transition is suppressed but the dimming is not.
The player answers to the standard keyboard map when focused: Space or K toggles playback, the arrow keys seek five seconds in either direction, M toggles mute, and F toggles fullscreen. Every state change surfaces as a house event: arc-play, arc-pause, and arc-ended, each carrying the current time in seconds on detail.value.
The component takes a single src, with no <source> fallback chain for multiple formats. Serve one broadly supported encoding (H.264/MP4 plays everywhere), or drop down to the native element when you need format negotiation or adaptive streaming. For ambient or presentation video, set controls="false" and pair autoplay with muted. Browsers only honor autoplay for muted video, and when autoplay is blocked the play overlay stays up.
Guidelines
When to use
- Provide a `label`. It names the player region for screen readers and the overlay play button
- Set a `poster` so the pre-play frame shows content instead of an empty surface
- Pair `autoplay` with `muted`; browsers block unmuted autoplay
- Use `controls="false"` with `autoplay`, `muted`, and `loop` for ambient background video
- Serve a single broadly supported format such as H.264/MP4
When not to use
- Do not use arc-video for a still frame. Use arc-image for anything that does not play
- Do not use it to page through a set of clips or mixed media. arc-carousel handles sequenced content
- Do not rely on multiple `<source>` formats. The component takes exactly one `src`
- Do not leave ambient video unmuted; sound without a visible control is hostile
Features
- Poster state with a large centered play button carrying the house glow
- Floating control bar: play/pause, monospace time readout, direct-seek scrub bar, mute, fullscreen
- Controls dim after two seconds of idle playback and return to full strength on hover or focus; never hidden outright
- Standard player keys on the focused player: Space/K, arrow-key seeking, M, F
- House events with the current time on `detail.value`: `arc-play`, `arc-pause`, `arc-ended`
- `controls="false"` ambient mode for presentation and background video
- Native `preload` passthrough, defaulting to `metadata`
- Fullscreen is feature-detected and does nothing where the API is unavailable
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<arc-video
src="/media/launch-recap.mp4"
poster="/media/launch-recap.jpg"
label="Launch recap"
></arc-video>
<!-- Ambient background video: no controls, muted autoplay loop -->
<arc-video
src="/media/hero-loop.mp4"
controls="false"
autoplay
muted
loop
></arc-video>import { Video } from '@arclux/arc-ui-react';
export default function Example() {
return (
<Video
src="/media/launch-recap.mp4"
poster="/media/launch-recap.jpg"
label="Launch recap"
onArcPlay={(e) => console.log('started at', e.detail.value)}
/>
);
}<script setup>
import { Video } from '@arclux/arc-ui-vue';
</script>
<template>
<Video
src="/media/launch-recap.mp4"
poster="/media/launch-recap.jpg"
label="Launch recap"
/>
</template><script>
import { Video } from '@arclux/arc-ui-svelte';
</script>
<Video
src="/media/launch-recap.mp4"
poster="/media/launch-recap.jpg"
label="Launch recap"
/>import { Component } from '@angular/core';
import { Video } from '@arclux/arc-ui-angular';
@Component({
imports: [Video],
template: `
<arc-video
src="/media/launch-recap.mp4"
poster="/media/launch-recap.jpg"
label="Launch recap"
/>
`,
})
export class MediaComponent {}import { Video } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Video
src="/media/launch-recap.mp4"
poster="/media/launch-recap.jpg"
label="Launch recap"
/>
);
}import { Video } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Video
src="/media/launch-recap.mp4"
poster="/media/launch-recap.jpg"
label="Launch recap"
/>
);
}API
srcstring''- Video source URL. A single source only; no multi-format machinery.
posterstring''- Poster image URL shown before the first play.
labelstring''- Accessible name for the player region. Falls back to a generic label when empty.
controlsbooleantrue- Shows the custom control bar once playback has started, and enables the player keyboard shortcuts. Defaults to true; set
controls="false"for ambient or presentation video. autoplaybooleanfalse- Starts playback as soon as the browser allows. Browsers only honor autoplay when the video is muted, so pair it with
muted; when autoplay is blocked, the play overlay remains and the user starts playback themselves. loopbooleanfalse- Restarts playback from the beginning when the video ends.
mutedbooleanfalse- Mutes the audio track. Toggled live by the mute button and the M key.
preload'none' | 'metadata' | 'auto''metadata'- Passed through to the native video element. The default
metadataloads dimensions and duration without buffering content.
Events
arc-playdetail:{ value: number }- Fired when playback starts or resumes.
detail.valueis the current time in seconds. arc-pausedetail:{ value: number }- Fired when playback pauses.
detail.valueis the current time in seconds. arc-endeddetail:{ value: number }- Fired when playback reaches the end.
detail.valueis the final time in seconds.
See Also
- ImageEnhanced image component with shimmer loading skeleton, smooth fade-in transition, error fallback, and aspect ratio presets.
- CarouselA scrollable slide container with navigation arrows, dot indicators, auto-play, looping, and keyboard controls.
- Aspect RatioContainer that enforces a width-to-height ratio on its content, for images, videos, and embedded media.
- WaveformAudio waveform visualization that doubles as a scrubber. Renders a consumer-computed peaks array as an SVG waveform with an accent played region and glowing playhead, and becomes a full seek control when interactive.