diff options
Diffstat (limited to 'controls.md')
| -rw-r--r-- | controls.md | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/controls.md b/controls.md new file mode 100644 index 00000000..fa4c7c35 --- /dev/null +++ b/controls.md @@ -0,0 +1,80 @@ +# Controls HTML + +This is the markup that is rendered for controls. It is a seperate option to allow full customisation of markup based on your needs. The default Plyr setup uses a Hogan template, this is to allow for localisation at a later date. If you check `controls.html` in `/src/templates` to get an idea of how the default html works. + +## Requirements + +The classes and data attributes used in your template should match the `selectors` option. + +You need to add two placeholders to your html template: + +- {id} for the dynamically generated ID for the player (for form controls) +- {aria-label} for the dynamically generated play button label for screen readers +- {seek-time} for the seek time specified in options for fast forward and rewind + +Currently all buttons and inputs need to be present for Plyr to work but later we'll make it more dynamic so if you omit a button or input, it'll still work. + +## Vanilla HTML template + +You can of course, just specify vanilla HTML. Here's an example snippet: + +```javascript +var controls = [ +'<div class="player-controls">', + '<div class="player-progress">', + '<progress class="player-progress-played" max="100" value="0">', + '<span>0</span>% played', + '</progress>', + '<progress class="player-progress-buffer" max="100" value="0">', + '<span>0</span>% buffered', + '</progress>', + '</div>', + '<span class="player-controls-playback">', + '<button type="button" data-player="restart">', + '<span class="icon-restart" aria-hidden="true"></span>', + '<span class="sr-only">Restart</span>', + '</button>', + '<button type="button" data-player="rewind">', + '<span class="icon-rewind" aria-hidden="true"></span>', + '<span class="sr-only">Rewind <span class="player-seek-time">{seek_time}</span> seconds</span>', + '</button>', + '<button type="button" aria-label="{aria-label}" data-player="play">', + '<span class="icon-play" aria-hidden="true"></span>', + '<span class="sr-only">Play</span>', + '</button>', + '<button type="button" data-player="pause">', + '<span class="icon-pause" aria-hidden="true"></span>', + '<span class="sr-only">Pause</span>', + '</button>', + '<button type="button" data-player="fast-forward">', + '<span class="icon-forward" aria-hidden="true"></span>', + '<span class="sr-only">Fast forward <span class="player-seek-time">{seek_time}</span> seconds</span>', + '</button>', + '<span class="player-time">', + '<span class="sr-only">Time</span>', + '<span class="player-duration">00:00</span>', + '</span>', + '</span>', + '<span class="player-controls-sound">', + '<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">', + '<label id="mute{id}" for="mute{id}">', + '<span class="icon-mute icon-muted" aria-hidden="true"></span>', + '<span class="icon-volume-up" aria-hidden="true"></span>', + '<span class="sr-only">Mute</span>', + '</label>', + '<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}">', + '<span class="icon-subtitles" aria-hidden="true"></span>', + '<span class="sr-only">Captions</span>', + '</label>', + '<button type="button" data-player="fullscreen">', + '<span class="icon-resize-small icon-exit-fullscreen" aria-hidden="true"></span>', + '<span class="icon-resize-full" aria-hidden="true"></span>', + '<span class="sr-only">Toggle fullscreen</span>', + '</button>', + '</span>', +'</div>' +].join("\n"); +```
\ No newline at end of file |