aboutsummaryrefslogtreecommitdiffstats
path: root/controls.md
diff options
context:
space:
mode:
Diffstat (limited to 'controls.md')
-rw-r--r--controls.md24
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>