Video player

Use one native browser control bar for playback, seeking, volume, captions, and fullscreen, with Atrium’s localized error recovery.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

/**
 * Integrate video player into an application-owned route.
 *
 * @author Laurent Declercq l.declercq@agon-innovation.ch
 * @version 20260921
 */
import { videoPlayer } from '@agon/atrium/components/video';
import clip from './assets/introduction.webm?url';
import captions from './assets/introduction.vtt?url&no-inline';

/**
 * Register the page-owned player.
 *
 * @param {object} context - Shared Alpine runtime.
 * @returns {void} Registers the player provider.
 */
export function register(context) {
  context.Alpine.data('introductionVideo',
    /**
     * Configure local media and its caption track.
     *
     * @returns {object} Video provider.
     */
    () => videoPlayer({
      src: clip,
      tracks: [
        {
          src: captions,
          language: 'en',
          label: 'English',
        },
      ],
    }));
}

<section x-data="introductionVideo">
  <h1 tabindex="-1">Introduction</h1>
  <include src="{{ uiRoot }}/video.html"></include>
</section>

Settings and behavior

• Required src is a browser-playable media URL.
• Optional poster is an image URL. Optional tracks contain src, language, and label.
• Copy actual media into your application assets. The filenames above are examples.
• The player does not autoplay. Native controls retain caption and fullscreen support.
• playing, failed, time, duration, and rate expose playback state.
• toggle, seek, and speed remain available for application-owned controls. The shared template uses the browser controls and wires retry and sync for recovery and state updates.
• destroy pauses playback and releases the media source.

Integration notes

Use a codec supported by your target browsers and provide captions or an appropriate transcript. Keep VTT files external with ?no-inline so strict media policies can permit same-origin tracks without data URLs. Serve WebM as video/webm and VTT as text/vtt. Remote media requires media-src and CORS configuration. Adaptive streaming, DRM, and transcoding are separate application integrations.

Showcase presentation

The showcase route plays a 14-slide product tour in English, German, or French. Its language selector initially follows the interface locale when supported and otherwise chooses English. A language change releases the previous player and mounts a paused player with matching narration and slide imagery. Only the final videos ship with this example. Posters, caption files, transcripts, and editable decks remain versioned project artifacts under docs/presentation/artifacts/. The media choice does not change the application interface language.

These assets and the selector belong to the showcase consumer. The shared uiVideo provider retains its generic source, poster, track, and cleanup contract. See the editable presentations and asset guide.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921