├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── npm-publish.yml ├── LICENSE ├── README.md ├── demo.html ├── package.json └── play-button.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | buy_me_a_coffee: daviddarnes 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: daviddarnes 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behaviour: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behaviour** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: daviddarnes 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | publish-npm: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: 16 15 | registry-url: https://registry.npmjs.org/ 16 | - run: npm install 17 | - run: npm publish 18 | env: 19 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 David Darnes 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `play-button` 2 | 3 | A Web Component to play audio or video with a button. 4 | 5 | **[Demo](https://daviddarnes.github.io/play-button/demo.html)** | **[Further reading](https://darn.es/play-button-web-component/)** 6 | 7 | ## Examples 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | 15 | 16 | ``` 17 | 18 | ## Features 19 | 20 | This Web Component allows you to: 21 | 22 | - Control `audio` or `video` elements with a single `button` which can play and pause the audio or video 23 | 24 | ## Installation 25 | 26 | You have a few options (choose one of these): 27 | 28 | 1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/play-button): `npm install @daviddarnes/play-button` 29 | 1. [Download the source manually from GitHub](https://github.com/daviddarnes/play-button/releases) into your project. 30 | 1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use) 31 | 32 | ### Usage 33 | 34 | Make sure you include the ` 39 | ``` 40 | 41 | ```html 42 | 43 | 44 | ``` 45 | 46 | ```html 47 | 48 | 49 | ``` 50 | 51 | ## Credit 52 | 53 | With thanks to the following people: 54 | 55 | - [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/component-template) 56 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | play-button Web Component Demo 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@daviddarnes/play-button", 3 | "version": "1.0.0", 4 | "description": "A Web Component to play audio or video with a button", 5 | "main": "play-button.js", 6 | "scripts": { 7 | "start": "npx http-server ." 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/daviddarnes/play-button.git" 12 | }, 13 | "keywords": [ 14 | "web", 15 | "component", 16 | "components", 17 | "web components", 18 | "custom elements" 19 | ], 20 | "license": "MIT", 21 | "publishConfig": { 22 | "access": "public" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/daviddarnes/play-button/issues" 26 | }, 27 | "author": { 28 | "name": "David Darnes", 29 | "email": "me@daviddarnes.com", 30 | "url": "https://darn.es/" 31 | }, 32 | "homepage": "https://github.com/daviddarnes/play-button#readme" 33 | } 34 | -------------------------------------------------------------------------------- /play-button.js: -------------------------------------------------------------------------------- 1 | class PlayButton extends HTMLElement { 2 | static register(tagName) { 3 | if ("customElements" in window) { 4 | customElements.define(tagName || "play-button", PlayButton); 5 | } 6 | } 7 | 8 | connectedCallback() { 9 | this.button.addEventListener("click", (event) => { 10 | !this.player.paused ? this.player.pause() : this.player.play(); 11 | }); 12 | } 13 | 14 | get player() { 15 | return this.querySelector("audio, video"); 16 | } 17 | 18 | get button() { 19 | return this.querySelector("button"); 20 | } 21 | } 22 | 23 | PlayButton.register(); 24 | --------------------------------------------------------------------------------