diff options
| author | Sam Potts <me@sampotts.me> | 2015-02-14 22:42:44 +1100 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2015-02-14 22:42:44 +1100 |
| commit | 751d8db9d88d45b33792982103f8682e21ac876e (patch) | |
| tree | 922222dd411b34a5d47d2e1453a167919dbdb417 /assets/templates | |
| download | plyr-751d8db9d88d45b33792982103f8682e21ac876e.tar.lz plyr-751d8db9d88d45b33792982103f8682e21ac876e.tar.xz plyr-751d8db9d88d45b33792982103f8682e21ac876e.zip | |
WIP
Diffstat (limited to 'assets/templates')
| -rw-r--r-- | assets/templates/controls.html | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/assets/templates/controls.html b/assets/templates/controls.html new file mode 100644 index 00000000..2fc38196 --- /dev/null +++ b/assets/templates/controls.html @@ -0,0 +1,51 @@ +<div class="controls"> + <progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress> + + <div class="play-controls"> + <button class="px-video-restart" data-player="restart"> + <svg><use xlink:href="#icon-refresh"></use></svg> + <span class="sr-only">Restart</span> + </button> + <button class="px-video-rewind" data-player="rewind"> + <svg><use xlink:href="#icon-rewind"></use></svg> + <span class="sr-only">Rewind <span class="px-seconds">10</span> seconds</span> + </button> + <button class="px-video-play" aria-label="{aria-label}" data-player="play"> + <svg><use xlink:href="#icon-play"></use></svg> + <span class="sr-only">Play</span> + </button> + <button class="px-video-pause hide" data-player="pause"> + <svg><use xlink:href="#icon-pause"></use></svg> + <span class="sr-only">Pause</span> + </button> + <button class="px-video-forward" data-player="fast-forward"> + <svg><use xlink:href="#icon-fast-forward"></use></svg> + <span class="sr-only">Fast forward <span class="px-seconds">10</span> seconds</span> + </button> + <div class="px-video-time"> + <span class="sr-only">Time</span> + <span class="px-video-duration">00:00</span> + </div> + </div> + + <div class="sound-controls"> + <!--<div class="px-video-mute-btn-container">--> + <input class="px-video-mute sr-only" id="btnMute{id}" type="checkbox"> + <label id="labelMute{id}" for="btnMute{id}"> + <svg><use xlink:href="#icon-sound"></use></svg> + <span class="sr-only">Mute</span> + </label> + <!--</div>--> + + <label for="volume{id}" class="sr-only">Volume:</label> + <input id="volume{id}" class="px-video-volume" type="range" min="0" max="10" value="5"> + + <!--<div class="px-video-captions-btn-container hide">--> + <input class="px-video-btnCaptions sr-only" id="btnCaptions{id}" type="checkbox"> + <label for="btnCaptions{id}"> + <svg><use xlink:href="#icon-film"></use></svg> + <span class="sr-only">Captions</span> + </label> + <!--</div>--> + </div> +</div> |