Video
Video player component
Usage
The Video component is used to display a video player in your application. It can be used standalone or as a media
component in Cards.
Anatomy
A standard video player typically includes:
- Video display area
- Play/pause controls
- Progress bar
- Volume control
- Fullscreen toggle
The Video component is a simple wrapper around the Video element in HTML, and visual appearance will vary depending on the browser, operating system, and other factors. The above screenshot was captured from the Chrome browser.
Related
- Cards - Can use the Video component as media content
- Image - Image component
- Audio - Audio player component
Properties
The following is a list of the properties available for Video.
We are currently updating how we implement components, and the list of properties may not be entirely accurate.
| Property | Type | Description |
|---|---|---|
textResourceBindings.altText | string | Alternative text displayed for screen readers |
video.src | object | An object containing the video files to play. The key is the language code, and the value is the URL to the video file. |
Configuration
We are currently updating Altinn Studio Designer with more configuration options!
The documentation is continuously updated, and there may be more settings available than what is described here, and
some settings may be in beta version.
Add component
You can add a component in Altinn Studio Designer by dragging it from the list of
components to the page area.
Selecting the component brings up its configuration panel.
Basic component:
App/ui/layouts/{page}.json{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
"data": {
"layout": [
{
"id": "myVideo",
"type": "Video",
"textResourceBindings": {
"altText": "Alternative text for the video (for screen readers)"
},
"video": {
"src": {
"en": "https://example.com/video.mp4",
"nb": "/org/app/assets/video.mp4"
}
}
}
]
}
}