Video

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

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:

CategoryParameterDescription
BasicReference NameUnique name for internal reference.
BasicInput SourceChoose between URL or Asset Manager.
BasicAspect RatioMaintain proper video size (e.g., 16:9, 1:1).
BasicAutoPlayStart playing automatically on page load.
BasicLoop VideoReplay video continuously.
BasicShow ControlsDisplay video controls like play, pause, and seek.
BasicAllow Full ScreenLet users expand the video to full screen.
BasicPlayback Speed MenuShow speed options (e.g., 0.5x, 1x, 2x).
BasicLoad on Page LoadPreloads the video when the page loads.
BasicPause on NavigationPauses the video when the user navigates away.
VisibilityVisible/EnabledControl visibility and state via business rules.
StyleMargin & AlignmentPositioning and alignment options (pixel-precise control).
Shape & SizeAutoFill / ManualAuto-resize or manually set width/height in % or px.

Supported Aspect Ratios (with usage hints)

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

Supported Formats:

PlatformFormats
AndroidMP4, WebM, 3GP
iOSMP4, MOV, M4V
WebMP4, WebM, Ogg

Events

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

Event NameDescription
On PlayTriggered when the user starts video playback. Useful for logging engagement or starting parallel actions.
On PauseTriggered when the video is paused, either by the user or through code. Can be used to halt dependent workflows.
On EndFires when the video finishes playing. Ideal for guiding users to the next step, such as a screen transition or showing a button.
On LoadTriggered when the video is fully loaded and ready to play. Useful for showing custom loading indicators or enabling UI elements.
On ErrorFires 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.
Was this article helpful?
YesNo