Video pages embed and play video content directly within the app, with support for playback controls and captions to enhance the viewing experience.
This configuration defines a page’s core behavior: it sets type, name, color, and cover, controls navigation with routes, next page, and timeout, marks if it’s the final step, manages display options like fullscreen, landscape, and screenshots, and specifies layout and text direction.
| Field | Type | Default Value | Description |
|---|---|---|---|
| @Type | PageType | "Video" | Specifies the page type as a video page |
| Name | PageName | {name} | Name or title of the page |
| Color | String | {color} | Background color of the page |
| Cover | String | {cover} | Optional cover image for the page |
| Routes | Array |
[] | List of route scripts or actions associated with the page |
| NextPage | Page | 0 | ID of the next page to navigate to |
| Timeout | Number | 0 | Duration in seconds before automatic navigation |
| Finish | Boolean | false | Indicates if this page marks the end of a sequence |
| FullScreen | Boolean | false | Determines if the page should be displayed in full screen mode |
| CanLandScape | Boolean | false | Allows landscape orientation if true |
| CanScreenShot | Boolean | false | Allows users to take screenshots if true |
| Dir | Direction | {dir} | Layout direction (e.g., "ltr" or "rtl") |
| Dir.Text | TextDirection | {dir} | Text direction for content on the page |
Coding:
{
"@Type": "Video",
"Name": "{name}",
"Color": "{color}",
"Cover": "{cover}",
"Routes": [],
"NextPage": 0,
"Timeout": 0,
"Finish": false,
"FullScreen": false,
"CanLandScape": false,
"CanScreenShot": false,
"Dir": "{dir}",
"Dir.Text": "{dir}"
}This configuration manages the page title bar: it can show or hide the bar, set its background color, define the title text with size, color, and style, link a menu page, and assign icons for the back and menu buttons.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Title.Show | Boolean | true | Shows or hides the page title bar |
| Title.Color | Color | {titleColor} | Background color of the title bar |
| Title.Text | String | {titleText} | Title text displayed at the top |
| Title.Text.Size | Number | 16 | Font size of the title text |
| Title.Text.Color | Color | {titleTextColor} | Text color of the title |
| Title.Text.Style | TextStyle | {titleTextStyle} | Font style (bold, italic, etc.) |
| Title.Menu | PageName | {pageName} | Menu page name to open from title |
| Title.Back.Logo | Logo | {backLogo} | Icon used for the back button |
| Title.Menu.Logo | Logo | {menuLogo} | Icon used for the menu button |
Coding:
{
"@Type": "Video",
"Title.Show": true,
"Title.Color": "{titleColor}",
"Title.Text": "{titleText}",
"Title.Text.Size": 16,
"Title.Text.Color": "{titleTextColor}",
"Title.Text.Style": "{titleTextStyle}",
"Title.Menu": "{pageName}",
"Title.Back.Logo": "{backLogo}",
"Title.Menu.Logo": "{menuLogo}"
}This configuration defines the video player: it controls auto‑play behavior, toggles playback controls (play, pause, seek), and sets the video source URL to be played.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Auto.Show | Boolean | false | Determines whether the video starts playing automatically when loaded. |
| Control.Show | Boolean | true | Enables or disables the display of playback controls (play, pause, seek). |
| Src | URL | {videoSrc} | The URL or path of the video file to be played. |
Coding:
{
"@Type": "Video",
"Auto.Show": false,
"Control.Show": true,
"Src": "{videoUrl}"
}To see how to create this page in Applin Studio (no-code mode), visit:
Design the Video Page in Applin Studio