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

Improved plugin syntax, refactoring...

Browse Source
This commit is contained in:
Sam Potts
2015-02-15 11:03:06 +11:00
parent 61970a948e
commit 63c1d04d72
39 changed files with 902 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
assets/templates/controls.html
View File

@ -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>