diff options
author | Sam Potts <sam@potts.es> | 2018-06-18 21:41:25 +1000 |
---|---|---|
committer | Sam Potts <sam@potts.es> | 2018-06-18 21:41:25 +1000 |
commit | cc3c0b54484e6f5a7b4dba8a36a44f345e462f26 (patch) | |
tree | 5fe2838546d9f981b21572dee88ee7a1c3195477 /controls.md | |
parent | 4811e3333f1417bc9e14f6cc38afc789e9051c4c (diff) | |
parent | 3c9c1b4cdcd0eb9076c3f0bafbabb057ee140c42 (diff) | |
download | plyr-cc3c0b54484e6f5a7b4dba8a36a44f345e462f26.tar.lz plyr-cc3c0b54484e6f5a7b4dba8a36a44f345e462f26.tar.xz plyr-cc3c0b54484e6f5a7b4dba8a36a44f345e462f26.zip |
Merge branch 'develop'
Diffstat (limited to 'controls.md')
-rw-r--r-- | controls.md | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/controls.md b/controls.md index 86b0cd96..63b17fa3 100644 --- a/controls.md +++ b/controls.md @@ -2,9 +2,9 @@ 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. You can pass the following to the `controls` option: -* `Array` of options (this builds the default controls based on your choices) -* `String` containing the desired HTML -* `Function` that will be executed and should return one of the above +- `Array` of options (this builds the default controls based on your choices) +- `String` containing the desired HTML +- `Function` that will be executed and should return one of the above ## Using default controls @@ -81,14 +81,14 @@ The classes and data attributes used in your template should match the `selector You need to add several placeholders to your HTML template that are replaced when rendering: -* `{id}` - the dynamically generated ID for the player (for form controls) -* `{seektime}` - the seek time specified in options for fast forward and rewind -* `{title}` - the title of your media, if specified +- `{id}` - the dynamically generated ID for the player (for form controls) +- `{seektime}` - the seek time specified in options for fast forward and rewind +- `{title}` - the title of your media, if specified ### Limitations -* Currently the settings menus are not supported with custom controls HTML -* AirPlay and PiP buttons can be added but you will have to manage feature detection +- Currently the settings menus are not supported with custom controls HTML +- AirPlay and PiP buttons can be added but you will have to manage feature detection ### Example @@ -105,7 +105,7 @@ const controls = ` <svg role="presentation"><use xlink:href="#plyr-rewind"></use></svg> <span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span> </button> - <button type="button" class="plyr__control" aria-pressed="false" aria-label="Play, {title}" data-plyr="play"> + <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span> @@ -122,7 +122,7 @@ const controls = ` </div> <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div> <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div> - <button type="button" class="plyr__control" aria-pressed="false" aria-label="Mute" data-plyr="mute"> + <button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span> @@ -131,13 +131,13 @@ const controls = ` <div class="plyr__volume"> <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume"> </div> - <button type="button" class="plyr__control" aria-pressed="true" aria-label="Enable captions" data-plyr="captions"> + <button type="button" class="plyr__control" data-plyr="captions"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-captions-on"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-captions-off"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Disable captions</span> <span class="label--not-pressed plyr__tooltip" role="tooltip">Enable captions</span> </button> - <button type="button" class="plyr__control" aria-pressed="false" aria-label="Enter fullscreen" data-plyr="fullscreen"> + <button type="button" class="plyr__control" data-plyr="fullscreen"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span> |