Video

This ELEMENT allows developers to embed and customize video playback directly within the applications. It supports local and online videos, includes flexible playback settings, and integrates new event triggers. Additionally, it fully supports dynamic multimedia experiences without relying on third-party video solutions.

When to Use

Use the Video Player element to display and control video content directly within the app interface. It’s ideal for inline playback, custom controls, and event-based interactions.

Choose this element if:

• Videos are hosted locally or via Asset Manager.
• Users should view videos without leaving the app.
• You need custom playback behavior (autoplay, mute, loop).
• Events must be triggered based on video actions (e.g., play, pause).

Common Use Cases

• Onboarding Videos: Display welcome or how-to videos to guide new users.
• In-App Tutorials: Embed walkthroughs to explain app features or workflows.
• Marketing or Promo Clips: Play promotional content during user journeys.
• Training & Compliance: Deliver video-based learning for internal or external users.
• Product Demos: Showcase product functionality in a dynamic format.

Concept

The Video element embeds a video player directly within the app interface. Videos can be sourced from the Asset Manager, external URLs, or local file paths. Developers can configure playback behavior—such as autoplay, mute, loop, and control visibility—and attach event triggers like OnPlay, OnPause, and OnEnd to enable workflows or capture user engagement.

Example Scenario
A banking app includes a 20-second explainer video on the home screen to educate users about its new UPI feature. The video, sourced from the Asset Manager, plays automatically. Once it ends, the OnEnd event triggers a transition to the next screen.

Prerequisites

• The video file must be in a supported format (e.g., .mp4, .webm).
• Either upload the video to the Asset Manager or provide a valid video URL.

Steps

1. Open vDesigner 2.0 and navigate to the screen where the video should appear.
2. From the Elements Panel, drag and drop the Video Element onto the canvas.
3. After dropping the element on the panel, a Property Panel of the element opens on the right.
4. In the Property Panel on the right, configure the properties such as Basic, Visibility, Style, Shape and Size, Events, etc.
5. Save and Publish the screen as required.

Property Panel

Let’s understand properties one by one:

Category	Parameter	Description
Basic	Reference Name	Unique name for internal reference.
Basic	Input Source	Choose between URL or Asset Manager.
Basic	Aspect Ratio	Maintain proper video size (e.g., 16:9, 1:1).
Basic	AutoPlay	Start playing automatically on page load.
Basic	Loop Video	Replay video continuously.
Basic	Show Controls	Display video controls like play, pause, and seek.
Basic	Allow Full Screen	Let users expand the video to full screen.
Basic	Playback Speed Menu	Show speed options (e.g., 0.5x, 1x, 2x).
Basic	Load on Page Load	Preloads the video when the page loads.
Basic	Pause on Navigation	Pauses the video when the user navigates away.
Visibility	Visible/Enabled	Control visibility and state via business rules.
Style	Margin & Alignment	Positioning and alignment options (pixel-precise control).
Shape & Size	AutoFill / Manual	Auto-resize or manually set width/height in % or px.

Supported Aspect Ratios (with usage hints)

Aspect Ratio	Use Case
16:9	Standard widescreen (YouTube, Netflix)
4:3	Classic tablets and older screens
21:9	Cinematic ultra-wide formats
1:1	Social platforms like Instagram feed
9:16	Vertical videos (TikTok, Shorts)
3:2	Older mobile and eBook screens
5:4	Document readers or business displays

Supported Formats:

Platform	Formats
Android	MP4, WebM, 3GP
iOS	MP4, MOV, M4V
Web	MP4, WebM, Ogg

Events

These events allow you to trigger specific actions or workflows based on user interactions or the video’s state:

Event Name	Description
On Play	Triggered when the user starts video playback. Useful for logging engagement or starting parallel actions.
On Pause	Triggered when the video is paused, either by the user or through code. Can be used to halt dependent workflows.
On End	Fires when the video finishes playing. Ideal for guiding users to the next step, such as a screen transition or showing a button.
On Load	Triggered when the video is fully loaded and ready to play. Useful for showing custom loading indicators or enabling UI elements.
On Error	Fires if there’s an issue with loading or playing the video, such as a missing file or unsupported format. Enables fallback behavior.

Best Practices

• Use compressed and optimized video files to reduce load time.
• Keep videos short to avoid user disengagement.
• Enable muted autoplay if the video starts automatically, to align with browser policies.
• Use On End events to guide user flow after video completion.
• Provide fallback images or text if the video fails to load.
• Store frequently used videos in the Asset Manager for reusability and maintenance.