Component Preview
Interactive demonstration of the StopButton component
🎛️ Interactive Controls
Component Overview
The StopButton component provides immediate playback control by stopping audio/video content and resetting the playback position to the beginning.
This interactive demo allows you to explore all the features and capabilities of the StopButton component. Use the controls above to test the component's functionality and see how it integrates with other transport controls.
API Reference
The StopButton component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize appearance and behavior.
Methods: Programmatically control the button using built-in methods for stop functionality.
Events: Listen to component events to respond to stop actions and state changes.
Component Events
The StopButton component emits various events that you can listen to:
• Playback Stop: Fired when the stop button is clicked and playback is halted
• Position Reset: Fired when the playback position is reset to the beginning
• Button State Change: Fired when the button's visual state changes
• Stop Complete: Fired when the stop operation is fully completed
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the StopButton component in your projects:
Basic Usage:<stopbutton></stopbutton>
With Properties:<stopbutton disabled="false" size="large"></stopbutton>
Event Listeners:stopButton.addEventListener('playback-stop', handlePlaybackStop);