ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Controls

Browse Source
This commit is contained in:
Sam Potts 2016-01-19 09:54:23 +11:00
parent 70c5b24678
commit 20a71300a5
1 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
controls.md
View File

@ -46,64 +46,64 @@ You can include only the controls you need when specifying custom html.
This is an example `html` option with all controls. This is an example `html` option with all controls.
```javascript ```javascript
["<div class='player-controls'>", ["<div class='plyr__controls'>",
"<div class='player-progress'>", "<div class='plyr__progress'>",
"<label for='seek{id}' class='sr-only'>Seek</label>", "<label for='seek{id}' class='plyr__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'>", "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.5' value='0' data-plyr='seek'>",
"<progress class='player-progress-played' max='100' value='0'>", "<progress class='plyr__progress--played' max='100' value='0'>",
"<span>0</span>% played", "<span>0</span>% played",
"</progress>", "</progress>",
"<progress class='player-progress-buffer' max='100' value='0'>", "<progress class='plyr__progress--buffer' max='100' value='0'>",
"<span>0</span>% buffered", "<span>0</span>% buffered",
"</progress>", "</progress>",
"</div>", "</div>",
"<span class='player-controls-left'>", "<span class='plyr__controls--left'>",
"<button type='button' data-player='restart'>", "<button type='button' data-plyr='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>", "<svg><use xlink:href='#icon-restart'></use></svg>",
"<span class='sr-only'>Restart</span>", "<span class='plyr__sr-only'>Restart</span>",
"</button>", "</button>",
"<button type='button' data-player='rewind'>", "<button type='button' data-plyr='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>", "<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>",
"<button type='button' data-player='play'>", "<button type='button' data-plyr='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>", "<svg><use xlink:href='#icon-play'></use></svg>",
"<span class='sr-only'>Play</span>", "<span class='plyr__sr-only'>Play</span>",
"</button>", "</button>",
"<button type='button' data-player='pause'>", "<button type='button' data-plyr='pause'>",
"<svg><use xlink:href='#icon-pause'></use></svg>", "<svg><use xlink:href='#icon-pause'></use></svg>",
"<span class='sr-only'>Pause</span>", "<span class='plyr__sr-only'>Pause</span>",
"</button>", "</button>",
"<button type='button' data-player='fast-forward'>", "<button type='button' data-plyr='fast-forward'>",
"<svg><use xlink:href='#icon-fast-forward'></use></svg>", "<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>", "</button>",
"<span class='player-time'>", "<span class='plyr__time'>",
"<span class='sr-only'>Current time</span>", "<span class='sr-only'>Current time</span>",
"<span class='player-current-time'>00:00</span>", "<span class='plyr__current-time'>00:00</span>",
"</span>", "</span>",
"<span class='player-time'>", "<span class='plyr__time'>",
"<span class='sr-only'>Duration</span>", "<span class='sr-only'>Duration</span>",
"<span class='player-duration'>00:00</span>", "<span class='plyr__duration'>00:00</span>",
"</span>", "</span>",
"</span>", "</span>",
"<span class='player-controls-right'>", "<span class='plyr__controls--right'>",
"<button type='button' data-player='mute'>", "<button type='button' data-plyr='mute'>",
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>", "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
"<svg><use xlink:href='#icon-volume'></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>", "</button>",
"<label for='volume{id}' class='sr-only'>Volume</label>", "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>", "<input id='volume{id}' class='plyr__volume' type='range' min='0' max='10' value='5' data-plyr='volume'>",
"<button type='button' data-player='captions'>", "<button type='button' data-plyr='captions'>",
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>", "<svg class='icon--captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
"<svg><use xlink:href='#icon-captions-off'></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>",
"<button type='button' data-player='fullscreen'>", "<button type='button' data-plyr='fullscreen'>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>", "<svg class='icon--exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#icon-enter-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>", "</button>",
"</span>", "</span>",
"</div>"].join("\n"); "</div>"].join("\n");