diff options
Diffstat (limited to 'assets/templates/controls.html')
| -rw-r--r-- | assets/templates/controls.html | 57 |
1 files changed, 28 insertions, 29 deletions
diff --git a/assets/templates/controls.html b/assets/templates/controls.html index 3b1c6735..3109d795 100644 --- a/assets/templates/controls.html +++ b/assets/templates/controls.html @@ -1,54 +1,53 @@ <div class="player-controls"> - <progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress> + <progress class="player-progress" max="100" value="0"> + <span>0</span>% played + </progress> - <div class="play-controls"> - <button class="px-video-restart" data-player="restart"> + <div class="player-controls-playback"> + <button 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"> + <button data-player="rewind"> <svg><use xlink:href="#icon-rewind"></use></svg> - <span class="sr-only">Rewind <span class="px-seconds">10</span> seconds</span> + <span class="sr-only">Rewind <span class="player-seek-time">10</span> seconds</span> </button> - <button class="px-video-play" aria-label="{aria-label}" data-player="play"> + <button 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" data-player="pause"> + <button 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"> + <button 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> + <span class="sr-only">Fast forward <span class="player-seek-time">10</span> seconds</span> </button> - <div class="px-video-time"> + <span class="player-time"> <span class="sr-only">Time</span> - <span class="px-video-duration">00:00</span> - </div> + <span class="player-duration">00:00</span> + </span> </div> - <div class="sound-controls"> - <!--<div class="px-video-mute-btn-container">--> - <input class="px-video-mute inverted 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>--> + <div class="player-controls-sound"> + <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute"> + <label id="mute{id}" for="mute{id}"> + <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg> + <svg><use xlink:href="#icon-sound"></use></svg> + <span class="sr-only">Mute</span> + </label> <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"> + <input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume"> - <!--<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>--> + <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions"> + <label for="captions{id}"> + <svg><use xlink:href="#icon-bubble"></use></svg> + <span class="sr-only">Captions</span> + </label> - <button class="player-toggle-fullscreen" data-player="toggle-fullscreen"> + <button data-player="fullscreen"> <svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg> <svg><use xlink:href="#icon-expand"></use></svg> <span class="sr-only">Toggle fullscreen</span> |