Video

The Video element lets you embed and play videos directly in your AVStudio project. It supports static or dynamic sources, poster images, autoplay, mute, and layout/visibility controls.

Summary:
This guide shows how to insert a Video element, connect a video file, configure poster and playback options, style it, add actions, and manage visibility/signals.

---

Adding a Video Element

There are several ways to add a Video element in AVStudio.

1. From Page Containers

1. Go to Container under Page Containers.
2. Click the dropdown arrow, select Elements, and choose Add Element.
3. In the Type dropdown, select Video.
4. Click Add Element.

2. By dragging from the elements list

1. On the right-hand side of the Editor, locate the Video element icon.
2. Drag the icon onto the Editor workspace.
3. The Video element appears on the layout.

---

Video Properties

When the Video element is selected in the Editor, its properties appear on the right-hand panel.

Video friendly name

Specifies the name of the element. Click the edit icon to rename it. Used to identify the element across the project.

Video dataset source

Defines how the video retrieves data.

Option	Description
Static	Uses fixed data; no additional setup required.
Dynamic	Opens Select datasource to work with to link a data source.

Dimensions

Controls the video’s width and height.

Field	Description
Width	Enter a fixed value or use {-} for a dynamic dimension. Units: px, %.
Height	Enter a fixed value or use {-} for a dynamic dimension. Units: px, %.

Mode selector by index or name

Defines the video’s mode by index or name. Enter a value, use {-}, or click fx to assign a post-processing function.

Available video modes

Manages the video’s modes.

• Default mode is included automatically.
• Click + to open Create new video mode and add more modes.

Video CSS classname

Sets the CSS class for styling. Enter a class directly (default: videoElement), use {-}, or click fx to assign a function.

---

Settings

Customize poster, video source, and playback behavior.

Poster image

Controls the placeholder image before playback.

Setting	Description
Library	Select an image from the media library (Pick image).
URL	Enter an external image URL.
Dynamic pick from library	Enable to select the poster dynamically.

Video file URL

Defines the source video file.

• Enter a static URL or use {-} for a dynamic path.
• Use the folder icon to browse media where available.

Playback controls

Option	Description
AutoPlay	Start playback automatically when loaded.
Muted	Start playback without sound.
Hide All Controls	Hide built-in player controls for a clean UI.

---

Design

Visual styling for the video container.

Setting	Description
Background color	Choose a color or use {-} for a dynamic value.
Border	Toggle Default or Override to customize borders.
Shadow	Set to None or Enabled.
Reflect	Set to None or Enabled to add a reflection effect.

---

Actions

Define triggers and integrations (Crestron, variables, HTTP, etc.).

Adding a new action

1. Click Add new action.
2. The Create new action for video modal opens.
3. Configure:
   • Name — action name.
   • Behaviour — when it triggers (e.g., On Play, On Pause, On Change).
   • Execution Delay — delay in milliseconds (ms).
4. Choose a target tab: Crestron, Routing, Variables, Parameters, Overlays, Functions, HTTP Web Requests, Web Sockets, or Audio.
5. Under the selected tab, define fields such as Type and Signal Name, and choose Push onChange Value or Push custom Value.
6. Click Create action to save.

---

State

Manage visibility and disabled state.

Visibility

Setting	Description
Orientation visibility	Show in Both, Portrait, or Landscape.
Direct Value / Crestron FB	Control visibility directly or via Crestron feedback.
Visibility dynamic value	Use {-} to bind visibility dynamically.
Reserve space while hidden	Keep layout spacing when hidden.

Disabled signal

Enter a signal name directly or use {-} to control when the video element is disabled.
Default label: Now Always Enabled.

---

Key Points

• Use Dynamic dataset source and {-} bindings for data-driven videos.
• Provide a lightweight poster image to improve perceived load speed.
• Consider Muted + AutoPlay for silent, loop-style UI videos.
• Hide controls for decorative or background video; keep them for user-driven playback.

---

Frequently Asked Questions (FAQ)

Which video formats work best?
Use widely supported formats like MP4 (H.264/AAC). For cross-device reliability, host videos in a CDN and provide HTTPS links.

Can I trigger actions when the video starts or pauses?
Yes. Add actions with Behaviour set to events like On Play or On Pause, then configure the target (e.g., Crestron or HTTP Web Requests).

How do I change the poster image dynamically?
Enable Dynamic pick from library or bind the poster via {-} to a parameter/variable that updates at runtime.