| Option | -Type | -Default | -Description | -
|---|---|---|---|
| Option | +Type | +Default | +Description | +
enabled |
- Boolean | -true |
- Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically 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 | -['play-large', 'play', 'progress', 'current-time', '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. |
-
i18n |
- Object | -See controls.md |
- Used for internationalization (i18n) of the tooltips/labels within the buttons. | -
loadSprite |
- Boolean | -true |
- Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself. |
-
iconUrl |
- String | -null |
- Specify a URL or path to the SVG sprite. See the SVG section for more info. | -
iconPrefix |
- String | -plyr |
- Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option. | -
debug |
- Boolean | -false |
- Display debugging information on what Plyr is doing. | -
autoplay |
- Boolean | -false |
- Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation). | -
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. | -
clickToPlay |
- Boolean | -true |
- Click (or tap) of the video container will toggle pause/play. | -
disableContextMenu |
- Boolean | -true |
- Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content. | -
hideControls |
- Boolean | -true |
- Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly. | -
showPosterOnEnd |
- Boolean | -false |
- This will restore and *reload* HTML5 video once playback is complete. Note: depending on the browser caching, this may result in the video downloading again (or parts of it). Use with caution. | -
tooltips |
- Object | -{ controls: false, seek: true } |
-
- controls: Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).
- - seek: Display a seek tooltip to indicate on click where the media would seek to. - |
-
duration |
- Number | -null |
- Specify a custom duration. | -
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. You probably don't need to change any of these. |
-
listeners |
- Object | -— | -Allows early binding of event listeners to the controls. See controls above for list of controls and see plyr.js in /src for more info. |
-
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 | -— | -See below | -
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. |
-
enabled |
+ Boolean | +true |
+ Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically 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 | +['play-large', 'play', 'progress', 'current-time', '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. |
+
i18n |
+ Object | +See controls.md |
+ Used for internationalization (i18n) of the tooltips/labels within the buttons. | +
loadSprite |
+ Boolean | +true |
+ Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself. |
+
iconUrl |
+ String | +null |
+ Specify a URL or path to the SVG sprite. See the SVG section for more info. | +
iconPrefix |
+ String | +plyr |
+ Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option. | +
debug |
+ Boolean | +false |
+ Display debugging information on what Plyr is doing. | +
autoplay |
+ Boolean | +false |
+ Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation). | +
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. | +
clickToPlay |
+ Boolean | +true |
+ Click (or tap) of the video container will toggle pause/play. | +
disableContextMenu |
+ Boolean | +true |
+ Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content. | +
hideControls |
+ Boolean | +true |
+ Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly. | +
showPosterOnEnd |
+ Boolean | +false |
+ This will restore and *reload* HTML5 video once playback is complete. Note: depending on the browser caching, this may result in the video downloading again (or parts of it). Use with caution. | +
tooltips |
+ Object | +{ controls: false, seek: true } |
+
+ controls: Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).
+ + seek: Display a seek tooltip to indicate on click where the media would seek to. + |
+
duration |
+ Number | +null |
+ Specify a custom duration. | +
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. You probably don't need to change any of these. |
+
listeners |
+ Object | +— | +Allows early binding of event listeners to the controls. See controls above for list of controls and see plyr.js in /src for more info. |
+
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 | +— | +See below | +
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. |
+
| Option | -Type | -Default | -Description | -
|---|---|---|---|
| Option | +Type | +Default | +Description | +