With the Video Player element, you can easily integrate video content into your applications and provide your users with basic media features such as play, pause, and volume control.
The Video Player element is an interactive media player that allows you to integrate video content into your applications. It provides all the essential features users need to play and pause videos, control the volume, and use the progress bar.
First, in the Data Sources module, follow the steps under Actions > New SQL Action to create the GetCourseVideo action. Test it and save it. Go to the UI Design module and connect your action to the page using “Initial Action.” Add an “Image” element and upload your image. In the Styling panel, set the Width to 250 px and the Height to 80 px. Center the Column both vertically and horizontally. Add a “Label” element below it. Define the “Value” field by following the steps: Action Results, GetCourseVideo, First, Title. Use the “Style” field in the Styling panel to set the font to “Heading 2 Text.” Below that, add a “Video Player” element. Define the “Url” field by following the steps: Action Results, GetCourseVideo, First, VideoUrl. To allow the user to perform actions such as pausing the video, adjusting the volume, and changing the playback speed, enable the “Controls” field; to have the video start muted, enable the “Muted” field; and to have the video automatically loop when it ends, enable the “Loop” field. Finally, add the “Label” element. In the “Value” field, define the following: Action Results, GetCourseVideo, First, and Description.
When the application is tested, the video content for the relevant course will be displayed via the Video Player element under the “What is Kuika Low-Code?” heading on the course details screen. The video is automatically ready when the page loads, and the user can watch the content using basic video controls such as play, pause, volume up/down, skip forward, and full screen.
