Component Control | Audio/Video | Play, Pause, Stop
Optimize the live user experience with Momen for smooth audio and video play, pause, and stop actions.
Introduction
This tutorial will help you explore the dynamic control of audio and video components with Momen's "Component Control | Audio/Video | Play, Pause, Stop" feature. Whether adding background music or orchestrating multimedia interactions, empower your web app with precise control using Momen's versatile component features.
Actions in Brief
The media resource incorporates settings for play, pause, and stop actions for both audio and video elements.
π‘ Tips:
When dealing with multiple audio or video elements on a page, it is advisable to rename each one. This makes it easier to select and identify the specific audio or video component you want to work with.
Videos can be directly uploaded using the video component or through the background, as outlined in the detailed description of the "Video" Tutorial. However, audio is uniquely handled and can only be imported through the background.
Operating Guidelines
Action Instructions
Play
Let the video/audio start playing
Pause
Temporarily stops the video/audio playback
Stop
Stop video/audio playback and reset video/audio
π‘ Tips:
To visualize the effect of all three, use the play/pause/stop buttons below to control the video.
![Displays the functions of the three buttons.](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252Fu5vZAxVQ5cwhcG8qV04c%252F0.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=aafa18a8&sv=1)
Usage
Click on the component that requires configuration with the [Component Control] action, and add the action within its action settings.
Add actions in the following order: Action > Action on click > Component Control > Audio/Video > Play/Pause/Stop > Select specific audio/video.
![Process for setting up play, pause and stop for video/audio.](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252Fxbco0sgw18G6kUQrtZJK%252F1.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=50678c53&sv=1)
Project Example - Adding Background Music
Background music play and pause rely on the media resource action to complete.
Supported Media Resource Formats
![Supported Media Resource Formats.](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FrrL4dx6r3gVt3Od2JwH8%252F2.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=2b3e8f85&sv=1)
![Supported Media Resource Formats.](https://docs.momen.app/~gitbook/image?url=https%3A%2F%2F2186054900-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNNm75vAys0CMwBUdWsgC%252Fuploads%252FszWG9cl4yyQiZP8zRSOi%252F3.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=21d46091&sv=1)
If you encounter any issues during the process, feel free to join our Discord community for assistance.βββ
About Momenβββββ
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.ββ
Last updated