diff options
| -rw-r--r-- | controls.md | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/controls.md b/controls.md index 8c9a27f9..b3c29962 100644 --- a/controls.md +++ b/controls.md @@ -33,23 +33,23 @@ var controls = [ '</div>', '<span class="player-controls-playback">', '<button type="button" data-player="restart">', - '<span class="icon-restart" aria-hidden="true"></span>', + '<svg><use xlink:href="#icon-refresh"></use></svg>', '<span class="sr-only">Restart</span>', '</button>', '<button type="button" data-player="rewind">', - '<span class="icon-rewind" aria-hidden="true"></span>', + '<svg><use xlink:href="#icon-rewind"></use></svg>', '<span class="sr-only">Rewind <span class="player-seek-time">{seek_time}</span> seconds</span>', '</button>', '<button type="button" aria-label="{aria-label}" data-player="play">', - '<span class="icon-play" aria-hidden="true"></span>', + '<svg><use xlink:href="#icon-play"></use></svg>', '<span class="sr-only">Play</span>', '</button>', '<button type="button" data-player="pause">', - '<span class="icon-pause" aria-hidden="true"></span>', + '<svg><use xlink:href="#icon-pause"></use></svg>', '<span class="sr-only">Pause</span>', '</button>', '<button type="button" data-player="fast-forward">', - '<span class="icon-forward" aria-hidden="true"></span>', + '<svg><use xlink:href="#icon-fast-forward"></use></svg>', '<span class="sr-only">Fast forward <span class="player-seek-time">{seek_time}</span> seconds</span>', '</button>', '<span class="player-time">', @@ -60,20 +60,20 @@ var controls = [ '<span class="player-controls-sound">', '<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">', '<label id="mute{id}" for="mute{id}">', - '<span class="icon-mute icon-muted" aria-hidden="true"></span>', - '<span class="icon-volume-up" aria-hidden="true"></span>', + '<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="player-volume" type="range" min="0" max="10" value="5" data-player="volume">', '<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">', '<label for="captions{id}">', - '<span class="icon-subtitles" aria-hidden="true"></span>', + '<svg><use xlink:href="#icon-bubble"></use></svg>', '<span class="sr-only">Captions</span>', '</label>', '<button type="button" data-player="fullscreen">', - '<span class="icon-resize-small icon-exit-fullscreen" aria-hidden="true"></span>', - '<span class="icon-resize-full" aria-hidden="true"></span>', + '<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>', '</button>', '</span>', |