https://github.com/daviddarnes/play-button

A Web Component to play audio or video with a button
https://github.com/daviddarnes/play-button

component components customelement customelements webcomponent webcomponents

Last synced: 3 months ago
JSON representation

A Web Component to play audio or video with a button

• Host: GitHub
• URL: https://github.com/daviddarnes/play-button
• Owner: daviddarnes
• License: mit
• Created: 2023-12-11T17:11:15.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-22T16:11:50.000Z (11 months ago)
• Last Synced: 2024-04-11T03:32:37.454Z (10 months ago)
• Topics: component, components, customelement, customelements, webcomponent, webcomponents
• Language: HTML
• Homepage: https://daviddarnes.github.io/play-button/demo.html
• Size: 10.7 KB
• Stars: 31
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - play-button

README

        
# `play-button`

A Web Component to play audio or video with a button.

**[Demo](https://daviddarnes.github.io/play-button/demo.html)** | **[Further reading](https://darn.es/play-button-web-component/)**

## Examples

```html

  

  Play

```

## Features

This Web Component allows you to:

- Control `audio` or `video` elements with a single `button` which can play and pause the audio or video

## Installation

You have a few options (choose one of these):

1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/play-button): `npm install @daviddarnes/play-button`

1. [Download the source manually from GitHub](https://github.com/daviddarnes/play-button/releases) into your project.

1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

### Usage

Make sure you include the `` in your project (choose one of these):

```html

<!-- Host yourself -->

<script type="module" src="play-button.js">

```

```html

```

```html

```

## Credit

With thanks to the following people:

- [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/component-template)