Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sampotts/plyr

A simple HTML5, YouTube and Vimeo player
https://github.com/sampotts/plyr

html5-video javascript plyr vimeo youtube

Last synced: 11 days ago
JSON representation

A simple HTML5, YouTube and Vimeo player

Awesome Lists containing this project

README 

        
| 🎉  | [Plyr is merging into Vidstack](https://github.com/sampotts/plyr/issues/2408) | 🎉  |

| :-: | :---------------------------------------------------------------------------: | :-- |



Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.



[Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr--chat)



[![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/sampotts/plyr) [![Financial Contributors on Open Collective](https://opencollective.com/plyr/all/badge.svg?label=financial+contributors)](https://opencollective.com/plyr)



[![Screenshot of Plyr](https://cdn.plyr.io/static/screenshot.webp)](https://plyr.io)



# Features



- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats

- 💪 **Accessible** - full support for VTT captions and screen readers

- 🔧 **[Customizable](#html)** - make the player look how you want with the markup you want

- 😎 **Clean HTML** - uses the _right_ elements. `` for volume and `` for progress and well, ``s for buttons. There's no

  `` or `` button hacks

- 📱 **Responsive** - works with any screen size

- 💵 **[Monetization](#ads)** - make money from your videos

- 📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback

- 🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API

- 🎤 **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats

- 🔎 **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes

- ⌨️ **[Shortcuts](#shortcuts)** - supports keyboard shortcuts

- 🖥 **Picture-in-Picture** - supports picture-in-picture mode

- 📱 **Playsinline** - supports the `playsinline` attribute

- 🏎 **Speed controls** - adjust speed on the fly

- 📖 **Multiple captions** - support for multiple caption tracks

- 🌎 **i18n support** - support for internationalization of controls

- 👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails

- 🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required

- 💁‍♀️ **Sass** - to include in your build processes



## Demos



You can try Plyr in Codepen using our minimal templates: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). For Streaming we also have example integrations with: [Dash.js](https://codepen.io/pen?template=GRoogML), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO)



# Quick setup



## HTML



Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.



### HTML5 Video



```html



  

  



  

  



```



**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.



### HTML5 Audio



```html



  

  



```



For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop`, `hl` (YouTube only) and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.



### YouTube



We recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) with the embedded players. You can elect to use an `` as the source element (which Plyr will progressively enhance) or a bog standard `
` with two essential data attributes - `data-plyr-provider` and `data-plyr-embed-id`.



```html



  



```



_Note_: The `plyr__video-embed` classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom `ratio` config option will be used.



Or the `
` non progressively enhanced method:



```html



```



_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media.



### Vimeo



Much the same as YouTube above.



```html



  



```



Or the `
` non progressively enhanced method:



```html



```



## JavaScript



You can use Plyr as an ES6 module as follows:



```js

import Plyr from 'plyr';



const player = new Plyr('#player');

```



Alternatively you can include the `plyr.js` script before the closing `