diff options
Diffstat (limited to 'controls.md')
| -rw-r--r-- | controls.md | 44 |
1 files changed, 34 insertions, 10 deletions
diff --git a/controls.md b/controls.md index 510da2de..bc536f0a 100644 --- a/controls.md +++ b/controls.md @@ -1,10 +1,36 @@ -# Controls HTML +# Controls This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. -The demo Plyr setup uses a Hogan template. This purely to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. +## Internationalization using default controls -## Requirements +You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. + +### Example + +```javascript +i18n: { + restart: "Restart", + rewind: "Rewind {seektime} secs", + play: "Play", + pause: "Pause", + forward: "Forward {seektime} secs", + played: "played", + buffered: "buffered", + currentTime: "Current time", + duration: "Duration", + volume: "Volume", + toggleMute: "Toggle Mute", + toggleCaptions: "Toggle Captions", + toggleFullscreen: "Toggle Fullscreen" +} +``` + +Note: `{seektime}` will be replaced with your configured seek time or the default. For example "Forward {seektime} secs" would render as "Forward 10 secs". + +## Using custom HTML + +The example on [plyr.io](http://plyr.io) setup uses a Hogan template. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. The classes and data attributes used in your template should match the `selectors` option. @@ -15,7 +41,7 @@ You need to add several placeholders to your html template that are replaced whe You can include only the controls you need when specifying custom html. -## Example +### Example This is an example `html` option with all controls. @@ -62,20 +88,18 @@ This is an example `html` option with all controls. "</span>", "</span>", "<span class='player-controls-right'>", - "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>", - "<label id='mute{id}' for='mute{id}'>", + "<button type='button' data-player='mute'>", "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>", "<svg><use xlink:href='#icon-volume'></use></svg>", "<span class='sr-only'>Toggle Mute</span>", - "</label>", + "</button>", "<label for='volume{id}' class='sr-only'>Volume</label>", "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>", - "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>", - "<label for='captions{id}'>", + "<button type='button' data-player='captions'>", "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>", "<svg><use xlink:href='#icon-captions-off'></use></svg>", "<span class='sr-only'>Toggle Captions</span>", - "</label>", + "</button>", "<button type='button' data-player='fullscreen'>", "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>", "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>", |