Merge branch 'develop' of github.com:selz/plyr into develop

# Conflicts:
#	.gitignore
#	dist/plyr.css
#	dist/plyr.js
#	dist/sprite.svg
#	docs/dist/docs.css
#	docs/dist/docs.js
#	docs/src/less/components/examples.less
#	src/js/plyr.js
#	src/less/plyr.less
#	src/sprite/icon-fast-forward.svg
#	src/sprite/icon-pause.svg
#	src/sprite/icon-play.svg
#	src/sprite/icon-rewind.svg

1 files changed, 41 insertions, 35 deletions

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