Video Player
Plays video from the asset library or uploads folder, shows a LIVE camera feed from the site’s own media server, or embeds a hosted link.
Reach for it when you need:
- A live camera over a critical process
- Training clips and recorded incidents
Component name: VideoPlayer · Category: Display
In the palette: Plays a video from the asset Library or the Uploads folder (training clips, SOPs, recorded incidents) with themed controls, shows a LIVE camera feed from the site's own media server, or embeds a YouTube/Vimeo link. Library, Uploads and live camera feeds all work OFFLINE; hosted video needs internet access and an administrator to enable External frames. Browsers play MP4 (H.264) and WebM — a DVR export in .avi/.mkv must be re-exported as MP4.
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
src | asset | "" | The clip, from the asset Library or the Uploads folder. Bindable — bind a tag/expression yielding a path (e.g. Videos/line1/startup.mp4) or an upload:// ref (a File Manager widget's {{ <name>.selectedItem.ref }}) to swap the video at runtime. Use mediaserver://<connection id> for a LIVE feed — the stream is proxied through QUBIQ, so the media server's address and password never reach the browser. A YouTube or Vimeo link switches to embed mode, where the provider's own player is shown and the playback bindings below stop applying. |
poster | asset | "" | Still image shown before playback starts. With preload 'none' this means a view full of video widgets costs no video bytes until an operator presses play. |
controls | enum | full | How much player chrome to show. Ignored in embed mode (the provider supplies its own). Options: none · minimal · full. |
autoPlay | boolean | false | Start playing on load. Forces muted — browsers block unmuted autoplay, and an unattended HMI panel that starts playing audio is an operational hazard. |
muted | boolean | false | Start muted. Bindable. |
loop | boolean | false | Restart automatically when the clip ends. |
volume | number | 1 | Playback volume, 0–1. Bindable. |
playbackRate | number | 1 | Playback speed (1 = normal). Bindable. |
playing | boolean | false | Bindable COMMAND — drive play/pause from a tag or an event action. Unavailable in embed mode. |
seekTo | number | 0 | Bindable COMMAND — jump to this position, in seconds. Applied only when the value CHANGES, so an operator scrubbing manually is never yanked back. Unavailable in embed mode. |
preload | enum | metadata | How much to fetch before play is requested. Keep 'metadata' on views with several videos — 'auto' starts a full download per widget as soon as the view opens. Options: none · metadata · auto. |
objectFit | enum | contain | How the picture fills its box. Options: contain · cover · fill. |
streamQuality | enum | auto | Live feeds only. Which of the media server's streams to pull. Auto uses the camera's low-resolution sub-stream for a small tile — the same picture at that size, for a fraction of the decoding, which is what lets a wall of cameras run at all. Falls back to the main stream if no sub-stream is configured. Options: auto · main · sub. |
interactive | boolean | true | Allow playback gestures in LiveView. The editor always locks them so selecting and moving the widget isn't stolen by the player. |
output | object | {"currentTime":0,"duration":0,"paused":true,"ended":false,"b… (truncated) | Read-only runtime outputs the widget publishes — bind a leaf, e.g. {{ <VideoPlayer>.output.currentTime }}. |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
play | Play | Video | Media state, under media. |
pause | Pause | Video | Media state, under media. |
ended | Ended | Video | Media state, under media. |
videoError | Playback error | Video | Media state, under media. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Library, uploads and live camera feeds work offline; hosted video needs internet access and an administrator to enable external frames.
Browsers play MP4 (H.264) and WebM — a DVR export in .avi/.mkv must be re-exported.
For multi-camera tiles, use the media server’s sub-streams; several full-resolution feeds will saturate a panel PC.