1. UI
  2. Play Button

UI

Play Button

This component is used to play and pause media.

Import

tsx
        import { PlayButton } from '@vidstack/player-react';

      

Usage

The <PlayButton> component will toggle the paused state of media as it's pressed by dispatching a vds-play-request, and vds-pause-request event to the media controller.

          
        

Styling

Here's a simple styled <PlayButton> example containing a play and pause icon:

          
        
TIP

You can extend the preview above by adding a replay SVG icon, and showing it whilst hiding the play icon when the media-ended attribute is present.