# Plyr A simple, accessible HTML5 media player. [Checkout the demo](http://plyr.io) [![Image of Plyr](https://cdn.plyr.io/static/plyr.png?1)](http://plyr.io) ## Why? We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. ## Features - **Accessible** - full support for captions and screen readers. - **Lightweight** - just 5.7KB minified and gzipped. - **Customisable** - make the player look how you want with the markup you want. - **Semantic** - uses the *right* elements. `` for volume and `` for progress and well, `

Option	Type	Default	Description
`enabled`	Boolean	`true`	Completely disable Plyr. This would allow you to do a User Agent check or similar to programatically enable or disable Plyr for a certain UA. Example below.
`html`	String	`See controls.md`	See controls.md for more info on how the html needs to be structured.
`debug`	Boolean	`false`	Display debugging information on what Plyr is doing.
`seekTime`	Number	`10`	The time, in seconds, to seek when a user hits fast forward or rewind.
`volume`	Number	`5`	A number, between 1 and 10, representing the initial volume of the player.
`click`	Boolean	`true`	Click (or tap) will toggle pause/play of a `<video>`.
`tooltips`	Boolean	`false`	Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).
`selectors`	Object	—	See `plyr.js` in `/src` for more info. The only option you might want to change is `player` which is the hook used for Plyr, the default is `.player`.
`classes`	Object	—	Similar to above, these are the classes added to the player when state changes occur.
`captions`	Object	—	One property `defaultActive` which toggles if captions should be on by default. The default value is `false`.
`fullscreen`	Object	—	Two properties; `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`. Also an extra property called `fallback` which will enable a full window view for older browsers. The default value is `true`.
`storage`	Object	—	Two properties; `enabled` which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later. The second property `key` is the key used for the local storage. The default is `plyr_volume` until more settings are stored.

Method	Parameters	Description
`play()`	—	Plays the media
`pause()`	—	Pauses the media
`restart()`	—	Restarts playback
`rewind(...)`	Number	Rewinds by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).
`forward(...)`	Number	Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).
`seek(...)`	Number	Seeks the media to the provided parameter, time in seconds.
`setVolume(...)`	Number	Sets the player volume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.
`toggleMute()`	—	Toggles mute for the player.
`toggleCaptions()`	—	Toggles whether captions are enabled.
`support(...)`	String	Determine if a player supports a certain MIME type.
`source(...)`	String or Array	Set the media source. string `.source("/path/to/video.mp4")` This will set the `src` attribute on the `video` or `audio` element. array .source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])` This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
`poster(...)`	String	Set the poster url. This is supported for the `video` element only.

Safari	Firefox	Chrome	Opera	IE9	IE10+
✔¹	✔	✔	✔	✖²	✔³