Atlas Forms
Video Player
The video control embeds an HTML5 video player inside a form. It supports MP4, WebM, and streaming URLs. Use it to embed instructional videos, screen recordings, or media review workflows where a video must be watched before a form can be submitted.
Minimal Example
{
"id": "training-video",
"type": "video",
"label": "Onboarding Video",
"width": "full",
"settings": {
"src": "https://cdn.example.com/videos/onboarding.mp4",
"controls": true
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
src | string | — | Video URL (MP4, WebM, or streaming URL). Supports template expressions: {{context.videoUrl}} |
poster | string | — | Thumbnail image URL shown before playback starts |
controls | boolean | true | Show native browser video controls |
autoplay | boolean | false | Start playing automatically on load (requires muted: true in most browsers) |
muted | boolean | false | Start with audio muted |
loop | boolean | false | Loop the video continuously |
preload | none | metadata | auto | metadata | Browser hint for pre-loading behaviour |
width | string (CSS) | "100%" | Player width |
height | string (CSS) | "auto" | Player height — defaults to intrinsic aspect ratio |
aspectRatio | string | "16/9" | CSS aspect-ratio for responsive sizing |
captions | string | — | URL to a WebVTT captions file (.vtt) |
Dynamic Source from Context
The src supports template expressions, allowing the video URL to come from an API response stored in the form context:
{
"id": "case-recording",
"type": "video",
"label": "Case Recording",
"settings": {
"src": "{{context.caseMedia.videoUrl}}",
"poster": "{{context.caseMedia.thumbnailUrl}}",
"controls": true,
"preload": "metadata",
"aspectRatio": "16/9"
}
}Autoplay Muted Background Video
A muted, looping video that autoplays — common for decorative or instructional context panels:
{
"id": "product-demo",
"type": "video",
"settings": {
"src": "https://cdn.example.com/demo-loop.mp4",
"autoplay": true,
"muted": true,
"loop": true,
"controls": false,
"aspectRatio": "16/9"
}
}Watch-to-Submit Pattern
Use a visibilityRule on a submit button to require the video to finish before submission. This requires a form action that sets a flag when the video's onEnded event fires:
// Video control fires an onEnded action that sets context.videoWatched = true
{
"id": "compliance-video",
"type": "video",
"settings": {
"src": "https://cdn.example.com/compliance-training.mp4",
"controls": true,
"onEnded": {
"type": "setContextValue",
"path": "videoWatched",
"value": true
}
}
},
// Submit button is only visible after video ends
{
"id": "submit-btn",
"type": "button",
"label": "I have watched the video — Submit",
"visibilityRule": "context.videoWatched === true"
}Supported Formats
| Format | MIME Type | Browser Support |
|---|---|---|
| MP4 (H.264) | video/mp4 | All modern browsers |
| WebM (VP9) | video/webm | Chrome, Firefox, Edge |
| HLS stream | application/x-mpegURL | Safari native; others via Media Source Extensions |
| OGG Theora | video/ogg | Firefox, Chrome (legacy) |
Signed URLs for Private Media
Do not embed permanent S3 or Azure Blob URLs for private videos. Generate short-lived signed URLs on the server and pass them into the form context via an
onLoad action. The template expression {{context.media.videoUrl}} will pick up the signed URL at render time.