# Plyr A simple, accessible HTML5 media player. [Checkout the demo](http://plyr.io) [![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io) ## Why? We wanted a lightweight, accessible and customisable media player that just supports [*modern*](#browser-support) 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 7.5KB minified and gzipped. - **[Customisable](#html)** - 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.
`controls`	Array	`["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"]`	Toggle which control elements you would like to display when using the default controls html. If you specify a `html` option, this is redundant. The default value is to display everything.
`iconPrefix`	String	`icon`	Specify the id prefix for the icons used in the default controls (e.g. "icon-play" would be "icon"). This is to prevent clashes if you're using your own SVG defs file but with the default controls. Most people can ignore this option.
`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).
`displayDuration`	Boolean	`true`	Displays the duration of the media on the "metadataloaded" event (on startup) in the current time display. This will only work if the `preload` attribute is not set to `none` (or is not set at all) and you choose not to display the duration (see `controls` option).
`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	—	Three properties; `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`. A `fallback` property which will enable a full window view for older browsers. The default value is `true`. A `hideControls` property which will hide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`). 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.
`onSetup`	Function	—	This callback function is called on every new plyr instance created. The context (`this`) is the plyr instance itself.

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.
`togglePlay()`	Boolean	Toggles playback for the player based on either the boolean argument or it's current state.
`toggleMute()`	—	Toggles mute for the player.
`toggleCaptions()`	—	Toggles whether captions are enabled.
`toggleFullscreen()`	Event	Toggles fullscreen. This can only be initiated by a user gesture due to browser security, i.e. a user event such as click.
`isFullscreen()`	—	Boolean returned if the player is in fullscreen.
`support(...)`	String	Determine if a player supports a certain MIME type. This is not supported for embedded content (YouTube).
`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. YouTube Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.)
`poster(...)`	String	Set the poster url. This is supported for the `video` element only.
`destroy()`	—	Destroys the plyr UI and any media event listeners, effectively restoring to the previous state before `setup()` was called.
`restore()`	—	Reverses the effects of the `destroy()` method, restoring the UI and listeners.

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