Video

House-styled video player with a glowing poster play overlay and minimal custom controls over the native video element.

Components

Video

content

interactive

<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 comes back to full strength whenever the pointer is over the player or a control takes focus. Under reduced motion the transition is suppressed; 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` — there is 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 simply remains.

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 — a quiet no-op 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

src string ='': Video source URL. A single source only; no multi-format machinery.
poster string ='': Poster image URL shown before the first play.
label string ='': Accessible name for the player region. Falls back to a generic label when empty.
autoplay boolean =false: 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 simply remains and the user starts playback themselves.
loop boolean =false: Restarts playback from the beginning when the video ends.
muted boolean =false: Mutes the audio track. Toggled live by the mute button and the M key.
controls boolean =true: 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.
preload 'none' | 'metadata' | 'auto' ='metadata': Passed through to the native video element. The default `metadata` loads dimensions and duration without buffering content.

Events

arc-play detail: { value: number }: Fired when playback starts or resumes. `detail.value` is the current time in seconds.
arc-pause detail: { value: number }: Fired when playback pauses. `detail.value` is the current time in seconds.
arc-ended detail: { value: number }: Fired when playback reaches the end. `detail.value` is the final time in seconds.

Video

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight