diff options
Diffstat (limited to 'controls.md')
| -rw-r--r-- | controls.md | 76 |
1 files changed, 41 insertions, 35 deletions
diff --git a/controls.md b/controls.md index c58c966b..9bde7a17 100644 --- a/controls.md +++ b/controls.md @@ -46,65 +46,71 @@ You can include only the controls you need when specifying custom html. This is an example `html` option with all controls. ```javascript -["<div class='player-controls'>", - "<div class='player-progress'>", - "<label for='seek{id}' class='sr-only'>Seek</label>", - "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>", - "<progress class='player-progress-played' max='100' value='0'>", +var controls = ["<div class='plyr__controls'>", + "<div class='plyr__progress'>", + "<label for='seek{id}' class='plyr__sr-only'>Seek</label>", + "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>", + "<progress class='plyr__progress--played' max='100' value='0'>", "<span>0</span>% played", "</progress>", - "<progress class='player-progress-buffer' max='100' value='0'>", + "<progress class='plyr__progress--buffer' max='100' value='0'>", "<span>0</span>% buffered", "</progress>", + "<span class='plyr__tooltip'>00:00</span>", "</div>", - "<span class='player-controls-left'>", - "<button type='button' data-player='restart'>", + "<span class='plyr__controls--left'>", + "<button type='button' data-plyr='restart'>", "<svg><use xlink:href='#icon-restart'></use></svg>", - "<span class='sr-only'>Restart</span>", + "<span class='plyr__sr-only'>Restart</span>", "</button>", - "<button type='button' data-player='rewind'>", + "<button type='button' data-plyr='rewind'>", "<svg><use xlink:href='#icon-rewind'></use></svg>", - "<span class='sr-only'>Rewind {seektime} secs</span>", + "<span class='plyr__sr-only'>Rewind {seektime} secs</span>", "</button>", - "<button type='button' data-player='play'>", + "<button type='button' data-plyr='play'>", "<svg><use xlink:href='#icon-play'></use></svg>", - "<span class='sr-only'>Play</span>", + "<span class='plyr__sr-only'>Play</span>", "</button>", - "<button type='button' data-player='pause'>", + "<button type='button' data-plyr='pause'>", "<svg><use xlink:href='#icon-pause'></use></svg>", - "<span class='sr-only'>Pause</span>", + "<span class='plyr__sr-only'>Pause</span>", "</button>", - "<button type='button' data-player='fast-forward'>", + "<button type='button' data-plyr='fast-forward'>", "<svg><use xlink:href='#icon-fast-forward'></use></svg>", - "<span class='sr-only'>Forward {seektime} secs</span>", + "<span class='plyr__sr-only'>Forward {seektime} secs</span>", "</button>", - "<span class='player-time'>", - "<span class='sr-only'>Current time</span>", - "<span class='player-current-time'>00:00</span>", + "<span class='plyr__time'>", + "<span class='plyr__sr-only'>Current time</span>", + "<span class='plyr__time--current'>00:00</span>", "</span>", - "<span class='player-time'>", - "<span class='sr-only'>Duration</span>", - "<span class='player-duration'>00:00</span>", + "<span class='plyr__time'>", + "<span class='plyr__sr-only'>Duration</span>", + "<span class='plyr__time--duration'>00:00</span>", "</span>", "</span>", - "<span class='player-controls-right'>", - "<button type='button' data-player='mute'>", - "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>", + "<span class='plyr__controls--right'>", + "<button type='button' data-plyr='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>", + "<span class='plyr__sr-only'>Toggle Mute</span>", "</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'>", - "<button type='button' data-player='captions'>", - "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>", + "<label for='volume{id}' class='plyr__sr-only'>Volume</label>", + "<input id='volume{id}' class='plyr__volume' type='range' min='0' max='10' value='5' data-plyr='volume'>", + "<button type='button' data-plyr='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>", + "<span class='plyr__sr-only'>Toggle Captions</span>", "</button>", - "<button type='button' data-player='fullscreen'>", - "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>", + "<button type='button' data-plyr='fullscreen'>", + "<svg class='icon--exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>", "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>", - "<span class='sr-only'>Toggle Fullscreen</span>", + "<span class='plyr__sr-only'>Toggle Fullscreen</span>", "</button>", "</span>", "</div>"].join("\n"); + +// Setup the player +plyr.setup('.js-player', { + html: controls +}); ``` |