Video

🎬 Video Component in Lowcoder

The Video component in Lowcoder enables seamless integration of video content into your applications, enhancing user engagement through multimedia elements.

🔧 Key Features

• Versatile Source Support: Play videos from various sources, including URLs and embedded streams.

• Playback Controls: Users can play, pause, and seek within the video.

• Autoplay and Looping: Configure videos to start automatically and loop continuously.

• Responsive Design: Adjusts to different screen sizes for optimal viewing on all devices.

🛠 Configuration Options

• Video Source: Specify the URL or path to the video file.

• Autoplay: Enable or disable automatic playback upon loading.

• Loop: Set the video to replay automatically after it ends.

• Controls Visibility: Choose whether to display playback controls to the user.

• Muted: Start the video with sound muted or unmuted.

• Styling: Customize dimensions, borders, and other visual aspects to match your application's design.

⚙️ Integration Tips

• Dynamic Source Binding: Use Lowcoder's data binding to dynamically set the video source based on user interactions or data queries.

• Event Handling: Implement event handlers to trigger actions when the video starts, pauses, or ends.

• Responsive Layout: Combine with layout components to ensure the video scales appropriately across devices.

Component Playground

On Component Playground, you can interact with the Video component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Video component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Component Auto-Docs

In the Auto-Docs of Video component, we have shown how to use different properties of the Video component. It also includes the Styling properties of the Video component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Dropdown components

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
src	String	Returns the Source value of the video component
duration	Number	Returns the total duration of the Video in the Video component ( In Seconds )
hidden	Boolean	Returns True or False based on whether the video component is hidden or not
currentTimeStamp	Number	Returns the current time of the Video being played in the the Video component ( Current running second of the Video )

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Play	Triggers, when a User Plays the Video in Video component
Pause	Triggers, when a User Pauses the Video in Video component
Load	Triggers, when Video loads in the Video component
Ended	Triggers, when the Video has ended

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setDuration() :

video1.setDuration() method sets the Video component's Duration property.

video1.setDuration(100);

clearDuration() :

video1.clearDuration(); clears the Video component's Duration property.

video1.clearDuration();

resetDuration() :

video1.resetDuration() method resets the Video component's Duration property to the default Duration of the Video component.

video1.resetDuration();

setCurrentTimeStamp() :

video1.setCurrentTimeStamp() method sets the Video component's CurrentTimeStamp property.

video1.setCurrentTimeStamp(10);

clearCurrentTimeStamp() :

video1.clearCurrentTimeStamp() clears the Video component's CurrentTimeStamp property.

video1.clearCurrentTimeStamp();

resetCurrentTimeStamp() :

video1.resetCurrentTimeStamp() method resets the Video component's CurrentTimeStamp property to the default CurrentTimeStamp of the Video component.

video1.resetCurrentTimeStamp();

seekTo() :

video1.seekTo() method moves the Video of the Video component to the given second of the Video.

video1.seekTo(10);

showPreview() :

video1.showPreview() method shows the Preview of the Video in the Video component.

video1.showPreview();

📌 Use Cases

• Tutorials and Demonstrations: Embed instructional videos to guide users through processes.

• Product Showcases: Highlight product features and benefits through engaging video content.

• Customer Testimonials: Share client feedback and success stories in a compelling format.

• Marketing Campaigns: Enhance promotional efforts with dynamic video presentations.

---

By leveraging the Video component in Lowcoder, developers can enrich their applications with multimedia content, providing users with an interactive and informative experience.

---