Version bump

Converted to 4 space width tabbing

bower.json

@@ -1,33 +1,33 @@
 {
-  "name": "plyr",
-  "description": "A simple HTML5 media player using custom controls",
-  "homepage": "http://plyr.io",
-  "keywords": [
-    "Audio",
-    "Video",
-    "HTML5 Audio",
-    "HTml5 Video"
-  ],
-  "authors": [
-    "Sam Potts <me@sampotts.me>"
-  ],
-  "dependencies": {},
-  "main": [
-    "dist/plyr.css",
-    "dist/plyr.js",
-    "dist/sprite.svg",
-    "src/less/plyr.less",
-    "src/sass/plyr.sass",
-    "src/js/plyr.js"
-  ],
-  "ignore": [
-    "node_modules",
-    "bower_components",
-    ".gitignore"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/selz/plyr.git"
-  },
-  "license": "MIT"
+    "name": "plyr",
+    "description": "A simple HTML5 media player using custom controls",
+    "homepage": "http://plyr.io",
+    "keywords": [
+        "Audio",
+        "Video",
+        "HTML5 Audio",
+        "HTml5 Video"
+    ],
+    "authors": [
+        "Sam Potts <me@sampotts.me>"
+    ],
+    "dependencies": {},
+    "main": [
+        "dist/plyr.css",
+        "dist/plyr.js",
+        "dist/sprite.svg",
+        "src/less/plyr.less",
+        "src/sass/plyr.sass",
+        "src/js/plyr.js"
+    ],
+    "ignore": [
+        "node_modules",
+        "bower_components",
+        ".gitignore"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/selz/plyr.git"
+    },
+    "license": "MIT"
 }

bundles.json

@@ -1,25 +1,25 @@
 {
-	"plyr": {
-		"less": {
-			"plyr.css": 	["src/less/plyr.less"]
-		},
-		"sass": {
-			"plyr.css": 	["src/less/plyr.sass"]
-		},
-		"js": {
-			"plyr.js": 		["src/js/plyr.js"]
-		}
-	},
-	"docs": {
-		"less": {
-			"docs.css": 	["docs/src/less/docs.less"]
-		},
-		"js": {
-			"docs.js": [
-				"docs/src/js/lib/hogan-3.0.2.mustache.js",
-				"docs/dist/templates.js",
-				"docs/src/js/docs.js"
-			]
-		}
-	}
+    "plyr": {
+        "less": {
+            "plyr.css":     ["src/less/plyr.less"]
+        },
+        "sass": {
+            "plyr.css":     ["src/less/plyr.sass"]
+        },
+        "js": {
+            "plyr.js":      ["src/js/plyr.js"]
+        }
+    },
+    "docs": {
+        "less": {
+            "docs.css":     ["docs/src/less/docs.less"]
+        },
+        "js": {
+            "docs.js": [
+                "docs/src/js/lib/hogan-3.0.2.mustache.js",
+                "docs/dist/templates.js",
+                "docs/src/js/docs.js"
+            ]
+        }
+    }
 }

changelog.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## v1.0.26
+- Fixes for SASS (cheers @brunowego)
+- Indentation reset to 4 spaces
+
+## v1.0.25
+- Fixes for iOS volume controls (hidden)
+- Classnames for left/right controls changed
+
+## v1.0.24
+- Added tooltip option to display labels as tooltips (Fixes #50)
+
+## v1.0.23
+- Handling loading states in the UI (Fixes #36)
+
+## v1.0.22
+- Added support() API method for checking mimetype support
+- Added source() API method for setting media source(s) (Fixes #44)
+- Added poster() API method for setting poster source
+- Refactored captions logic for manual captions
+
+## v1.0.21
+- Added an <input type="range"> for seeking to improve experience (and support dragging) (Fixes #40, #42)
+- Icons for restart and captions improved (and some IDs changed) (Fixes #49)
+
 ## v1.0.20
 - Default controls included (Fixes #45)
 - Volume changes on `input` as well as `change` (Fixes #43)
@@ -7,7 +31,7 @@
 - License changed to MIT
 
 ## v1.0.19
-- Fixed firefox fullscreen issue (#38)
+- Fixed firefox fullscreen issue (Fixes #38)
 
 ## v1.0.18
 - Added CDN references

controls.md

@@ -22,6 +22,8 @@ This is the default `html` option from `plyr.js`.
 ```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'>",
             "<span>0</span>% played",
         "</progress>",
@@ -29,14 +31,14 @@ This is the default `html` option from `plyr.js`.
             "<span>0</span>% buffered",
         "</progress>",
     "</div>",
-    "<span class='player-controls-playback'>",
+    "<span class='player-controls-left'>",
         "<button type='button' data-player='restart'>",
-            "<svg><use xlink:href='#icon-refresh'></use></svg>",
+            "<svg><use xlink:href='#icon-restart'></use></svg>",
             "<span class='sr-only'>Restart</span>",
         "</button>",
         "<button type='button' data-player='rewind'>",
             "<svg><use xlink:href='#icon-rewind'></use></svg>",
-            "<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
+            "<span class='sr-only'>Rewind {seektime} secs</span>",
         "</button>",
         "<button type='button' data-player='play'>",
             "<svg><use xlink:href='#icon-play'></use></svg>",
@@ -48,31 +50,32 @@ This is the default `html` option from `plyr.js`.
         "</button>",
         "<button type='button' data-player='fast-forward'>",
             "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
-            "<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
+            "<span class='sr-only'>Forward {seektime} secs</span>",
         "</button>",
         "<span class='player-time'>",
             "<span class='sr-only'>Time</span>",
             "<span class='player-duration'>00:00</span>",
         "</span>",
     "</span>",
-    "<span class='player-controls-sound'>",
+    "<span class='player-controls-right'>",
         "<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>",
+            "<svg><use xlink:href='#icon-volume'></use></svg>",
+            "<span class='sr-only'>Toggle 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}'>",
-            "<svg><use xlink:href='#icon-bubble'></use></svg>",
-            "<span class='sr-only'>Captions</span>",
+            "<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>",
         "</label>",
         "<button type='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>",
+            "<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>",
         "</button>",
     "</span>",
 "</div>"].join("\n");

design/IcoMoon/Read Me.txt

@@ -1,7 +0,0 @@
-The *SVG* folder contains the icons you selected as separate SVG files.
-
-The *demo.html* lists the icons that you selected. To learn how to insert your icons as inline SVGs (with the <use> element), refer to the source of this HTML file. If you prefer to reference an external SVG instead of embedding it in the HTML, you will need to use javascript to fetch the SVG in order to make sure your SVGs will work fine in IE. IcoMoon's Quick Usage mode can take care of that and host your SVGs too.
-
-You can ignore the *svgdefs.svg* file. It contains the same SVG <symbol> definitions as the ones you can find in the demo.html file.
-
-If you prefer using PNGs or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.

design/IcoMoon/SVG/bubble.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M9.016 3c2.748 0 4.984 2.243 4.984 5s-2.236 5-4.97 5l-0.060-0.004c-0.055-0.004-0.11-0.007-0.165-0.010l-0.336-0.014-3.665 1.098 0.629-2.483-0.517-0.747c-0.58-0.839-0.886-1.822-0.886-2.842 0-2.757 2.236-5 4.984-5zM9.016 1c-3.857 0-6.984 3.134-6.984 7 0 1.479 0.46 2.848 1.241 3.978l-1.272 5.022 6.722-2.015c0.098 0.004 0.194 0.015 0.293 0.015 3.857 0 6.984-3.134 6.984-7s-3.127-7-6.984-7v0z" fill="#444444"></path>
-</svg>

design/IcoMoon/SVG/fast-forward.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z" fill="#444444"></path>
-</svg>

design/IcoMoon/SVG/film.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M17 2h-16c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1h16c0.552 0 1-0.448 1-1v-12c0-0.552-0.448-1-1-1zM2 4h2v2h-2v-2zM2 8h2v2h-2v-2zM2 14v-2h2v2h-2zM6 14v-10h6v10h-6zM16 14h-2v-2h2v2zM16 10h-2v-2h2v2zM16 6h-2v-2h2v2z" fill="#444444"></path>
-</svg>

design/IcoMoon/SVG/monitor.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M16 1h-14c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1h5.5c-0.829 0-1.5 0.671-1.5 1.5v0.5h6v-0.5c0-0.829-0.671-1.5-1.5-1.5h5.5c0.552 0 1-0.448 1-1v-12c0-0.552-0.448-1-1-1zM15 12.5c0 0.276-0.224 0.5-0.5 0.5h-11c-0.276 0-0.5-0.224-0.5-0.5v-9c0-0.276 0.224-0.5 0.5-0.5h11c0.276 0 0.5 0.224 0.5 0.5v9z" fill="#444444"></path>
-</svg>

design/IcoMoon/SVG/play.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z" fill="#444444"></path>
-</svg>

design/IcoMoon/SVG/refresh.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M8.013 14.006h-0.822c-2.372-0.388-4.187-2.453-4.187-4.934 0-0.831 0.213-1.609 0.574-2.299l0.613 0.85c0.446 0.618 1.409 0.446 1.614-0.289l1.162-4.179c0.162-0.58-0.275-1.155-0.877-1.154l-4.174 0.006c-0.741 0.001-1.17 0.841-0.736 1.443l1.128 1.564c-0.817 1.145-1.302 2.544-1.302 4.059 0 3.499 2.566 6.399 5.918 6.917 0.091 0.014 0.18 0.010 0.267-0.001v0.012h0.822c0.545 0 0.987-0.442 0.987-0.987v-0.020c0-0.545-0.442-0.987-0.987-0.987z" fill="#444444"></path>
-<path d="M16.82 14.551l-1.129-1.564c0.818-1.145 1.302-2.544 1.302-4.059 0-3.499-2.566-6.399-5.918-6.918-0.091-0.014-0.18-0.010-0.267 0.001v-0.013h-0.822c-0.545 0-0.986 0.442-0.986 0.987v0.020c0 0.546 0.442 0.988 0.986 0.988h0.822c2.372 0.388 4.187 2.453 4.187 4.934 0 0.831-0.213 1.609-0.573 2.299l-0.614-0.85c-0.446-0.618-1.409-0.446-1.613 0.289l-1.163 4.179c-0.161 0.581 0.275 1.155 0.878 1.154l4.174-0.006c0.742-0.001 1.17-0.842 0.736-1.443z" fill="#444444"></path>
-</svg>

design/IcoMoon/SVG/sound.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z" fill="#444444"></path>
-<path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z" fill="#444444"></path>
-</svg>

design/IcoMoon/SVG/up.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M17 9c0-4.418-3.582-8-8-8s-8 3.582-8 8c0 4.418 3.582 8 8 8s8-3.582 8-8zM3 9c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6z" fill="#444444"></path>
-<path d="M9.998 12.010v-3.633l1.293 1.317c0.392 0.388 1.025 0.388 1.417 0s0.391-1.016 0-1.403l-2.967-3c-0.188-0.186-0.442-0.291-0.709-0.291-0.011 0-0.023 0-0.034 0.001s-0.023-0.001-0.034-0.001c-0.266 0-0.521 0.105-0.709 0.291l-2.967 3c-0.391 0.388-0.391 1.016 0 1.403s1.025 0.388 1.417 0l1.294-1.317v3.633c0 0.547 0.443 0.99 0.99 0.99h0.018c0.547 0 0.99-0.443 0.99-0.99z" fill="#444444"></path>
-</svg>

design/IcoMoon/demo-files/demo.css

@@ -1,147 +0,0 @@
-body {
-	padding: 0;
-	margin: 0;
-	font-family: sans-serif;
-	font-size: 1em;
-	line-height: 1.5;
-	color: #555;
-	background: #fff;
-}
-h1 {
-	font-size: 1.5em;
-	font-weight: normal;
-	box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
-}
-small {
-	font-size: .66666667em;
-}
-a {
-	color: #e74c3c;
-	text-decoration: none;
-}
-a:hover, a:focus {
-	box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-	box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-	box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-	font-size: 1em;
-	margin: 0;
-	padding: 0;
-	border: 0;
-}
-input {
-	color: inherit;
-	line-height: 1.5;
-	height: 1.5em;
-	padding: .25em 0;
-}
-input:focus {
-	outline: none;
-	box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-	font-size: 16px;
-	width: 17em;
-	margin-right: 1.5em;
-	float: left;
-	overflow: hidden;
-}
-.glyph svg {
-	color: #444444;
-}
-.liga {
-	width: 80%;
-	width: calc(100% - 2.5em);
-}
-.talign-right {
-	text-align: right;
-}
-.talign-center {
-	text-align: center;
-}
-.bgc1 {
-	background: #f1f1f1;
-}
-.fgc0 {
-	color: #000;
-}
-.fgc1 {
-	color: #999;
-}
-p {
-	margin-top: 1em;
-	margin-bottom: 1em;
-}
-.mvm {
-	margin-top: .75em;
-	margin-bottom: .75em;
-}
-.mtn {
-	margin-top: 0;
-}
-.mtl, .mal {
-	margin-top: 1.5em;
-}
-.mbl, .mal {
-	margin-bottom: 1.5em;
-}
-.mal, .mhl {
-	margin-left: 1.5em;
-	margin-right: 1.5em;
-}
-.mhmm {
-	margin-left: 1em;
-	margin-right: 1em;
-}
-.mls {
-	margin-left: .25em;
-}
-.ptl {
-	padding-top: 1.5em;
-}
-.pbs, .pvs {
-	padding-bottom: .25em;
-}
-.pvs, .pts {
-	padding-top: .25em;
-}
-.unit {
-	float: left;
-}
-.unitRight {
-	float: right;
-}
-.size1of2 {
-	width: 50%;
-}
-.size1of1 {
-	width: 100%;
-}
-.clearfix:before, .clearfix:after {
-	content: " ";
-	display: table;
-}
-.clearfix:after {
-	clear: both;
-}
-.hidden-true {
-	display: none;
-}
-.textbox0 {
-	width: 3em;
-	background: #f1f1f1;
-	padding: .25em .5em;
-	line-height: 1.5;
-	height: 1.5em;
-}
-.fs0 {
-	font-size: 16px;
-}
-.fs1 {
-	font-size: 18px;
-}

design/IcoMoon/demo.html

@@ -1,99 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<title>IcoMoon - SVG Icons</title>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width">
-	<link rel="stylesheet" href="demo-files/demo.css">
-	<link rel="stylesheet" href="style.css">
-</head>
-<body>
-<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<defs>
-<symbol id="icon-bubble" viewBox="0 0 1024 1024">
-	<title>bubble</title>
-	<path class="path1" d="M512.889 170.667c156.334 0 283.556 127.596 283.556 284.444s-127.221 284.444-282.722 284.459l-3.388-0.208c-3.14-0.222-6.251-0.412-9.388-0.555l-19.111-0.791-208.473 62.485 35.778-141.227-29.388-42.51c-32.974-47.751-50.418-103.653-50.418-161.653 0-156.848 127.195-284.444 283.556-284.444zM512.889 56.889c-219.445 0-397.333 178.292-397.333 398.222 0 84.124 26.167 162.028 70.612 226.32l-72.389 285.68 382.416-114.626c5.584 0.236 11.056 0.848 16.695 0.848 219.445 0 397.333-178.292 397.333-398.222s-177.888-398.222-397.333-398.222v0z"></path>
-</symbol>
-<symbol id="icon-sound" viewBox="0 0 1024 1024">
-	<title>sound</title>
-	<path class="path1" d="M581.056 113.778c-6.332 0-12.779 1.819-19.001 5.764l-230.277 159.847c-4.722 3.292-10.332 5.056-16.11 5.056h-202.112c-31.305 0-56.667 25.472-56.667 56.889v341.333c0 31.417 25.362 56.889 56.667 56.889h202.112c5.778 0 11.388 1.764 16.11 5.056l230.277 159.847c6.222 3.945 12.695 5.764 19.001 5.764 22.277 0 42.5-22.736 42.5-54v-688.43c0-31.278-20.222-54.014-42.5-54.014zM510.222 730.139l-135.78-94.265c-9.472-6.569-20.722-10.1-32.222-10.1h-143.666c-15.666 0-28.334-12.736-28.334-28.444v-170.667c0-15.708 12.667-28.444 28.334-28.444h143.668c11.5 0 22.75-3.527 32.222-10.098l135.778-94.26v436.277z"></path>
-	<path class="path2" d="M963.333 500.583c-4.889-99.417-86.112-170.139-142.612-207.57-26.75-17.737-62.222-6.93-75.364 23.195l-2.137 4.889c-10.667 24.5-2.583 53.403 19.111 67.945 40.167 26.903 90.222 70.958 92.389 117.486 1.833 38.473-31.445 83.5-94.612 129.111-22.667 16.375-30.112 47.708-16.222 72.555l2.389 4.292c15.111 27.001 49.278 35.486 73.945 17.762 98.999-71.15 147.111-148.233 143.111-229.664z"></path>
-</symbol>
-<symbol id="icon-monitor" viewBox="0 0 1024 1024">
-	<title>monitor</title>
-	<path class="path1" d="M910.222 56.889h-796.444c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h312.889c-47.14 0-85.333 38.194-85.333 85.333v28.444h341.333v-28.444c0-47.14-38.194-85.333-85.333-85.333h312.889c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM853.333 711.111c0 15.723-12.722 28.444-28.444 28.444h-625.778c-15.723 0-28.444-12.722-28.444-28.444v-512c0-15.723 12.722-28.444 28.444-28.444h625.778c15.723 0 28.444 12.722 28.444 28.444v512z"></path>
-</symbol>
-<symbol id="icon-up" viewBox="0 0 1024 1024">
-	<title>up</title>
-	<path class="path1" d="M967.111 512c0-251.362-203.749-455.111-455.111-455.111s-455.111 203.749-455.111 455.111c0 251.362 203.749 455.111 455.111 455.111s455.111-203.749 455.111-455.111zM170.667 512c0-188.222 153.111-341.333 341.333-341.333s341.333 153.111 341.333 341.333-153.111 341.333-341.333 341.333-341.333-153.111-341.333-341.333z"></path>
-	<path class="path2" d="M568.784 683.221v-206.667l73.584 74.917c22.277 22.055 58.332 22.055 80.612 0 22.251-22.055 22.251-57.778 0-79.833l-168.779-170.667c-10.695-10.583-25.166-16.528-40.306-16.528-0.651 0-1.3 0.025-1.95 0.048-0.649-0.023-1.296-0.048-1.948-0.048-15.141 0-29.611 5.945-40.306 16.528l-168.779 170.667c-22.251 22.055-22.251 57.778 0 79.833 22.277 22.055 58.332 22.055 80.612 0l73.588-74.917v206.667c0 31.111 25.223 56.334 56.334 56.334h1.006c31.111 0 56.332-25.223 56.332-56.334z"></path>
-</symbol>
-<symbol id="icon-play" viewBox="0 0 1024 1024">
-	<title>play</title>
-	<path class="path1" d="M284.444 279.556l393.388 232.444-393.388 232.444v-464.889zM227.556 113.778c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.166-8.972 24.5-25.278 24.5-42.917s-9.333-33.945-24.5-42.917l-601.278-355.305z"></path>
-</symbol>
-<symbol id="icon-fast-forward" viewBox="0 0 1024 1024">
-	<title>fast-forward</title>
-	<path class="path1" d="M999.5 469.083l-601.278-355.305c-31.417 0-56.889 25.472-56.889 56.889v111.184l-284.444-168.073c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l284.444-168.084v111.195c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.195-8.972 24.5-25.278 24.5-42.917s-9.305-33.945-24.5-42.917zM341.333 609.972l-227.556 134.473v-464.889l227.556 134.473v195.943zM455.111 744.444v-464.889l393.388 232.444-393.388 232.444z"></path>
-</symbol>
-<symbol id="icon-refresh" viewBox="0 0 1024 1024">
-	<title>refresh</title>
-	<path class="path1" d="M455.874 796.763h-46.741c-134.912-22.064-238.203-139.554-238.203-280.692 0-47.296 12.142-91.534 32.651-130.773l34.875 48.352c25.397 35.179 80.169 25.371 91.813-16.452l66.11-237.758c9.198-33.013-15.646-65.719-49.909-65.664l-237.451 0.363c-42.183 0.055-66.555 47.852-41.877 82.087l64.19 88.951c-46.489 65.136-74.084 144.722-74.084 230.894 0 199.076 146 364.055 336.684 393.513 5.196 0.805 10.256 0.583 15.2-0.055v0.693h46.741c31.012 0 56.133-25.122 56.133-56.162v-1.14c0-31.012-25.122-56.158-56.133-56.158z"></path>
-	<path class="path2" d="M956.871 827.803l-64.219-88.951c46.517-65.138 74.084-144.722 74.084-230.894 0-199.076-145.972-364.057-336.656-393.54-5.198-0.805-10.256-0.583-15.202 0.084v-0.724h-46.768c-30.985 0-56.105 25.148-56.105 56.16v1.14c0 31.040 25.12 56.188 56.105 56.188h46.768c134.914 22.064 238.174 139.554 238.174 280.692 0 47.296-12.142 91.534-32.622 130.773l-34.903-48.352c-25.371-35.18-80.171-25.371-91.785 16.423l-66.137 237.756c-9.17 33.042 15.671 65.721 49.936 65.666l237.451-0.334c42.185-0.057 66.555-47.881 41.879-82.087z"></path>
-</symbol>
-<symbol id="icon-film" viewBox="0 0 1024 1024">
-	<title>film</title>
-	<path class="path1" d="M967.111 113.778h-910.222c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h910.222c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM113.778 227.556h113.778v113.778h-113.778v-113.778zM113.778 455.111h113.778v113.778h-113.778v-113.778zM113.778 796.444v-113.778h113.778v113.778h-113.778zM341.333 796.444v-568.889h341.333v568.889h-341.333zM910.222 796.444h-113.778v-113.778h113.778v113.778zM910.222 568.889h-113.778v-113.778h113.778v113.778zM910.222 341.333h-113.778v-113.778h113.778v113.778z"></path>
-</symbol>
-</defs>
-</svg>
-
-<header class="bgc1 clearfix">
-	<p class="mhl">SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
-</header>
-	<div class="clearfix mhl ptl">
-		<h1 class="mvm mtn fgc1">Grid Size: 18</h1>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-bubble"><use xlink:href="#icon-bubble"></use></svg><span class="mls"> icon-bubble</span>
-			</div>
-		</div>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-sound"><use xlink:href="#icon-sound"></use></svg><span class="mls"> icon-sound</span>
-			</div>
-		</div>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-monitor"><use xlink:href="#icon-monitor"></use></svg><span class="mls"> icon-monitor</span>
-			</div>
-		</div>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-up"><use xlink:href="#icon-up"></use></svg><span class="mls"> icon-up</span>
-			</div>
-		</div>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg><span class="mls"> icon-play</span>
-			</div>
-		</div>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-fast-forward"><use xlink:href="#icon-fast-forward"></use></svg><span class="mls"> icon-fast-forward</span>
-			</div>
-		</div>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-refresh"><use xlink:href="#icon-refresh"></use></svg><span class="mls"> icon-refresh</span>
-			</div>
-		</div>
-		<div class="glyph fs1">
-			<div class="clearfix pbs">
-				<svg class="icon icon-film"><use xlink:href="#icon-film"></use></svg><span class="mls"> icon-film</span>
-			</div>
-		</div>
-	</div>
-
-</body>
-</html>

design/IcoMoon/style.css

@@ -1,6 +0,0 @@
-.icon {
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	fill: currentColor;
-}

design/IcoMoon/svgdefs.svg

@@ -1,39 +0,0 @@
-<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<defs>
-<symbol id="icon-bubble" viewBox="0 0 1024 1024">
-	<title>bubble</title>
-	<path class="path1" d="M512.889 170.667c156.334 0 283.556 127.596 283.556 284.444s-127.221 284.444-282.722 284.459l-3.388-0.208c-3.14-0.222-6.251-0.412-9.388-0.555l-19.111-0.791-208.473 62.485 35.778-141.227-29.388-42.51c-32.974-47.751-50.418-103.653-50.418-161.653 0-156.848 127.195-284.444 283.556-284.444zM512.889 56.889c-219.445 0-397.333 178.292-397.333 398.222 0 84.124 26.167 162.028 70.612 226.32l-72.389 285.68 382.416-114.626c5.584 0.236 11.056 0.848 16.695 0.848 219.445 0 397.333-178.292 397.333-398.222s-177.888-398.222-397.333-398.222v0z"></path>
-</symbol>
-<symbol id="icon-sound" viewBox="0 0 1024 1024">
-	<title>sound</title>
-	<path class="path1" d="M581.056 113.778c-6.332 0-12.779 1.819-19.001 5.764l-230.277 159.847c-4.722 3.292-10.332 5.056-16.11 5.056h-202.112c-31.305 0-56.667 25.472-56.667 56.889v341.333c0 31.417 25.362 56.889 56.667 56.889h202.112c5.778 0 11.388 1.764 16.11 5.056l230.277 159.847c6.222 3.945 12.695 5.764 19.001 5.764 22.277 0 42.5-22.736 42.5-54v-688.43c0-31.278-20.222-54.014-42.5-54.014zM510.222 730.139l-135.78-94.265c-9.472-6.569-20.722-10.1-32.222-10.1h-143.666c-15.666 0-28.334-12.736-28.334-28.444v-170.667c0-15.708 12.667-28.444 28.334-28.444h143.668c11.5 0 22.75-3.527 32.222-10.098l135.778-94.26v436.277z"></path>
-	<path class="path2" d="M963.333 500.583c-4.889-99.417-86.112-170.139-142.612-207.57-26.75-17.737-62.222-6.93-75.364 23.195l-2.137 4.889c-10.667 24.5-2.583 53.403 19.111 67.945 40.167 26.903 90.222 70.958 92.389 117.486 1.833 38.473-31.445 83.5-94.612 129.111-22.667 16.375-30.112 47.708-16.222 72.555l2.389 4.292c15.111 27.001 49.278 35.486 73.945 17.762 98.999-71.15 147.111-148.233 143.111-229.664z"></path>
-</symbol>
-<symbol id="icon-monitor" viewBox="0 0 1024 1024">
-	<title>monitor</title>
-	<path class="path1" d="M910.222 56.889h-796.444c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h312.889c-47.14 0-85.333 38.194-85.333 85.333v28.444h341.333v-28.444c0-47.14-38.194-85.333-85.333-85.333h312.889c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM853.333 711.111c0 15.723-12.722 28.444-28.444 28.444h-625.778c-15.723 0-28.444-12.722-28.444-28.444v-512c0-15.723 12.722-28.444 28.444-28.444h625.778c15.723 0 28.444 12.722 28.444 28.444v512z"></path>
-</symbol>
-<symbol id="icon-up" viewBox="0 0 1024 1024">
-	<title>up</title>
-	<path class="path1" d="M967.111 512c0-251.362-203.749-455.111-455.111-455.111s-455.111 203.749-455.111 455.111c0 251.362 203.749 455.111 455.111 455.111s455.111-203.749 455.111-455.111zM170.667 512c0-188.222 153.111-341.333 341.333-341.333s341.333 153.111 341.333 341.333-153.111 341.333-341.333 341.333-341.333-153.111-341.333-341.333z"></path>
-	<path class="path2" d="M568.784 683.221v-206.667l73.584 74.917c22.277 22.055 58.332 22.055 80.612 0 22.251-22.055 22.251-57.778 0-79.833l-168.779-170.667c-10.695-10.583-25.166-16.528-40.306-16.528-0.651 0-1.3 0.025-1.95 0.048-0.649-0.023-1.296-0.048-1.948-0.048-15.141 0-29.611 5.945-40.306 16.528l-168.779 170.667c-22.251 22.055-22.251 57.778 0 79.833 22.277 22.055 58.332 22.055 80.612 0l73.588-74.917v206.667c0 31.111 25.223 56.334 56.334 56.334h1.006c31.111 0 56.332-25.223 56.332-56.334z"></path>
-</symbol>
-<symbol id="icon-play" viewBox="0 0 1024 1024">
-	<title>play</title>
-	<path class="path1" d="M284.444 279.556l393.388 232.444-393.388 232.444v-464.889zM227.556 113.778c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.166-8.972 24.5-25.278 24.5-42.917s-9.333-33.945-24.5-42.917l-601.278-355.305z"></path>
-</symbol>
-<symbol id="icon-fast-forward" viewBox="0 0 1024 1024">
-	<title>fast-forward</title>
-	<path class="path1" d="M999.5 469.083l-601.278-355.305c-31.417 0-56.889 25.472-56.889 56.889v111.184l-284.444-168.073c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889l284.444-168.084v111.195c0 31.417 25.472 56.889 56.889 56.889l601.278-355.305c15.195-8.972 24.5-25.278 24.5-42.917s-9.305-33.945-24.5-42.917zM341.333 609.972l-227.556 134.473v-464.889l227.556 134.473v195.943zM455.111 744.444v-464.889l393.388 232.444-393.388 232.444z"></path>
-</symbol>
-<symbol id="icon-refresh" viewBox="0 0 1024 1024">
-	<title>refresh</title>
-	<path class="path1" d="M455.874 796.763h-46.741c-134.912-22.064-238.203-139.554-238.203-280.692 0-47.296 12.142-91.534 32.651-130.773l34.875 48.352c25.397 35.179 80.169 25.371 91.813-16.452l66.11-237.758c9.198-33.013-15.646-65.719-49.909-65.664l-237.451 0.363c-42.183 0.055-66.555 47.852-41.877 82.087l64.19 88.951c-46.489 65.136-74.084 144.722-74.084 230.894 0 199.076 146 364.055 336.684 393.513 5.196 0.805 10.256 0.583 15.2-0.055v0.693h46.741c31.012 0 56.133-25.122 56.133-56.162v-1.14c0-31.012-25.122-56.158-56.133-56.158z"></path>
-	<path class="path2" d="M956.871 827.803l-64.219-88.951c46.517-65.138 74.084-144.722 74.084-230.894 0-199.076-145.972-364.057-336.656-393.54-5.198-0.805-10.256-0.583-15.202 0.084v-0.724h-46.768c-30.985 0-56.105 25.148-56.105 56.16v1.14c0 31.040 25.12 56.188 56.105 56.188h46.768c134.914 22.064 238.174 139.554 238.174 280.692 0 47.296-12.142 91.534-32.622 130.773l-34.903-48.352c-25.371-35.18-80.171-25.371-91.785 16.423l-66.137 237.756c-9.17 33.042 15.671 65.721 49.936 65.666l237.451-0.334c42.185-0.057 66.555-47.881 41.879-82.087z"></path>
-</symbol>
-<symbol id="icon-film" viewBox="0 0 1024 1024">
-	<title>film</title>
-	<path class="path1" d="M967.111 113.778h-910.222c-31.417 0-56.889 25.472-56.889 56.889v682.667c0 31.417 25.472 56.889 56.889 56.889h910.222c31.417 0 56.889-25.472 56.889-56.889v-682.667c0-31.417-25.472-56.889-56.889-56.889zM113.778 227.556h113.778v113.778h-113.778v-113.778zM113.778 455.111h113.778v113.778h-113.778v-113.778zM113.778 796.444v-113.778h113.778v113.778h-113.778zM341.333 796.444v-568.889h341.333v568.889h-341.333zM910.222 796.444h-113.778v-113.778h113.778v113.778zM910.222 568.889h-113.778v-113.778h113.778v113.778zM910.222 341.333h-113.778v-113.778h113.778v113.778z"></path>
-</symbol>
-</defs>
-</svg>

docs/dist/templates.js

@@ -1,2 +1,2 @@
     var templates = {};
-    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("	<div class=\"player-progress\">");t.b("\n" + i);t.b("		<progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% played");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("		<progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% buffered");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("	</div>");t.b("\n" + i);t.b("	<span class=\"player-controls-playback\">");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Rewind <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<span class=\"player-time\">");t.b("\n" + i);t.b("			<span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b("			<span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("		</span>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("	<span class=\"player-controls-sound\">");t.b("\n" + i);t.b("		<input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("		<label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b("			<svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b("		<input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("		<input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("		<label for=\"captions{id}\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("			<svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("    <div class=\"player-progress\">");t.b("\n" + i);t.b("        <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b("        <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b("        <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% played");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("        <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% buffered");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <span class=\"player-controls-left\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <span class=\"player-time\">");t.b("\n" + i);t.b("            <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b("            <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("        </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    <span class=\"player-controls-right\">");t.b("\n" + i);t.b("        <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("        <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b("            <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b("        </label>");t.b("\n");t.b("\n" + i);t.b("        <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b("        <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("        <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("        <label for=\"captions{id}\">");t.b("\n" + i);t.b("            <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b("        </label>");t.b("\n");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("            <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});

docs/error.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <html lang="en" class="error">
-	<head>
-		<meta charset="utf-8" />
-		<title>Doh. Looks like something went wrong.</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1">
+    <head>
+        <meta charset="utf-8" />
+        <title>Doh. Looks like something went wrong.</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<!-- Docs styles -->
-		<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
-	</head>
-	<body>
-		<main>
-			<h1>Doh.</h1>
-			<p>Looks like something went wrong.</p>
-			<a href="http://plyr.io" class="btn">Back to plyr.io</a>
-		</main>
-	</body>
+        <!-- Docs styles -->
+        <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
+    </head>
+    <body>
+        <main>
+            <h1>Doh.</h1>
+            <p>Looks like something went wrong.</p>
+            <a href="http://plyr.io" class="btn">Back to plyr.io</a>
+        </main>
+    </body>
 </html>

docs/index.html

@@ -1,79 +1,79 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<title>Plyr - A simple HTML5 media player</title>
-		<meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
-		<meta name="author" content="Sam Potts">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
+    <head>
+        <meta charset="utf-8" />
+        <title>Plyr - A simple HTML5 media player</title>
+        <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+        <meta name="author" content="Sam Potts">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<!-- Styles -->
-		<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/plyr.css">
+        <!-- Styles -->
+        <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
 
-		<!-- Docs styles -->
-		<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
-	</head>
-	<body>
-		<header>
-			<h1>Plyr</h1>
-			<p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
-			<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a>
-		</header>
+        <!-- Docs styles -->
+        <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
+    </head>
+    <body>
+        <header>
+            <h1>Plyr</h1>
+            <p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
+            <a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a>
+        </header>
 
-		<main>
-			<section class="example-video">
-				<div class="player">
-					<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
-						<!-- Video files -->
-						<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
-						<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
+        <main>
+            <section class="example-video">
+                <div class="player">
+                    <video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
+                        <!-- Video files -->
+                        <source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+                        <source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
                         
-						<!-- Text track file -->
-						<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
+                        <!-- Text track file -->
+                        <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>
                         
-						<!-- Fallback for browsers that don't support the <video> element -->
-						<div>
-							<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
-						</div>
-					</video>
-				</div>
-				<small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
-			</section>
+                        <!-- Fallback for browsers that don't support the <video> element -->
+                        <div>
+                            <a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
+                        </div>
+                    </video>
+                </div>
+                <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
+            </section>
 
-			<section class="example-audio">
-				<div class="player">
-					<audio controls>
-						<!-- Audio files -->
-						<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
-						<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
+            <section class="example-audio">
+                <div class="player">
+                    <audio controls>
+                        <!-- Audio files -->
+                        <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+                        <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
                         
-						<!-- Fallback for browsers that don't support the <audio> element -->
-						<div>
-							<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
-						</div>
-					</audio>
-				</div>
-				<small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
-			</section>
-		</main>
+                        <!-- Fallback for browsers that don't support the <audio> element -->
+                        <div>
+                            <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
+                        </div>
+                    </audio>
+                </div>
+                <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
+            </section>
+        </main>
 
-		<footer>
-			<p>Used by &hellip;</p>
-			<a href="https://selz.com" target="_blank" class="logo">
-				<img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
-			</a>
-		</footer>
+        <footer>
+            <p>Used by &hellip;</p>
+            <a href="https://selz.com" target="_blank" class="logo">
+                <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
+            </a>
+        </footer>
 
-		<!-- Load SVG defs -->
-		<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
-		<script>
-		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.20/sprite.svg");
-		</script>
+        <!-- Load SVG defs -->
+        <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
+        <script>
+        (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.26/sprite.svg");
+        </script>
 
-		<!-- Plyr core script -->
-		<script src="//cdn.plyr.io/1.0.20/plyr.js"></script>
+        <!-- Plyr core script -->
+        <script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
 
-		<!-- Docs script -->
-		<script src="//cdn.plyr.io/1.0.20/docs.js"></script>
-	</body>
+        <!-- Docs script -->
+        <script src="//cdn.plyr.io/1.0.26/docs.js"></script>
+    </body>
 </html>

docs/src/less/docs.less

@@ -12,153 +12,153 @@
 // Variables
 // ---------------------------------------
 // Colors
-@blue:          			#3498DB;
-@gray-dark: 				#343f4a;
-@gray: 						#565d64;
-@gray-light: 				#cbd0d3;
+@blue:                      #3498DB;
+@gray-dark:                 #343f4a;
+@gray:                      #565d64;
+@gray-light:                #cbd0d3;
 
 // Elements
-@link-color: 				@blue;
-@padding-base: 				20px;
+@link-color:                @blue;
+@padding-base:              20px;
 
 // Breakpoints
-@screen-md: 				768px;
+@screen-md:                 768px;
 
 // BORDER-BOX ALL THE THINGS! 
 // http://paulirish.com/2012/box-sizing-border-box-ftw/
 *, *::after, *::before {  
-	box-sizing: border-box; 
+    box-sizing: border-box; 
 }
 
 // Base
 body {
-	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	background: #fff;
-	line-height: 1.5;
-	text-align: center;
-	color: #6D797F;
+    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background: #fff;
+    line-height: 1.5;
+    text-align: center;
+    color: #6D797F;
 }
 
 // Error page
 html.error,
 .error body {
-	height: 100%;
+    height: 100%;
 }
 .error body {
-	width: 100%;
-	display: table;
-	table-layout: fixed;
+    width: 100%;
+    display: table;
+    table-layout: fixed;
 }
 .error main {
-	display: table-cell;
-	width: 100%;
-	vertical-align: middle;
+    display: table-cell;
+    width: 100%;
+    vertical-align: middle;
 }
 
 // Type
 h1,
 h2 {
-	letter-spacing: -.025em;
-	color: #2E3C44;
-	margin: 0 0 (@padding-base / 2);
-	line-height: 1.2;
-	.font-smoothing();
+    letter-spacing: -.025em;
+    color: #2E3C44;
+    margin: 0 0 (@padding-base / 2);
+    line-height: 1.2;
+    .font-smoothing();
 }
 h1 {
-	.font-size(64);
-	color: #3498DB;
+    .font-size(64);
+    color: #3498DB;
 }
 p,
 small {
-	margin: 0 0 @padding-base;
+    margin: 0 0 @padding-base;
 }
 small {
-	display: block;
-	padding: 0 (@padding-base / 2);
-	.font-size(14);
+    display: block;
+    padding: 0 (@padding-base / 2);
+    .font-size(14);
 }
 
 // Header
 header {
-	padding: @padding-base;
-	margin-bottom: @padding-base;
+    padding: @padding-base;
+    margin-bottom: @padding-base;
 
-	p {
-		.font-size(18);
-	}
-	@media (min-width: 560px) {
-		padding-top: (@padding-base * 3);
-		padding-bottom: (@padding-base * 3);
-	}
+    p {
+        .font-size(18);
+    }
+    @media (min-width: 560px) {
+        padding-top: (@padding-base * 3);
+        padding-bottom: (@padding-base * 3);
+    }
 }
 
 // Sections
 section {
-	padding-bottom: @padding-base;
+    padding-bottom: @padding-base;
 
-	@media (min-width: 560px) {
-		padding-bottom: (@padding-base * 2);
-	}
+    @media (min-width: 560px) {
+        padding-bottom: (@padding-base * 2);
+    }
 }
 
 // Links & Buttons
 a {
-	text-decoration: none;
-	color: @link-color;
-	border-bottom: 1px solid currentColor;
-	transition: all .3s ease;
+    text-decoration: none;
+    color: @link-color;
+    border-bottom: 1px solid currentColor;
+    transition: all .3s ease;
 
-	&:hover,
-	&:focus {
-		color: #000;
-	}
-	&:focus {
-		.tab-focus();
-	}
-	&.logo {
-		border: 0;
-	}
+    &:hover,
+    &:focus {
+        color: #000;
+    }
+    &:focus {
+        .tab-focus();
+    }
+    &.logo {
+        border: 0;
+    }
 }
 .btn {
-	display: inline-block;
-	padding: (@padding-base / 2) (@padding-base * 1.5);
-	background: @link-color;
-	border: 0;
-	color: #fff;
-	.font-smoothing(on);
-	font-weight: 600;
-	border-radius: 3px;
-	user-select: none;
+    display: inline-block;
+    padding: (@padding-base / 2) (@padding-base * 1.5);
+    background: @link-color;
+    border: 0;
+    color: #fff;
+    .font-smoothing(on);
+    font-weight: 600;
+    border-radius: 3px;
+    user-select: none;
     
-	&:hover,
-	&:focus {
-		color: #fff;
-		background: darken(@link-color, 5%);
-	}
+    &:hover,
+    &:focus {
+        color: #fff;
+        background: darken(@link-color, 5%);
+    }
 }
 
 // Players
 .example-audio .player {
-	max-width: 480px;
+    max-width: 480px;
 }
 .example-video .player {
-	max-width: 1200px;
+    max-width: 1200px;
 }
 .example-audio .player,
 .example-video .player {
-	margin: 0 auto @padding-base;
+    margin: 0 auto @padding-base;
 
-	&-fullscreen,
-	&.fullscreen-active {
-		max-width: none;
-	}
+    &-fullscreen,
+    &.fullscreen-active {
+        max-width: none;
+    }
 }
 
 // Footer
 footer {
-	margin-bottom: @padding-base;
+    margin-bottom: @padding-base;
 
-	p {
-		margin-bottom: (@padding-base / 2);
-	}
+    p {
+        margin-bottom: (@padding-base / 2);
+    }
 }

docs/src/less/lib/fontface.less

@@ -1,16 +1,16 @@
 @font-face {
-	font-family: "Avenir";
-	src: 	url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
-			url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), 
-			url("//cdn.plyr.io/fonts/avenir-medium.ttf")  format("truetype");
-	font-style:   normal;
-	font-weight:  400;
+    font-family: "Avenir";
+    src:    url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
+            url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), 
+            url("//cdn.plyr.io/fonts/avenir-medium.ttf")  format("truetype");
+    font-style:   normal;
+    font-weight:  400;
 }
 @font-face {
-	font-family: "Avenir";
-	src: 	url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
-			url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), 
-			url("//cdn.plyr.io/fonts/avenir-bold.ttf")  format("truetype");
-	font-style:   normal;
-	font-weight:  600;
+    font-family: "Avenir";
+    src:    url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
+            url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), 
+            url("//cdn.plyr.io/fonts/avenir-bold.ttf")  format("truetype");
+    font-style:   normal;
+    font-weight:  600;
 }

docs/src/less/lib/mixins.less

@@ -5,38 +5,38 @@
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 // ---------------------------------------
 .clearfix() {
-	zoom: 1;
-	&:before, 
-	&:after { content: ""; display: table; }
-	&:after { clear: both; }
+    zoom: 1;
+    &:before, 
+    &:after { content: ""; display: table; }
+    &:after { clear: both; }
 }
 
 // Webkit-style focus
 // ---------------------------------------
 .tab-focus() {
-	// Default
-	outline: thin dotted @gray-dark;
-	// Webkit
-	//outline: 5px auto -webkit-focus-ring-color;
-	outline-offset: 1px;
+    // Default
+    outline: thin dotted @gray-dark;
+    // Webkit
+    //outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 1px;
 }
 
 // Use rems for font sizing
 // Leave <body> at 100%/16px
 // ---------------------------------------
 .font-size(@font-size: 16){
-	@rem: round((@font-size / 16), 1);
-	font-size: (@font-size * 1px);
-	font-size: ~"@{rem}rem";
+    @rem: round((@font-size / 16), 1);
+    font-size: (@font-size * 1px);
+    font-size: ~"@{rem}rem";
 }
 
 // Font smoothing
 // ---------------------------------------
 .font-smoothing(@mode: on) when (@mode = on) {
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
 }
 .font-smoothing(@mode: on) when (@mode = off) {
-	-moz-osx-font-smoothing: auto;
-	-webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
 }

docs/src/templates/controls.html

@@ -1,59 +1,62 @@
 <div class="player-controls">
-	<div class="player-progress">
-		<progress class="player-progress-played" max="100" value="0">
-			<span>0</span>% played
-		</progress>
-		<progress class="player-progress-buffer" max="100" value="0">
-			<span>0</span>% buffered
-		</progress>
-	</div>
-	<span class="player-controls-playback">
-		<button type="button" data-player="restart">
-			<svg><use xlink:href="#icon-refresh"></use></svg>
-			<span class="sr-only">Restart</span>
-		</button>
-		<button type="button" data-player="rewind">
-			<svg><use xlink:href="#icon-rewind"></use></svg>
-			<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>
-		</button>
-		<button type="button" data-player="play">
-			<svg><use xlink:href="#icon-play"></use></svg>
-			<span class="sr-only">Play</span>
-		</button>
-		<button type="button" data-player="pause">
-			<svg><use xlink:href="#icon-pause"></use></svg>
-			<span class="sr-only">Pause</span>
-		</button>
-		<button type="button" data-player="fast-forward">
-			<svg><use xlink:href="#icon-fast-forward"></use></svg>
-			<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>
-		</button>
-		<span class="player-time">
-			<span class="sr-only">Time</span>
-			<span class="player-duration">00:00</span>
-		</span>
-	</span>
-	<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}">
-			<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>
+    <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">
+            <span>0</span>% played
+        </progress>
+        <progress class="player-progress-buffer" max="100" value="0">
+            <span>0</span>% buffered
+        </progress>
+    </div>
+    <span class="player-controls-left">
+        <button type="button" data-player="restart">
+            <svg><use xlink:href="#icon-restart"></use></svg>
+            <span class="sr-only">Restart</span>
+        </button>
+        <button type="button" data-player="rewind">
+            <svg><use xlink:href="#icon-rewind"></use></svg>
+            <span class="sr-only">Rewind {seektime} secs</span>
+        </button>
+        <button type="button" data-player="play">
+            <svg><use xlink:href="#icon-play"></use></svg>
+            <span class="sr-only">Play</span>
+        </button>
+        <button type="button" data-player="pause">
+            <svg><use xlink:href="#icon-pause"></use></svg>
+            <span class="sr-only">Pause</span>
+        </button>
+        <button type="button" data-player="fast-forward">
+            <svg><use xlink:href="#icon-fast-forward"></use></svg>
+            <span class="sr-only">Forward {seektime} secs</span>
+        </button>
+        <span class="player-time">
+            <span class="sr-only">Time</span>
+            <span class="player-duration">00:00</span>
+        </span>
+    </span>
+    <span class="player-controls-right">
+        <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-volume"></use></svg>
+            <span class="sr-only">Toggle 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">
+        <label for="volume{id}" class="sr-only">Volume</label>
+        <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
 
-		<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>
+        <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
+        <label for="captions{id}">
+            <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>
+        </label>
 
-		<button type="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>
-		</button>
-	</span>
+        <button type="button" data-player="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>
+        </button>
+    </span>
 </div>

gulpfile.js

@@ -4,59 +4,59 @@
 /*global require, __dirname*/
 /*jshint -W079 */
 
-var fs 			= require("fs"),
-	path 		= require("path"),
-	gulp 		= require("gulp"),
-	gutil 		= require("gulp-util"),
-	concat 		= require("gulp-concat"),
-	uglify 		= require("gulp-uglify"),
-	less 		= require("gulp-less"),
-	sass 		= require("gulp-sass"),
-	minify 		= require("gulp-minify-css"),
-	run 		= require("run-sequence"),
-	prefix 		= require("gulp-autoprefixer"),
-	svgstore 	= require("gulp-svgstore"),
-	svgmin 		= require("gulp-svgmin"),
-	hogan 		= require("gulp-hogan-compile"),
-	rename 		= require("gulp-rename"),
-	s3 			= require("gulp-s3"),
-	gzip 		= require("gulp-gzip"),
-	replace  	= require("gulp-replace"),
-	open 		= require("gulp-open");
+var fs          = require("fs"),
+    path        = require("path"),
+    gulp        = require("gulp"),
+    gutil       = require("gulp-util"),
+    concat      = require("gulp-concat"),
+    uglify      = require("gulp-uglify"),
+    less        = require("gulp-less"),
+    sass        = require("gulp-sass"),
+    minify      = require("gulp-minify-css"),
+    run         = require("run-sequence"),
+    prefix      = require("gulp-autoprefixer"),
+    svgstore    = require("gulp-svgstore"),
+    svgmin      = require("gulp-svgmin"),
+    hogan       = require("gulp-hogan-compile"),
+    rename      = require("gulp-rename"),
+    s3          = require("gulp-s3"),
+    gzip        = require("gulp-gzip"),
+    replace     = require("gulp-replace"),
+    open        = require("gulp-open");
 
 var root = __dirname,
 paths = {
-	plyr: {
-		// Source paths
-		src: {
-			less: 		path.join(root, "src/less/**/*"),
-			sass: 		path.join(root, "src/sass/**/*"),
-			js: 		path.join(root, "src/js/**/*"),
-			sprite: 	path.join(root, "src/sprite/*.svg")
-		},
-		// Output paths
-		output: 		path.join(root, "dist/")
-	},
-	docs: {
-		// Source paths
-		src: {
-			less: 		path.join(root, "docs/src/less/**/*"),
-			js: 		path.join(root, "docs/src/js/**/*"),
-			templates: 	path.join(root, "docs/src/templates/*.html")
-		},
-		// Output paths
-		output: 		path.join(root, "docs/dist/"),
-		// Docs
-		root: 			path.join(root, "docs/")
-	},
-	upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
+    plyr: {
+        // Source paths
+        src: {
+            less:       path.join(root, "src/less/**/*"),
+            sass:       path.join(root, "src/sass/**/*"),
+            js:         path.join(root, "src/js/**/*"),
+            sprite:     path.join(root, "src/sprite/*.svg")
+        },
+        // Output paths
+        output:         path.join(root, "dist/")
+    },
+    docs: {
+        // Source paths
+        src: {
+            less:       path.join(root, "docs/src/less/**/*"),
+            js:         path.join(root, "docs/src/js/**/*"),
+            templates:  path.join(root, "docs/src/templates/*.html")
+        },
+        // Output paths
+        output:         path.join(root, "docs/dist/"),
+        // Docs
+        root:           path.join(root, "docs/")
+    },
+    upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
 },
 
 // Task arrays
 tasks = {    
-	less: 	[],
-	sass: 	[],
-	js:   	[]
+    less:   [],
+    sass:   [],
+    js:     []
 },
 
 // Fetch bundles from JSON
@@ -69,88 +69,88 @@ function loadJSON(path) {
 }
 
 var build = {
-	js: function (files, bundle) {
-		for (var key in files) {
-			(function(key) {
-				var name = "js-" + key;
-				tasks.js.push(name);
+    js: function (files, bundle) {
+        for (var key in files) {
+            (function(key) {
+                var name = "js-" + key;
+                tasks.js.push(name);
 
-				gulp.task(name, function () {
-					return gulp
-						.src(bundles[bundle].js[key])
-						.pipe(concat(key))
-						.pipe(uglify())
-						.pipe(gulp.dest(paths[bundle].output));
-				});
-			})(key);
-		}
-	},
-	less: function(files, bundle) {
-		for (var key in files) {
-			(function (key) {		
-				var name = "less-" + key;
-				tasks.less.push(name);
+                gulp.task(name, function () {
+                    return gulp
+                        .src(bundles[bundle].js[key])
+                        .pipe(concat(key))
+                        .pipe(uglify())
+                        .pipe(gulp.dest(paths[bundle].output));
+                });
+            })(key);
+        }
+    },
+    less: function(files, bundle) {
+        for (var key in files) {
+            (function (key) {       
+                var name = "less-" + key;
+                tasks.less.push(name);
 
-				gulp.task(name, function () {
-					return gulp
-						.src(bundles[bundle].less[key])
-						.pipe(less())
-						.on("error", gutil.log)
-						.pipe(concat(key))
-						.pipe(prefix(["last 2 versions"], { cascade: true }))
-						.pipe(minify())
-						.pipe(gulp.dest(paths[bundle].output));
-				});
-			})(key);
-		}
-	},
-	sass: function(files, bundle) {
-		for (var key in files) {
-			(function (key) {		
-				var name = "sass-" + key;
-				tasks.sass.push(name);
+                gulp.task(name, function () {
+                    return gulp
+                        .src(bundles[bundle].less[key])
+                        .pipe(less())
+                        .on("error", gutil.log)
+                        .pipe(concat(key))
+                        .pipe(prefix(["last 2 versions"], { cascade: true }))
+                        .pipe(minify())
+                        .pipe(gulp.dest(paths[bundle].output));
+                });
+            })(key);
+        }
+    },
+    sass: function(files, bundle) {
+        for (var key in files) {
+            (function (key) {       
+                var name = "sass-" + key;
+                tasks.sass.push(name);
 
-				gulp.task(name, function () {
-					return gulp
-						.src(bundles[bundle].sass[key])
-						.pipe(sass())
-						.on("error", gutil.log)
-						.pipe(concat(key))
-						.pipe(prefix(["last 2 versions"], { cascade: true }))
-						.pipe(minify())
-						.pipe(gulp.dest(paths[bundle].output));
-				});
-			})(key);
-		}
-	},
-	sprite: function() {
-		// Process Icons
-		gulp.task("sprite", function () {
-			return gulp
-				.src(paths.plyr.src.sprite)
-				.pipe(svgmin({
-					plugins: [{
-						removeDesc: true
-					}]
-				}))
-		        .pipe(svgstore())
-			    .pipe(gulp.dest(paths.plyr.output));
-		});
-	},
-	templates: function() {
-		// Build templates
-		gulp.task("templates", function () {
-			return gulp
-				.src(paths.docs.src.templates)
-				.pipe(hogan("templates.js", {
-					wrapper: false,
-					templateName: function (file) {
-						return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
-					}
-				}))
-				.pipe(gulp.dest(paths.docs.output));
-		});
-	}
+                gulp.task(name, function () {
+                    return gulp
+                        .src(bundles[bundle].sass[key])
+                        .pipe(sass())
+                        .on("error", gutil.log)
+                        .pipe(concat(key))
+                        .pipe(prefix(["last 2 versions"], { cascade: true }))
+                        .pipe(minify())
+                        .pipe(gulp.dest(paths[bundle].output));
+                });
+            })(key);
+        }
+    },
+    sprite: function() {
+        // Process Icons
+        gulp.task("sprite", function () {
+            return gulp
+                .src(paths.plyr.src.sprite)
+                .pipe(svgmin({
+                    plugins: [{
+                        removeDesc: true
+                    }]
+                }))
+                .pipe(svgstore())
+                .pipe(gulp.dest(paths.plyr.output));
+        });
+    },
+    templates: function() {
+        // Build templates
+        gulp.task("templates", function () {
+            return gulp
+                .src(paths.docs.src.templates)
+                .pipe(hogan("templates.js", {
+                    wrapper: false,
+                    templateName: function (file) {
+                        return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
+                    }
+                }))
+                .pipe(gulp.dest(paths.docs.output));
+        });
+    }
 };
 
 // Plyr core files
@@ -166,22 +166,22 @@ build.js(bundles.docs.js, "docs");
 
 // Default gulp task
 gulp.task("default", function(){
-	run("templates", tasks.js, tasks.less, "sprite");
+    run("templates", tasks.js, tasks.less, "sprite");
 });
 
 // Build all JS (inc. templates)
 gulp.task("js", function(){
-	run("templates", tasks.js);
+    run("templates", tasks.js);
 });
 
 // Build SASS (for testing, default is LESS)
 gulp.task("sass", function(){
-	run(tasks.sass);
+    run(tasks.sass);
 });
 
 // Watch for file changes
 gulp.task("watch", function () {
-	// Plyr core
+    // Plyr core
     gulp.watch(paths.plyr.src.js, tasks.js);
     gulp.watch(paths.plyr.src.less, tasks.less);
     gulp.watch(paths.plyr.src.sprite, "sprite");
@@ -189,7 +189,7 @@ gulp.task("watch", function () {
     // Docs
     gulp.watch(paths.docs.src.js, tasks.js);
     gulp.watch(paths.docs.src.less, tasks.less);
-	gulp.watch(paths.docs.src.templates, "js");
+    gulp.watch(paths.docs.src.templates, "js");
 });
 
 // Publish a version to CDN and docs
@@ -198,69 +198,69 @@ gulp.task("watch", function () {
 // Some options
 var aws = loadJSON(path.join(root, "aws.json")),
 version = package.version,
-maxAge 	= 31536000, // seconds 1 year
+maxAge  = 31536000, // seconds 1 year
 options = {
-	cdn: {
-		headers: {
-			"Cache-Control": "max-age=" + maxAge + ", no-transform, public",
-			"Vary": "Accept-Encoding"
-		},
-		gzippedOnly: true
-	},
-	docs: {
-		headers: {
-			"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
-			"Vary": "Accept-Encoding"
-		},
-		gzippedOnly: true
-	}
+    cdn: {
+        headers: {
+            "Cache-Control": "max-age=" + maxAge + ", no-transform, public",
+            "Vary": "Accept-Encoding"
+        },
+        gzippedOnly: true
+    },
+    docs: {
+        headers: {
+            "Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
+            "Vary": "Accept-Encoding"
+        },
+        gzippedOnly: true
+    }
 },
 cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi");
 
 // Publish version to CDN bucket
 gulp.task("cdn", function () {
-	console.log("Uploading " + version + " to " + aws.cdn.bucket);
+    console.log("Uploading " + version + " to " + aws.cdn.bucket);
 
-	// Upload to CDN 
-	gulp.src(paths.upload)
-		.pipe(rename(function (path) {
-		    path.dirname = path.dirname.replace(".", version);
-		}))
-		.pipe(gzip())
-		.pipe(s3(aws.cdn, options.cdn));
+    // Upload to CDN 
+    gulp.src(paths.upload)
+        .pipe(rename(function (path) {
+            path.dirname = path.dirname.replace(".", version);
+        }))
+        .pipe(gzip())
+        .pipe(s3(aws.cdn, options.cdn));
 });
 
 // Publish to Docs bucket
 gulp.task("docs", function () {
-	console.log("Uploading " + version + " docs to " + aws.docs.bucket);
+    console.log("Uploading " + version + " docs to " + aws.docs.bucket);
 
-	// Replace versioned files in *.html
-	gulp.src([paths.docs.root + "*.html"])
-		.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
-		.pipe(gulp.dest(paths.docs.root))
-		.pipe(gzip())
-		.pipe(s3(aws.docs, options.docs));
+    // Replace versioned files in *.html
+    gulp.src([paths.docs.root + "*.html"])
+        .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
+        .pipe(gulp.dest(paths.docs.root))
+        .pipe(gzip())
+        .pipe(s3(aws.docs, options.docs));
 
-	// Upload error.html to cdn using docs options
-	gulp.src([paths.docs.root + "error.html"])
-		.pipe(gzip())
-		.pipe(s3(aws.cdn, options.docs));
+    // Upload error.html to cdn using docs options
+    gulp.src([paths.docs.root + "error.html"])
+        .pipe(gzip())
+        .pipe(s3(aws.cdn, options.docs));
 });
 
 // Open the docs site to check it's sweet
 gulp.task("open", function () {
-	console.log("Opening " + aws.docs.bucket + "...");
+    console.log("Opening " + aws.docs.bucket + "...");
 
-	// A file must be specified or gulp will skip the task
-	// Doesn't matter which file since we set the URL above
-	// Weird, I know...
-	gulp.src([paths.docs.root + "index.html"])
-		.pipe(open("", {
-			url: "http://" + aws.docs.bucket
-		}));
+    // A file must be specified or gulp will skip the task
+    // Doesn't matter which file since we set the URL above
+    // Weird, I know...
+    gulp.src([paths.docs.root + "index.html"])
+        .pipe(open("", {
+            url: "http://" + aws.docs.bucket
+        }));
 });
 
 // Do everything 
 gulp.task("publish", function () {
-	run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open");
+    run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open");
 });

package.json

@@ -1,43 +1,43 @@
 {
-  "name": "plyr",
-  "version": "1.0.20",
-  "description": "A simple HTML5 media player using custom controls",
-  "homepage": "http://plyr.io",
-  "main": "gulpfile.js",
-  "dependencies": {},
-  "devDependencies": {
-    "gulp": "~3.8.6",
-    "gulp-autoprefixer": "^0.0.8",
-    "gulp-concat": "~2.3.3",
-    "gulp-gzip": "^1.0.0",
-    "gulp-hogan-compile": "^0.4.1",
-    "gulp-less": "~1.3.1",
-    "gulp-minify-css": "~0.3.6",
-    "gulp-open": "^0.3.2",
-    "gulp-rename": "^1.2.0",
-    "gulp-replace": "^0.5.3",
-    "gulp-s3": "^0.3.0",
-    "gulp-sass": "^1.3.3",
-    "gulp-svgmin": "^1.0.0",
-    "gulp-svgstore": "^5.0.0",
-    "gulp-uglify": "~0.3.1",
-    "gulp-util": "~2.2.20",
-    "run-sequence": "^0.3.6"
-  },
-  "scripts": {
-    "preinstall": "npm install -g gulp"
-  },
-  "keywords": [
-    "HTML5 Video",
-    "HTML5 Audio",
-    "Media Player"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/selz/plyr.git"
-  },
-  "authors": [
-    "Sam Potts <me@sampotts.me>"
-  ],
-  "license": "MIT"
+    "name": "plyr",
+    "version": "1.0.26",
+    "description": "A simple HTML5 media player using custom controls",
+    "homepage": "http://plyr.io",
+    "main": "gulpfile.js",
+    "dependencies": {},
+    "devDependencies": {
+        "gulp": "~3.8.6",
+        "gulp-autoprefixer": "^0.0.8",
+        "gulp-concat": "~2.3.3",
+        "gulp-gzip": "^1.0.0",
+        "gulp-hogan-compile": "^0.4.1",
+        "gulp-less": "~1.3.1",
+        "gulp-minify-css": "~0.3.6",
+        "gulp-open": "^0.3.2",
+        "gulp-rename": "^1.2.0",
+        "gulp-replace": "^0.5.3",
+        "gulp-s3": "^0.3.0",
+        "gulp-sass": "^1.3.3",
+        "gulp-svgmin": "^1.0.0",
+        "gulp-svgstore": "^5.0.0",
+        "gulp-uglify": "~0.3.1",
+        "gulp-util": "~2.2.20",
+        "run-sequence": "^0.3.6"
+    },
+    "scripts": {
+        "preinstall": "npm install -g gulp"
+    },
+    "keywords": [
+        "HTML5 Video",
+        "HTML5 Audio",
+        "Media Player"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/selz/plyr.git"
+    },
+    "authors": [
+        "Sam Potts <me@sampotts.me>"
+    ],
+    "license": "MIT"
 }

readme.md

@@ -3,14 +3,14 @@ A simple, accessible HTML5 media player.
 
 [Checkout the demo](http://plyr.io)
 
-[![Image of Plyr](https://cdn.plyr.io/static/plyr.png)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr.png?1)](http://plyr.io)
 
 ## Why?
 We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 
 
 ## Features
 - **Accessible** - full support for captions and screen readers.
-- **Lightweight** - just 5.3KB minified and gzipped.
+- **Lightweight** - just 5.7KB minified and gzipped.
 - **Customisable** - make the player look how you want with the markup you want.
 - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
 - **Responsive** - as you'd expect these days.
@@ -19,14 +19,18 @@ We wanted a lightweight, accessible and customisable media player that just supp
 - **Fullscreen** - supports native fullscreen with fallback to "full window" modes.
 - **No dependencies** - written in vanilla JavaScript, no jQuery required. 
 
+Oh and yes, it works with Bootstrap. 
+
 ## Changelog
 Check out [the changelog](changelog.md)
 
 ## Planned development
 - Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
-- Accept a selector for the `html` template property.
 - Multiple language captions (with selection)
-- Localisation of control labels 
+- Playlists (audio and video)
+- Set source by API
+- Tooltip option (for seeking and controls)
+... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
 
 If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.
 
@@ -34,6 +38,8 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup. 
 
+**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.26/plyr.js` to `https://cdn.plyr.io/1.0.26/plyr.js`
+
 ### Bower
 If bower is your thang, you can grab Plyr using:
 ```
@@ -45,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
 If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
 
 ```html
-<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/plyr.css">
-<script src="//cdn.plyr.io/1.0.19/plyr.js"></script>
+<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
+<script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.19/sprite.svg`.
+You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.26/sprite.svg`.
 
 ### CSS
 If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. 
@@ -184,13 +190,19 @@ You can pass the following options to the setup method.
     <td><code>click</code></td>
     <td>Boolean</td>
     <td><code>true</code></td>
-    <td>Click (or tap) will toggle pause/play of a `<video>`.</td>
+    <td>Click (or tap) will toggle pause/play of a <code>&lt;video&gt;</code>.</td>
+  </tr>
+  <tr>
+    <td><code>tooltips</code></td>
+    <td>Boolean</td>
+    <td><code>false</code></td>
+    <td>Display control labels as tooltips on :hover &amp; :focus (by default, the labels are screen reader only).</td>
   </tr>
   <tr>
     <td><code>selectors</code></td>
     <td>Object</td>
     <td>&mdash;</td>
-    <td>See `plyr.js` in `/src` for more info. The only option you might want to change is `player` which is the hook used for Plyr, the default is `.player`.</td>
+    <td>See <code>plyr.js</code> in <code>/src</code> for more info. The only option you might want to change is <code>player</code> which is the hook used for Plyr, the default is <code>.player</code>.</td>
   </tr>
   <tr>
     <td><code>classes</code></td>
@@ -202,19 +214,19 @@ You can pass the following options to the setup method.
     <td><code>captions</code></td>
     <td>Object</td>
     <td>&mdash;</td>
-    <td>This currently contains one property `defaultActive` which toggles if captions should be on by default. The default value is `false`.</td>
+    <td>One property <code>defaultActive</code> which toggles if captions should be on by default. The default value is <code>false</code>.</td>
   </tr>
   <tr>
     <td><code>fullscreen</code></td>
     <td>Object</td>
     <td>&mdash;</td>
-    <td>This currently contains two properties; `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`. Also an extra property called `fallback` which will enable a 'full window' view for older browsers. The default value is `true`.</td>
+    <td>Two properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. Also an extra property called <code>fallback</code> which will enable a full window view for older browsers. The default value is <code>true</code>.</td>
   </tr>
   <tr>
     <td><code>storage</code></td>
     <td>Object</td>
     <td>&mdash;</td>
-    <td>This currently contains one property `enabled` which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later.</td>
+    <td>Two properties; <code>enabled</code> which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later. The second property <code>key</code> is the key used for the local storage. The default is <code>plyr_volume</code> until more settings are stored.</td>
   </tr>
  </tbody>
 </table>
@@ -239,45 +251,75 @@ Here's a list of the methods supported:
   </thead>
   <tbody>
   <tr>
-    <td><code>play</code></td>
+    <td><code>play()</code></td>
     <td>&mdash;</td>
     <td>Plays the media</td>
   </tr>
   <tr>
-    <td><code>pause</code></td>
+    <td><code>pause()</code></td>
     <td>&mdash;</td>
     <td>Pauses the media</td>
   </tr>
     <tr>
-    <td><code>restart</code></td>
+    <td><code>restart()</code></td>
     <td>&mdash;</td>
     <td>Restarts playback</td>
   </tr>
   <tr>
-    <td><code>rewind</code></td>
+    <td><code>rewind(...)</code></td>
     <td>Number</td>
     <td>Rewinds by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
   </tr>
   <tr>
-    <td><code>forward</code></td>
+    <td><code>forward(...)</code></td>
     <td>Number</td>
     <td>Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
   </tr>
   <tr>
-    <td><code>setVolume</code></td>
+    <td><code>seek(...)</code></td>
+    <td>Number</td>
+    <td>Seeks the media to the provided parameter, time in seconds.</td>
+  </tr>
+  <tr>
+    <td><code>setVolume(...)</code></td>
     <td>Number</td>
     <td>Sets the player volume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
   </tr>
   <tr>
-    <td><code>toggleMute</code></td>
+    <td><code>toggleMute()</code></td>
     <td>&mdash;</td>
     <td>Toggles mute for the player.</td>
   </tr>
   <tr>
-    <td><code>toggleCaptions</code></td>
+    <td><code>toggleCaptions()</code></td>
     <td>&mdash;</td>
     <td>Toggles whether captions are enabled.</td>
   </tr>
+  <tr>
+    <td><code>support(...)</code></td>
+    <td>String</td>
+    <td>Determine if a player supports a certain MIME type.</td>
+  </tr>
+  <tr>
+    <td><code>source(...)</code></td>
+    <td>String or Array</td>
+    <td>
+      Set the media source.
+      <br><br> 
+      <strong>string</strong><br>
+      <code>.source("/path/to/video.mp4")</code><br>
+      This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.
+      <br><br>
+      <strong>array</strong><br>
+      <code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
+      This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play. 
+    </td>
+  </tr>
+    <tr>
+    <td><code>poster(...)</code></td>
+    <td>String</td>
+    <td>Set the poster url. This is supported for the <code>video</code> element only.</td>
+  </tr>
  </tbody>
 </table>
 
@@ -313,19 +355,21 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
   </thead>
   <tbody>
     <tr>
+      <td>✔&sup1;</td>
       <td>✔</td>
       <td>✔</td>
       <td>✔</td>
-      <td>✔</td>
-      <td>✖&sup1;</td>
-      <td>✔&sup2;</td>
+      <td>✖&sup2;</td>
+      <td>✔&sup3;</td>
     </tr>
   </tbody>
 </table>
 
-&sup1; Native player used (no support for `<progress>` or `<input type="range">`)
+&sup1; iPhone forces the native player for `<video>` so no customisation possible. `<audio>` elements have volume controls disabled.
 
-&sup2; IE10 has no native fullscreen support, fallback can be used (see options)
+&sup2; Native player used (no support for `<progress>` or `<input type="range">`)
+
+&sup3; IE10 has no native fullscreen support, fallback can be used (see options)
 
 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use: 
 
@@ -346,6 +390,9 @@ Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([s
 - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
 - [HTML5 Weekly #177](http://html5weekly.com/issues/177)
 - [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
+- [Hacker News](https://news.ycombinator.com/item?id=9136774)
+- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
+- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
 
 ## Used by
 - [Selz.com](https://selz.com)
@@ -356,6 +403,7 @@ Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the abo
 Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
 - [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
 - The icons used in Plyr are [Vicons](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) plus some ones I made
+- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
 
 Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)

src/js/plyr.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.20
-// https://github.com/sampotts/plyr
+// plyr.js v1.0.25
+// https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
@@ -20,10 +20,13 @@
         seekTime:               10,
         volume:                 5,
         click:                  true,
+        tooltips:               false,
         selectors: {
             container:          ".player",
             controls:           ".player-controls",
+            labels:             "[data-player] .sr-only, label .sr-only",
             buttons: {
+                seek:           "[data-player='seek']",
                 play:           "[data-player='play']",
                 pause:          "[data-player='pause']",
                 restart:        "[data-player='restart']",
@@ -40,8 +43,7 @@
                 played:         ".player-progress-played"
             },
             captions:           ".player-captions",
-            duration:           ".player-duration",
-            seekTime:           ".player-seek-time"
+            duration:           ".player-duration"
         },
         classes: {
             video:              "player-video",
@@ -50,6 +52,9 @@
             stopped:            "stopped",
             playing:            "playing",
             muted:              "muted",
+            loading:            "loading",
+            tooltip:            "player-tooltip",
+            hidden:             "sr-only",
             captions: {
                 enabled:        "captions-enabled",
                 active:         "captions-active"
@@ -67,65 +72,71 @@
             fallback:           true
         },
         storage: {
-            enabled:            true
+            enabled:            true,
+            key:                "plyr_volume"
         },
         html: (function() {
-                return ["<div class='player-controls'>",
-                "<div class='player-progress'>",
-                    "<progress class='player-progress-played' max='100' value='0'>",
-                        "<span>0</span>% played",
-                    "</progress>",
-                    "<progress class='player-progress-buffer' max='100' value='0'>",
-                        "<span>0</span>% buffered",
-                    "</progress>",
-                "</div>",
-                "<span class='player-controls-playback'>",
-                    "<button type='button' data-player='restart'>",
-                        "<svg><use xlink:href='#icon-refresh'></use></svg>",
-                        "<span class='sr-only'>Restart</span>",
-                    "</button>",
-                    "<button type='button' data-player='rewind'>",
-                        "<svg><use xlink:href='#icon-rewind'></use></svg>",
-                        "<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
-                    "</button>",
-                    "<button type='button' data-player='play'>",
-                        "<svg><use xlink:href='#icon-play'></use></svg>",
-                        "<span class='sr-only'>Play</span>",
-                    "</button>",
-                    "<button type='button' data-player='pause'>",
-                        "<svg><use xlink:href='#icon-pause'></use></svg>",
-                        "<span class='sr-only'>Pause</span>",
-                    "</button>",
-                    "<button type='button' data-player='fast-forward'>",
-                        "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
-                        "<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
-                    "</button>",
-                    "<span class='player-time'>",
-                        "<span class='sr-only'>Time</span>",
-                        "<span class='player-duration'>00:00</span>",
+            return [
+                "<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'>",
+                            "<span>0</span>% played",
+                        "</progress>",
+                        "<progress class='player-progress-buffer' max='100' value='0'>",
+                            "<span>0</span>% buffered",
+                        "</progress>",
+                    "</div>",
+                    "<span class='player-controls-left'>",
+                        "<button type='button' data-player='restart'>",
+                            "<svg><use xlink:href='#icon-restart'></use></svg>",
+                            "<span class='sr-only'>Restart</span>",
+                        "</button>",
+                        "<button type='button' data-player='rewind'>",
+                            "<svg><use xlink:href='#icon-rewind'></use></svg>",
+                            "<span class='sr-only'>Rewind {seektime} secs</span>",
+                        "</button>",
+                        "<button type='button' data-player='play'>",
+                            "<svg><use xlink:href='#icon-play'></use></svg>",
+                            "<span class='sr-only'>Play</span>",
+                        "</button>",
+                        "<button type='button' data-player='pause'>",
+                            "<svg><use xlink:href='#icon-pause'></use></svg>",
+                            "<span class='sr-only'>Pause</span>",
+                        "</button>",
+                        "<button type='button' data-player='fast-forward'>",
+                            "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
+                            "<span class='sr-only'>Forward {seektime} secs</span>",
+                        "</button>",
+                        "<span class='player-time'>",
+                            "<span class='sr-only'>Time</span>",
+                            "<span class='player-duration'>00:00</span>",
+                        "</span>",
                     "</span>",
-                "</span>",
-                "<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}'>",
-                        "<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}'>",
-                        "<svg><use xlink:href='#icon-bubble'></use></svg>",
-                        "<span class='sr-only'>Captions</span>",
-                    "</label>",
-                    "<button type='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>",
-                    "</button>",
-                "</span>",
-            "</div>"].join("\n");
+                    "<span class='player-controls-right'>",
+                        "<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-volume'></use></svg>",
+                            "<span class='sr-only'>Toggle 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}'>",
+                            "<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>",
+                        "</label>",
+                        "<button type='button' data-player='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>",
+                        "</button>",
+                    "</span>",
+                "</div>"
+            ].join("\n");
         })()
     };
 
@@ -137,10 +148,10 @@
     }
 
     // Credits: http://paypal.github.io/accessible-html5-video-player/
-    // Unfortunately, due to scattered support, browser sniffing is required
+    // Unfortunately, due to mixed support, UA sniffing is required
     function _browserSniff() {
         var nAgt = navigator.userAgent,
-            browserName = navigator.appName,
+            name = navigator.appName,
             fullVersion = ""+parseFloat(navigator.appVersion),
             majorVersion = parseInt(navigator.appVersion,10),
             nameOffset,
@@ -149,22 +160,22 @@
 
         // MSIE 11
         if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) {
-            browserName = "IE";
+            name = "IE";
             fullVersion = "11;";
         }
         // MSIE
         else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) {
-            browserName = "IE";
+            name = "IE";
             fullVersion = nAgt.substring(verOffset+5);
         }
         // Chrome
         else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) {
-            browserName = "Chrome";
+            name = "Chrome";
             fullVersion = nAgt.substring(verOffset+7);
         }
         // Safari
         else if ((verOffset=nAgt.indexOf("Safari")) !== -1) {
-            browserName = "Safari";
+            name = "Safari";
             fullVersion = nAgt.substring(verOffset+7);
             if ((verOffset=nAgt.indexOf("Version")) !== -1) {
                 fullVersion = nAgt.substring(verOffset+8);
@@ -172,15 +183,15 @@
         }
         // Firefox
         else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) {
-            browserName = "Firefox";
+            name = "Firefox";
             fullVersion = nAgt.substring(verOffset+8);
         }
         // In most other browsers, "name/version" is at the end of userAgent 
         else if ( (nameOffset=nAgt.lastIndexOf(" ")+1) < (verOffset=nAgt.lastIndexOf("/")) ) {
-            browserName = nAgt.substring(nameOffset,verOffset);
+            name = nAgt.substring(nameOffset,verOffset);
             fullVersion = nAgt.substring(verOffset+1);
-            if (browserName.toLowerCase()==browserName.toUpperCase()) {
-                browserName = navigator.appName;
+            if (name.toLowerCase()==name.toUpperCase()) {
+                name = navigator.appName;
             }
         }
         // Trim the fullVersion string at semicolon/space if present
@@ -196,8 +207,43 @@
             fullVersion = ""+parseFloat(navigator.appVersion); 
             majorVersion = parseInt(navigator.appVersion,10);
         }
+
         // Return data
-        return [browserName, majorVersion];
+        return {
+            name:       name, 
+            version:    majorVersion, 
+            ios:        /(iPad|iPhone|iPod)/g.test(navigator.platform)
+        };
+    }
+
+    // Check for mime type support against a player instance
+    // Credits: http://diveintohtml5.info/everything.html 
+    // Related: http://www.leanbackplayer.com/test/h5mt.html
+    function _support(player, mimeType) {    
+        var media = player.media;
+
+        // Only check video types for video players
+        if(player.type == "video") {
+            // Check type
+            switch(mimeType) {
+                case "video/webm":   return !!(media.canPlayType && media.canPlayType("video/webm; codecs=\"vp8, vorbis\"").replace(/no/, ""));
+                case "video/mp4":    return !!(media.canPlayType && media.canPlayType("video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"").replace(/no/, ""));
+                case "video/ogg":    return !!(media.canPlayType && media.canPlayType("video/ogg; codecs=\"theora\"").replace(/no/, ""));
+            }
+        }
+
+        // Only check audio types for audio players
+        else if(player.type == "audio") {
+            // Check type
+            switch(mimeType) {
+                case "audio/mpeg":   return !!(media.canPlayType && media.canPlayType("audio/mpeg;").replace(/no/, ""));
+                case "audio/ogg":    return !!(media.canPlayType && media.canPlayType("audio/ogg; codecs=\"vorbis\"").replace(/no/, ""));
+                case "audio/wav":    return !!(media.canPlayType && media.canPlayType("audio/wav; codecs=\"1\"").replace(/no/, ""));
+            }
+        }        
+
+        // If we got this far, we're stuffed
+        return false;
     }
     
     // Replace all
@@ -237,6 +283,23 @@
         }
     }
 
+    // Remove an element
+    function _remove(element) {
+        element.parentNode.removeChild(element);
+    }
+
+    // Prepend child
+    function _prependChild(parent, element) {
+        parent.insertBefore(element, parent.firstChild);
+    }
+
+    // Set attributes
+    function _setAttributes(element, attributes) {
+        for(var key in attributes) {
+            element.setAttribute(key, attributes[key]);
+        }
+    }
+
     // Toggle class on an element
     function _toggleClass(element, name, state) {
         if(element){
@@ -271,34 +334,10 @@
 
     // Get percentage
     function _getPercentage(current, max) {
-        return Math.floor((current / max) * 100);
-    }
-
-    // Get click position relative to parent
-    // http://www.kirupa.com/html5/getting_mouse_click_position.htm
-    function _getClickPosition(event) {
-        var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget);
-
-        return {
-            x: event.clientX - parentPosition.x,
-            y: event.clientY - parentPosition.y
-        };
-    }
-    // Get element position
-    function _getPosition(element) {
-        var xPosition = 0;
-        var yPosition = 0;
-
-        while (element) {
-            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
-            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
-            element = element.offsetParent;
+        if(current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
+            return 0;
         }
-        
-        return { 
-            x: xPosition, 
-            y: yPosition 
-        };
+        return ((current / max) * 100).toFixed(2);
     }
 
     // Deep extend/merge two Objects
@@ -414,19 +453,43 @@
         player.container = container;
 
         // Captions functions
-        // Credits: http://paypal.github.io/accessible-html5-video-player/
+        // Seek the manual caption time and update UI
+        function _seekManualCaptions(time) {
+            // If it's not video, or we're using textTracks, bail.
+            if (player.usingTextTracks || player.type !== "video") {
+                return;
+            }
 
-        // For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.)
-        function _adjustManualCaptions() {
+            // Reset subcount
             player.subcount = 0;
-            while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) {
+
+            // Check time is a number, if not use currentTime
+            // IE has a bug where currentTime doesn't go to 0
+            // https://twitter.com/Sam_Potts/status/573715746506731521
+            time = typeof time === "number" ? time : player.media.currentTime;
+
+            while (_timecodeMax(player.captions[player.subcount][0]) < time.toFixed(1)) {
                 player.subcount++;
                 if (player.subcount > player.captions.length-1) {
                     player.subcount = player.captions.length-1;
                     break;
                 }
             }
+
+            // Check if the next caption is in the current time range
+            if (player.media.currentTime.toFixed(1) >= _timecodeMin(player.captions[player.subcount][0]) && 
+                player.media.currentTime.toFixed(1) <= _timecodeMax(player.captions[player.subcount][0])) {
+                    player.currentCaption = player.captions[player.subcount][1];
+
+                // Render the caption
+                player.captionsContainer.innerHTML = player.currentCaption;
+            }
+            else {
+                // Clear the caption
+                player.captionsContainer.innerHTML = "";
+            }
         }
+
         // Display captions container and button (for initialization)
         function _showCaptions() {
             _toggleClass(player.container, config.classes.captions.enabled, true);
@@ -436,6 +499,7 @@
                 player.buttons.captions.setAttribute("checked", "checked");
             }
         }
+
         // Utilities for caption time codes
         function _timecodeMin(tc) {
             var tcpair = [];
@@ -499,6 +563,18 @@
 
             // Inject into the container
             player.container.insertAdjacentHTML("beforeend", html);
+
+            // Setup tooltips
+            if(config.tooltips) {
+                var labels = _getElements(config.selectors.labels);
+
+                for (var i = labels.length - 1; i >= 0; i--) {
+                    var label = labels[i];
+
+                    _toggleClass(label, config.classes.hidden, false);
+                    _toggleClass(label, config.classes.tooltip, true);
+                }
+            }
         }
 
         // Find the UI controls and store references
@@ -508,6 +584,7 @@
 
                 // Buttons
                 player.buttons = {};
+                player.buttons.seek             = _getElement(config.selectors.buttons.seek);
                 player.buttons.play             = _getElement(config.selectors.buttons.play);
                 player.buttons.pause            = _getElement(config.selectors.buttons.pause);
                 player.buttons.restart          = _getElement(config.selectors.buttons.restart);
@@ -542,6 +619,7 @@
             }
             catch(e) {
                 _log("It looks like there's a problem with your controls html. Bailing.", true);
+
                 return false;
             }
         }
@@ -572,7 +650,7 @@
             player.media.removeAttribute("controls");
 
             // Set media type
-            player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio");
+            player.type = player.media.tagName.toLowerCase();
 
             // Add type class
             _toggleClass(player.container, config.classes[player.type], true);
@@ -580,6 +658,11 @@
             // If there's no autoplay attribute, assume the video is stopped and add state class
             _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
 
+            // Add iOS class
+            if(player.browser.ios) {
+                _toggleClass(player.container, "ios", true);
+            }
+
             // Inject the player wrapper
             if(player.type === "video") {
                 // Create the wrapper div
@@ -592,6 +675,11 @@
                 // Cache the container
                 player.videoContainer = wrapper;
             }
+
+            // Autoplay
+            if(player.media.getAttribute("autoplay") !== null) {
+                _play();
+            }
         }
 
         // Setup captions
@@ -604,9 +692,9 @@
                 player.captionsContainer = _getElement(config.selectors.captions);
 
                 // Determine if HTML5 textTracks is supported
-                player.isTextTracks = false;
+                player.usingTextTracks = false;
                 if (player.media.textTracks) {
-                    player.isTextTracks = true;
+                    player.usingTextTracks = true;
                 }
 
                 // Get URL of caption file if exists
@@ -650,20 +738,20 @@
                     _showCaptions(player);
 
                     // If IE 10/11 or Firefox 31+ or Safari 7+, don"t use native captioning (still doesn"t work although they claim it"s now supported)
-                    if ((player.browserName === "IE" && player.browserMajorVersion === 10) || 
-                            (player.browserName === "IE" && player.browserMajorVersion === 11) || 
-                            (player.browserName === "Firefox" && player.browserMajorVersion >= 31) || 
-                            (player.browserName === "Safari" && player.browserMajorVersion >= 7)) {
+                    if ((player.browser.name === "IE" && player.browser.version === 10) || 
+                            (player.browser.name === "IE" && player.browser.version === 11) || 
+                            (player.browser.name === "Firefox" && player.browser.version >= 31) || 
+                            (player.browser.name === "Safari" && player.browser.version >= 7)) {
                         // Debugging
                         _log("Detected IE 10/11 or Firefox 31+ or Safari 7+.");
 
                         // Set to false so skips to "manual" captioning
-                        player.isTextTracks = false;
+                        player.usingTextTracks = false;
                     }
 
                     // Rendering caption tracks
                     // Native support required - http://caniuse.com/webvtt
-                    if (player.isTextTracks) {
+                    if (player.usingTextTracks) {
                         _log("TextTracks supported.");
             
                         for (var y=0; y < tracks.length; y++) {
@@ -686,24 +774,8 @@
 
                         // Render captions from array at appropriate time
                         player.currentCaption = "";
-                        player.subcount = 0;
                         player.captions = [];
 
-                        _on(player.media, "timeupdate", function() {
-                            // Check if the next caption is in the current time range
-                            if (player.media.currentTime.toFixed(1) > _timecodeMin(player.captions[player.subcount][0]) && 
-                                player.media.currentTime.toFixed(1) < _timecodeMax(player.captions[player.subcount][0])) {
-                                    player.currentCaption = player.captions[player.subcount][1];
-                            }
-                            // Is there a next timecode?
-                            if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) && 
-                                player.subcount < (player.captions.length-1)) {
-                                    player.subcount++;
-                            }
-                            // Render the caption
-                            player.captionsContainer.innerHTML = player.currentCaption;
-                        });
-
                         if (captionSrc !== "") {
                             // Create XMLHttpRequest Object
                             var xhr = new XMLHttpRequest();
@@ -741,7 +813,7 @@
                     }
 
                     // If Safari 7+, removing track from DOM [see "turn off native caption rendering" above]
-                    if (player.browserName === "Safari" && player.browserMajorVersion >= 7) {
+                    if (player.browser.name === "Safari" && player.browser.version >= 7) {
                         _log("Safari 7+ detected; removing track from DOM.");
 
                         // Find all <track> elements
@@ -756,13 +828,6 @@
             }
         }
 
-        // Setup seeking
-        function _setupSeeking() {
-            // Update number of seconds in rewind and fast forward buttons
-            player.seekTime[0].innerHTML = config.seekTime;
-            player.seekTime[1].innerHTML = config.seekTime;
-        }
-
         // Setup fullscreen
         function _setupFullscreen() {
             if(player.type === "video" && config.fullscreen.enabled) {
@@ -791,39 +856,13 @@
             player.media.pause();
         }
 
-        // Restart playback
-        function _restart() {
-            // Move to beginning
-            player.media.currentTime = 0;
-
-            // Special handling for "manual" captions
-            if (!player.isTextTracks) {
-                player.subcount = 0;
-            }
-
-            // Play and ensure the play button is in correct state
-            _play();
-        }
-
         // Rewind
         function _rewind(seekTime) {
             // Use default if needed
             if(typeof seekTime !== "number") {
                 seekTime = config.seekTime;
             }
-
-            var targetTime = player.media.currentTime - seekTime;
-
-            if (targetTime < 0) {
-                player.media.currentTime = 0;
-            }
-            else {
-                player.media.currentTime = targetTime;
-            }
-            // Special handling for "manual" captions
-            if (!player.isTextTracks && player.type === "video") {
-                _adjustManualCaptions(player);
-            }
+            _seek(player.media.currentTime - seekTime);
         }
 
         // Fast forward
@@ -832,19 +871,41 @@
             if(typeof seekTime !== "number") {
                 seekTime = config.seekTime;
             }
+            _seek(player.media.currentTime + seekTime);
+        }
 
-            var targetTime = player.media.currentTime + seekTime;
+        // Seek to time
+        // The input parameter can be an event or a number
+        function _seek(input) {
+            var targetTime = 0;
 
-            if (targetTime > player.media.duration) {
-                player.media.currentTime = player.media.duration;
+            // Explicit position
+            if (typeof input === "number") {
+                targetTime = input;
             }
-            else {
-                player.media.currentTime = targetTime;
+            // Event
+            else if (typeof input === "object" && (input.type === "change" || input.type === "input")) {
+                // It's the seek slider
+                // Seek to the selected time
+                targetTime = ((input.target.value / input.target.max) * player.media.duration);
             }
+
+            // Normalise targetTime
+            if (targetTime < 0) {
+                targetTime = 0;
+            }
+            else if (targetTime > player.media.duration) {
+                targetTime = player.media.duration;
+            }
+
+            // Set the current time
+            player.media.currentTime = targetTime.toFixed(1);
+
+            // Logging
+            _log("Seeking to " + player.media.currentTime + " seconds");
+
             // Special handling for "manual" captions
-            if (!player.isTextTracks && player.type === "video") {
-                _adjustManualCaptions(player);
-            }
+            _seekManualCaptions(targetTime);
         }
 
         // Check playing state
@@ -908,7 +969,7 @@
             // Use default if needed
             if(typeof volume === "undefined") {
                 if(config.storage.enabled && _storage().supported) {
-                    volume = window.localStorage.plyr_volume || config.volume;
+                    volume = window.localStorage[config.storage.key] || config.volume;
                 }
                 else {
                     volume = config.volume;
@@ -962,39 +1023,67 @@
             _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted));
         }
 
+        // Check if media is loading
+        function _checkLoading(event) {
+            var loading = (event.type === "waiting");
+
+            // Clear timer
+            clearTimeout(player.loadingTimer);
+
+            // Timer to prevent flicker when seeking
+            player.loadingTimer = setTimeout(function() {
+                _toggleClass(player.container, config.classes.loading, loading);
+            }, (loading ? 250 : 0));
+        }
+
         // Update <progress> elements
         function _updateProgress(event) {
-            var progress, text, value = 0;
+            var progress    = player.progress.played.bar, 
+                text        = player.progress.played.text, 
+                value       = 0;
 
-            switch(event.type) {
-                // Video playing
-                case "timeupdate":
-                    progress    = player.progress.played.bar;
-                    text        = player.progress.played.text;
-                    value       = _getPercentage(player.media.currentTime, player.media.duration);
-                    break;
+            if(event) {
+                switch(event.type) {
+                    // Video playing
+                    case "timeupdate":
+                    case "seeking":
+                        value = _getPercentage(player.media.currentTime, player.media.duration);
 
-                // Check buffer status
-                case "playing":
-                case "progress":
-                    progress    = player.progress.buffer.bar;
-                    text        = player.progress.buffer.text;
-                    value       = (function() { 
-                                    var buffered = player.media.buffered;
+                        // Set seek range value only if it's a "natural" time event
+                        if(event.type == "timeupdate") {
+                            player.buttons.seek.value = value;
+                        }
             
-                                    if(buffered.length) {
-                                        return _getPercentage(buffered.end(0), player.media.duration);
-                                    }
+                        break;
 
-                                    return 0;                                   
-                                })();
-                    break;
+                    // Events from seek range
+                    case "change":
+                    case "input":
+                        value = event.target.value;
+                        break;
+
+
+                    // Check buffer status
+                    case "playing":
+                    case "progress":
+                        progress    = player.progress.buffer.bar;
+                        text        = player.progress.buffer.text;
+                        value       = (function() { 
+                                        var buffered = player.media.buffered;
+
+                                        if(buffered.length) {
+                                            return _getPercentage(buffered.end(0), player.media.duration);
+                                        }
+
+                                        return 0;                                   
+                                    })();
+                        break;
+                }
             }
 
-            if (progress && value > 0) {
-                progress.value = value;
-                text.innerHTML = value;
-            }
+            // Set values
+            progress.value = value;
+            text.innerHTML = value;
         }
 
         // Update the displayed play time
@@ -1010,6 +1099,92 @@
             player.duration.innerHTML = player.mins + ":" + player.secs;
         }
 
+        // Handle time change event
+        function _timeUpdate(event) {
+            // Duration
+            _updateTimeDisplay();
+
+            // Playing progress
+            _updateProgress(event);
+        }
+
+        // Remove <source> children and src attribute
+        function _removeSources() {
+            // Find child <source> elements
+            var sources = player.media.querySelectorAll("source");
+
+            // Remove each
+            for (var i = sources.length - 1; i >= 0; i--) {
+                _remove(sources[i]);
+            }
+
+            // Remove src attribute
+            player.media.removeAttribute("src");
+        }
+
+        // Inject a source
+        function _addSource(attributes) {
+            if(attributes.src) {
+                // Create a new <source>
+                var element = document.createElement("source");
+
+                // Set all passed attributes
+                _setAttributes(element, attributes);
+
+                // Inject the new source
+                _prependChild(player.media, element);
+            }
+        }
+
+        // Update source
+        // Sources are not checked for support so be careful
+        function _parseSource(sources) {
+            // Pause playback (webkit freaks out)
+            _pause();
+
+            // Restart
+            _seek();
+
+            // Update the UI
+            _checkPlaying();
+
+            // Remove current sources
+            _removeSources();
+
+            // If a single source is passed
+            // .source("path/to/video.mp4")
+            if(typeof sources === "string") {
+                player.media.setAttribute("src", sources);
+            }
+
+            // An array of source objects
+            // Check if a source exists, use that or set the "src" attribute?
+            // .source([{ src: "path/to/video.mp4", type: "video/mp4" },{ src: "path/to/video.webm", type: "video/webm" }])
+            else if (sources.constructor === Array) {
+                for (var index in sources) { 
+                    _addSource(sources[index]);
+                }
+            }
+
+            // Reset time display
+            _timeUpdate();
+
+            // Re-load sources
+            player.media.load();
+
+            // Play if autoplay attribute is present
+            if(player.media.getAttribute("autoplay") !== null) {
+                _play();
+            }
+        }
+
+        // Update poster
+        function _updatePoster(source) {
+            if(player.type === "video") {
+                player.media.setAttribute("poster", source);
+            }
+        }
+
         // Listen for events
         function _listeners() {
             // Play
@@ -1025,7 +1200,7 @@
             });
 
             // Restart
-            _on(player.buttons.restart, "click", _restart);
+            _on(player.buttons.restart, "click", _seek);
 
             // Rewind
             _on(player.buttons.rewind, "click", _rewind);
@@ -1057,7 +1232,8 @@
                         _play();
                     }
                     else if(player.media.ended) {
-                        _restart();
+                        _seek();
+                        _play();
                     }
                     else {
                         _pause();
@@ -1065,22 +1241,14 @@
                 });
             }
             
-            // Duration
-            _on(player.media, "timeupdate", _updateTimeDisplay);
+            // Time change on media
+            _on(player.media, "timeupdate seeking", _timeUpdate);
 
-            // Playing progress
-            _on(player.media, "timeupdate", _updateProgress);
+            // Update manual captions
+            _on(player.media, "timeupdate", _seekManualCaptions);
 
-            // Skip when clicking progress bar
-            _on(player.progress.played.bar, "click", function(event) {
-                player.pos = _getClickPosition(event).x / this.offsetWidth;
-                player.media.currentTime = player.pos * player.media.duration;
-                
-                // Special handling for "manual" captions
-                if (!player.isTextTracks && player.type === "video") {
-                    _adjustManualCaptions(player);
-                }
-            });
+            // Seek 
+            _on(player.buttons.seek, "change input", _seek);
 
             // Captions
             _on(player.buttons.captions, "click", function() { 
@@ -1106,6 +1274,9 @@
 
             // Handle native play/pause
             _on(player.media, "play pause", _checkPlaying);
+
+            // Loading
+            _on(player.media, "waiting canplay seeked", _checkLoading);
         }
 
         function _init() {
@@ -1113,16 +1284,14 @@
             fullscreen = _fullscreen();
 
             // Sniff 
-            player.browserInfo = _browserSniff();
-            player.browserName = player.browserInfo[0];
-            player.browserMajorVersion = player.browserInfo[1];
+            player.browser = _browserSniff();
 
             // Debug info
-            _log(player.browserName + " " + player.browserMajorVersion);
+            _log(player.browser.name + " " + player.browser.version);
 
             // If IE8, stop customization (use fallback)
             // If IE9, stop customization (use native controls)
-            if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) {
+            if (player.browser.name === "IE" && (player.browser.version === 8 || player.browser.version === 9) ) {
                 _log("Browser not suppported.", true);
                 return false;
             }
@@ -1153,9 +1322,6 @@
             // Setup fullscreen
             _setupFullscreen();
 
-            // Seeking
-            _setupSeeking();
-
             // Listeners
             _listeners();
         }
@@ -1166,12 +1332,16 @@
             media:              player.media,
             play:               _play,
             pause:              _pause,
-            restart:            _restart,
+            restart:            _seek,
             rewind:             _rewind,
             forward:            _forward,
+            seek:               _seek,
             setVolume:          _setVolume,
             toggleMute:         _toggleMute,
-            toggleCaptions:     _toggleCaptions
+            toggleCaptions:     _toggleCaptions,
+            source:             _parseSource,
+            poster:             _updatePoster,
+            support:            function(mimeType) { return _support(player, mimeType); }
         }
     }
 
@@ -1194,6 +1364,13 @@
             // Get the current element
             var element = elements[i];
 
+            // Disabled for <video> for iPhone
+            // Since it doesn't allow customisation
+            if (element.querySelectorAll("audio, video")[0].tagName.toLowerCase() === "video"
+                && /iPhone/i.test(navigator.userAgent)) {
+                continue;
+            }
+
             // Setup a player instance and add to the element
             if(typeof element.plyr === "undefined") { 
                 element.plyr = new Plyr(element);

src/less/plyr.less

@@ -5,434 +5,580 @@
 // Variables
 // -------------------------------
 // Colors
-@blue:          			#3498DB;
-@gray-dark: 				#343f4a;
-@gray: 						#565d64;
-@gray-light: 				#cbd0d3;
+@blue:                      #3498DB;
+@gray-dark:                 #343f4a;
+@gray:                      #565d64;
+@gray-light:                #cbd0d3;
 
 // Font sizes
-@font-size-small: 			14px;
-@font-size-base: 			16px;
+@font-size-small:           14px;
+@font-size-base:            16px;
 @font-size-large:           ceil((@font-size-base * 1.5)); 
 
 // Controls
-@control-spacing: 			10px;
-@controls-bg: 				@gray-dark;
-@control-bg-hover: 			@blue;
-@control-color: 			@gray-light;
-@control-color-inactive: 	@gray;
-@control-color-focus: 		#fff;
-@control-color-hover: 		#fff;
+@control-spacing:           10px;
+@controls-bg:               @gray-dark;
+@control-bg-hover:          @blue;
+@control-color:             @gray-light;
+@control-color-inactive:    @gray;
+@control-color-hover:       #fff;
+
+// Tooltips
+@tooltip-bg:                @controls-bg;
+@tooltip-color:             #fff;
+@tooltip-padding:           @control-spacing;   
+@tooltip-arrow-size:        5px;
+@tooltip-radius:            3px;
 
 // Progress
-@progress-bg: 				lighten(@gray, 10%);
-@progress-playing-bg: 		@blue;
-@progress-buffered-bg: 		@gray;
+@progress-bg:               lighten(@gray, 10%);
+@progress-playing-bg:       @blue;
+@progress-buffered-bg:      @gray;
+@progress-loading-size:     40px;
+@progress-loading-bg:       rgba(0,0,0, .15);
 
-// Range
-@range-track-height: 		6px;
-@range-track-bg: 			@gray;
-@range-thumb-height: 		(@range-track-height * 2);
-@range-thumb-width: 		(@range-track-height * 2);
-@range-thumb-bg: 			@control-color;
-@range-thumb-bg-focus: 		@control-bg-hover;
+// Volume
+@volume-track-height:       6px;
+@volume-track-bg:           @gray;
+@volume-thumb-height:       (@volume-track-height * 2);
+@volume-thumb-width:        (@volume-track-height * 2);
+@volume-thumb-bg:           @control-color;
+@volume-thumb-bg-focus:     @control-bg-hover;
 
 // Breakpoints
-@bp-control-split: 			560px; // When controls split into left/right
-@bp-captions-large: 		768px; // When captions jump to the larger font size
+@bp-control-split:          560px; // When controls split into left/right
+@bp-captions-large:         768px; // When captions jump to the larger font size
 
 // Utility classes & mixins
 // -------------------------------
 // Screen reader only
 .sr-only {
-	position: absolute !important;
-	clip: rect(1px, 1px, 1px, 1px);
-	padding: 0 !important;
-	border: 0 !important;
-	height: 1px !important;
-	width: 1px !important;
-	overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0 !important;
+    border: 0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
 }
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 .clearfix() {
-	zoom: 1;
-	&:before, 
-	&:after { content: ""; display: table; }
-	&:after { clear: both; }
+    zoom: 1;
+    &:before, 
+    &:after { content: ""; display: table; }
+    &:after { clear: both; }
 }
-
 // Tab focus styles
 .tab-focus() {
-	outline: thin dotted #000;
-	outline-offset: 1px;
+    outline: thin dotted #000;
+    outline-offset: 0;
 }
 
-// Range styling
+// Animation
 // ---------------------------------------
-.range-thumb() {
-	height: @range-thumb-height;
-	width: @range-thumb-width;
-	background: @range-thumb-bg;
-	border: 0;
-	border-radius: (@range-thumb-height / 2);
-	transition: background .3s ease;
-	cursor: ew-resize;
+@keyframes progress {
+    to { background-position: @progress-loading-size 0; }
 }
-.range-track() {
-	height: @range-track-height;
-	background: @range-track-bg;
-	border: 0;
-	border-radius: (@range-track-height / 2);
+
+// <input type="range"> styling
+// ---------------------------------------
+.volume-thumb() {
+    height: @volume-thumb-height;
+    width: @volume-thumb-width;
+    background: @volume-thumb-bg;
+    border: 0;
+    border-radius: (@volume-thumb-height / 2);
+    transition: background .3s ease;
+    cursor: ew-resize;
+}
+.volume-track() {
+    height: @volume-track-height;
+    background: @volume-track-bg;
+    border: 0;
+    border-radius: (@volume-track-height / 2);
+}
+.seek-thumb() {
+    background: transparent;
+    border: 0;
+    width: (@control-spacing * 2);
+    height: @control-spacing;
+}
+.seek-track() {
+    background: none;
+    border: 0;
 }
 
 // Font smoothing
 // ---------------------------------------
 .font-smoothing(@mode: on) when (@mode = on) {
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
 }
 .font-smoothing(@mode: on) when (@mode = off) {
-	-moz-osx-font-smoothing: auto;
-	-webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 
 // Styles
 // -------------------------------
 // Base 
 .player {
-	position: relative;
-	max-width: 100%;
-	min-width: 290px;
-	overflow: hidden; // For the controls
+    position: relative;
+    max-width: 100%;
+    min-width: 290px;
 
-	// border-box everything
-	// http://paulirish.com/2012/box-sizing-border-box-ftw/
-	&,
-	*,
-	*::after,
-	*::before { 
-		box-sizing: border-box; 
-	}
+    // border-box everything
+    // http://paulirish.com/2012/box-sizing-border-box-ftw/
+    &,
+    *,
+    *::after,
+    *::before { 
+        box-sizing: border-box; 
+    }
 
-	// For video
-	&-video-wrapper {
-		position: relative;
-	}
-	video {
-		width: 100%;
-		height: auto;
-		vertical-align: middle;
-	}
+    // For video
+    &-video-wrapper {
+        position: relative;
+    }
+    video {
+        width: 100%;
+        height: auto;
+        vertical-align: middle;
+    }
 
-	// Captions
-	&-captions {
-		display: none;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		padding: 20px;
-		min-height: 2.5em;
-		color: #fff;
-		font-size: @font-size-base;
-		font-weight: 600;
-		text-shadow: 
-		-1px -1px 0 @gray, 
-		1px -1px 0 @gray, 
-		-1px 1px 0 @gray, 
-		1px 1px 0 @gray;
-		text-align: center;
-		.font-smoothing();
+    // Captions
+    &-captions {
+        display: none;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 20px;
+        min-height: 2.5em;
+        color: #fff;
+        font-size: @font-size-base;
+        font-weight: 600;
+        text-shadow: 
+        -1px -1px 0 @gray, 
+        1px -1px 0 @gray, 
+        -1px 1px 0 @gray, 
+        1px 1px 0 @gray;
+        text-align: center;
+        .font-smoothing();
 
-		@media (min-width: @bp-captions-large) {
-			font-size: @font-size-large;
-		}
-	}
-	&.captions-active &-captions {
-		display: block;
-	}
+        @media (min-width: @bp-captions-large) {
+            font-size: @font-size-large;
+        }
+    }
+    &.captions-active &-captions {
+        display: block;
+    }
 
-	// Player controls
-	&-controls {
-		.clearfix();
-		.font-smoothing();
-		position: relative;
-		padding: (@control-spacing * 2) @control-spacing @control-spacing;
-		background: @controls-bg;
-		line-height: 1;
-		text-align: center;
+    // Player controls
+    &-controls {
+        .clearfix();
+        .font-smoothing();
+        position: relative;
+        padding: (@control-spacing * 2) @control-spacing @control-spacing;
+        background: @controls-bg;
+        line-height: 1;
+        text-align: center;
 
-		// Layout
-		&-sound {
-			display: block;
-			margin: @control-spacing auto 0;
-		}
-		@media (min-width: @bp-control-split) {
-			&-playback {
-				float: left;
-			}
-			&-sound {
-				float: right;
-				margin-top: 0;
-			}
-		}
+        // Layout
+        &-right {
+            display: block;
+            margin: @control-spacing auto 0;
+        }
+        @media (min-width: @bp-control-split) {
+            &-left {
+                float: left;
+            }
+            &-right {
+                float: right;
+                margin-top: 0;
+            }
+        }
         
-		input + label, 
-		button {
-			display: inline-block;
-			vertical-align: middle;
-			margin: 0 2px;
-			padding: (@control-spacing / 2) @control-spacing;
+        input + label, 
+        button {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0 2px;
+            padding: (@control-spacing / 2) @control-spacing;
             
-			transition: background .3s ease;
-			border-radius: 3px;
-			cursor: pointer;
+            transition: background .3s ease;
+            border-radius: 3px;
+            cursor: pointer;
 
-			svg {
-				width: 18px;
-				height: 18px;
-				display: block;
-				fill: currentColor;
-				transition: fill .3s ease;
-			}
-		}
-		input + label,
-		input.inverted:checked + label {
-			color: @control-color-inactive;
-		}
-		button, 
-		input.inverted + label,
-		input:checked + label {
-			color: @control-color;
-		}
-		button {
-			border: 0;
-			background: transparent;
-			overflow: hidden;
-		}
-		input:focus + label,
-		button:focus {
-			.tab-focus();
-			color: @control-color-focus;
-		}
-		button:hover,
-		input + label:hover {
-			background: @control-bg-hover;
-			color: @control-color-hover;
-		}
-		.icon-exit-fullscreen,
-		.icon-muted {
-			display: none;
-		}
-		.player-time {
-			display: inline-block;
-			vertical-align: middle;
-			margin-left: @control-spacing;
-			color: @control-color;
-			font-weight: 600;
-			font-size: @font-size-small;
-			.font-smoothing();
-		}
-	}
+            svg {
+                width: 18px;
+                height: 18px;
+                display: block;
+                fill: currentColor;
+                transition: fill .3s ease;
+            }
+        }
+        input + label,
+        .inverted:checked + label {
+            color: @control-color-inactive;
+        }
+        button, 
+        .inverted + label,
+        input:checked + label {
+            color: @control-color;
+        }
+        button {
+            border: 0;
+            background: transparent;
+            overflow: hidden;
+        }
         
-	// Player progress
-	// <progress> element
-	&-progress {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		width: 100%;
-		height: @control-spacing;
-		background: @progress-bg;
+        // Specificity for overriding .inverted
+        button:focus,
+        button:hover,
+        [type="checkbox"]:focus + label,
+        [type="checkbox"] + label:hover {
+            background: @control-bg-hover;
+            color: @control-color-hover;
+        }
+        button:focus,
+        input:focus + label {
+            outline: 0;
+        }
+        .icon-exit-fullscreen,
+        .icon-muted,
+        .icon-captions-on {
+            display: none;
+        }
+        .player-time {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: @control-spacing;
+            color: @control-color;
+            font-weight: 600;
+            font-size: @font-size-small;
+            .font-smoothing();
+        }
+    }
 
-		&-buffer,
-		&-played {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			margin: 0;
-			vertical-align: top;
+    // Tooltips
+    &-tooltip {
+        visibility: hidden;
+        position: absolute;
+        z-index: 2;
+        bottom: 100%;
+        margin-bottom: @tooltip-padding;
+        padding: @tooltip-padding (@tooltip-padding * 1.5);
 
-			&[value] {
-				-webkit-appearance: none;
-				border: none;
-				background: transparent;
+        opacity: 0;
+        background: @tooltip-bg;
+        border-radius: @tooltip-radius;
+        color: @tooltip-color;
+        font-size: @font-size-small;
+        line-height: 1.5;
+        font-weight: 600;
 
-				&::-webkit-progress-bar {
-					background: transparent;
-				}
+        transform: translate(-50%, (@tooltip-padding * 3));
+        transition: transform .2s .2s ease, opacity .2s .2s ease;
 
-				// Inherit from currentColor;
-				&::-webkit-progress-value {
-					background: currentColor;
-				}
-				&::-moz-progress-bar {
-					background: currentColor;
-				}
-			}
-		}
-		&-played {
-			z-index: 2;
-		}
-		&-played[value] {
-			cursor: pointer;
-			color: @progress-playing-bg;
-		}
-		&-buffer[value] {
-			color: @progress-buffered-bg;
-		}
-	}
+        &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 50%;
+            bottom: -@tooltip-arrow-size;
+            margin-left: -@tooltip-arrow-size;
+            width: 0;
+            height: 0;
+            transition: inherit;
+            border-style: solid;
+            border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size;
+            border-color: @controls-bg transparent transparent;
+        }
+    }
+    label:hover .player-tooltip,
+    input:focus + label .player-tooltip, 
+    button:hover .player-tooltip,
+    button:focus .player-tooltip {
+        visibility: visible;
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
+    label:hover .player-tooltip,
+    button:hover .player-tooltip {
+        z-index: 3;
+    }
 
-	// States
-	&-controls [data-player='pause'],
-	&.playing .player-controls [data-player='play'] {
-		display: none;
-	}
-	&.playing .player-controls [data-player='pause'] {
-		display: inline-block;
-	}
+    // Player progress
+    // <progress> element
+    &-progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: @control-spacing;
+        background: @progress-bg;
 
-	// Muted
-	&.muted .player-controls .icon-muted {
-		display: block;
+        &-buffer[value],
+        &-played[value],
+        &-seek[type=range] {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: @control-spacing;
+            margin: 0;
+            padding: 0;
+            vertical-align: top;
 
-		& + svg {
-			display: none;
-		}
-	}
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            border: none;
+            background: transparent;
+        }
+        &-buffer[value],
+        &-played[value] {   
+            &::-webkit-progress-bar {
+                background: transparent;
+            }
 
-	// Volume control
-	// <input[type='range']> element
-	// Specificity is for bootstrap compatibility
-	&-volume[type=range] {
-		display: inline-block;
-		vertical-align: middle;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		width: 100px;
-		margin: 0 @control-spacing 0 0;
-		padding: 0;		
-		cursor: pointer;
-		background: none;
+            // Inherit from currentColor;
+            &::-webkit-progress-value {
+                background: currentColor;
+            }
+            &::-moz-progress-bar {
+                background: currentColor;
+            }
+        }
+        &-played[value] {
+            z-index: 2;
+            color: @progress-playing-bg;
+        }
+        &-buffer[value] {
+            color: @progress-buffered-bg;
+        }
 
-		// Webkit
-		&::-webkit-slider-runnable-track {
-			.range-track();
-		}
-		&::-webkit-slider-thumb {
-			-webkit-appearance: none;
-			margin-top: -((@range-thumb-height - @range-track-height) / 2);
-			.range-thumb();
-		}
+        // Seek control
+        // <input[type='range']> element
+        // Specificity is for bootstrap compatibility
+        &-seek[type=range] {
+            z-index: 4;
+            cursor: pointer;
+            outline: 0;
 
-		// Mozilla
-		&::-moz-range-track {
-			.range-track();
-		}
-		&::-moz-range-thumb {
-			.range-thumb();
-		}
+            // Webkit
+            &::-webkit-slider-runnable-track {
+                .seek-track();
+            }
+            &::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                .seek-thumb();
+            }
 
-		// Microsoft
-		&::-ms-track {
-			height: @range-track-height;
-			background: transparent;
-			border-color: transparent;
-			border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
-			color: transparent;
-		}
-		&::-ms-fill-lower,
-		&::-ms-fill-upper {
-			.range-track();
-		}
-		&::-ms-thumb {
-			.range-thumb();
-		}
+            // Mozilla
+            &::-moz-range-track {
+                .seek-track();
+            }
+            &::-moz-range-thumb {
+                -moz-appearance: none;
+                .seek-thumb();
+            }
             
-		&:focus {
-			outline: 0;
+            // Microsoft
+            &::-ms-track {
+                color: transparent;
+                .seek-track();
+            }
+            &::-ms-fill-lower,
+            &::-ms-fill-upper {
+                .seek-track();
+            }
+            &::-ms-thumb {
+                .seek-thumb();
+            }
 
-			&::-webkit-slider-thumb {
-				background: @range-thumb-bg-focus;
-			}
-			&::-moz-range-thumb {
-				background: @range-thumb-bg-focus;
-			}
-			&::-ms-thumb {
-				background: @range-thumb-bg-focus;
-			}
-		}
-	}
+            &:focus {
+                outline: 0;
+            }
+            &::-moz-focus-outer {
+                border: 0;
+            }
+        }
+    }
 
-	// Full screen mode
-	&-fullscreen,
-	&.fullscreen-active {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		height: 100%;
-		width: 100%;
-		z-index: 10000000;
-		background: #000;
+    // Loading state
+    &.loading .player-progress-buffer {
+        animation: progress 1s linear infinite;
+        background-size: @progress-loading-size @progress-loading-size;
+        background-repeat: repeat-x;
+        background-color: @progress-buffered-bg;
+        background-image: linear-gradient(
+            -45deg, 
+            @progress-loading-bg 25%, 
+            transparent 25%, 
+            transparent 50%, 
+            @progress-loading-bg 50%, 
+            @progress-loading-bg 75%,
+            transparent 75%, 
+            transparent);
+        color: transparent;
+    }
 
-		.player-video-wrapper {
-			height: 100%;
-			width: 100%;
+    // States
+    &-controls [data-player='pause'],
+    &.playing .player-controls [data-player='play'] {
+        display: none;
+    }
+    &.playing .player-controls [data-player='pause'] {
+        display: inline-block;
+    }
 
-			video {
-				height: 100%;
-			}
-			.player-captions {
-				top: auto;
-				bottom: 90px;
+    // Volume control
+    // <input[type='range']> element
+    // Specificity is for bootstrap compatibility
+    &-volume[type=range] {
+        display: inline-block;
+        vertical-align: middle;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        width: 100px;
+        margin: 0 @control-spacing 0 0;
+        padding: 0;     
+        cursor: pointer;
+        background: none;
         
-				@media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) {
-					bottom: 60px;
-				}
-				@media (min-width: @bp-captions-large) {
-					bottom: 80px;
-				}
-			}
-		}
-		.player-controls {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-		}
-	}
+        // Webkit
+        &::-webkit-slider-runnable-track {
+            .volume-track();
+        }
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
+            .volume-thumb();
+        }
 
-	// When true full screen, show exit fullscreen icon
-	&.fullscreen-active .icon-exit-fullscreen {
-		display: block;
+        // Mozilla
+        &::-moz-range-track {
+            .volume-track();
+        }
+        &::-moz-range-thumb {
+            .volume-thumb();
+        }
         
-		& + svg {
-			display: none;
-		}
-	}
+        // Microsoft
+        &::-ms-track {
+            height: @volume-track-height;
+            background: transparent;
+            border-color: transparent;
+            border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0;
+            color: transparent;
+        }
+        &::-ms-fill-lower,
+        &::-ms-fill-upper {
+            .volume-track();
+        }
+        &::-ms-thumb {
+            .volume-thumb();
+        }
 
-	// Some options are hidden by default
-	[data-player='captions'],
-	[data-player='captions'] + label,
-	[data-player='fullscreen'],
-	[data-player='fullscreen'] + label {
-		display: none;
-	}
-	&.captions-enabled [data-player='captions'],
-	&.captions-enabled [data-player='captions'] + label,
-	&.fullscreen-enabled [data-player='fullscreen'],
-	&.fullscreen-enabled [data-player='fullscreen'] + label {
-		display: inline-block;
-	}
+        &:focus {
+            outline: 0;
 
-	// Full browser view hides toggle
-	&-fullscreen [data-player='fullscreen'],
-	&-fullscreen [data-player='fullscreen'] + label {
-		display: none !important;
-	}
+            &::-webkit-slider-thumb {
+                background: @volume-thumb-bg-focus;
+            }
+            &::-moz-range-thumb {
+                background: @volume-thumb-bg-focus;
+            }
+            &::-ms-thumb {
+                background: @volume-thumb-bg-focus;
+            }
+        }
+    }
+
+    // Hide sound controls on iOS
+    // It's not supported to change volume using JavaScript:
+    // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
+    &.ios &-volume,
+    &.ios [data-player='mute'],
+    &.ios [data-player='mute'] + label,
+    &-audio.ios &-controls-right {
+        display: none;
+    }
+    // Center buttons so it looks less odd
+    &-audio.ios &-controls-left {
+        float: none;
+    }
+
+    // Full screen mode
+    &-fullscreen,
+    &.fullscreen-active {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 10000000;
+        background: #000;
+
+        .player-video-wrapper {
+            height: 100%;
+            width: 100%;
+
+            video {
+                height: 100%;
+            }
+            .player-captions {
+                top: auto;
+                bottom: 90px;
+
+                @media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) {
+                    bottom: 60px;
+                }
+                @media (min-width: @bp-captions-large) {
+                    bottom: 80px;
+                }
+            }
+        }
+        .player-controls {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    // Change icons on state change
+    &.fullscreen-active .icon-exit-fullscreen,
+    &.muted .player-controls .icon-muted,
+    &.captions-active .player-controls .icon-captions-on {
+        display: block;
+
+        & + svg {
+            display: none;
+        }
+    }
+
+    // Some options are hidden by default
+    [data-player='captions'],
+    [data-player='captions'] + label,
+    [data-player='fullscreen'],
+    [data-player='fullscreen'] + label {
+        display: none;
+    }
+    &.captions-enabled [data-player='captions'],
+    &.captions-enabled [data-player='captions'] + label,
+    &.fullscreen-enabled [data-player='fullscreen'],
+    &.fullscreen-enabled [data-player='fullscreen'] + label {
+        display: inline-block;
+    }
+
+    // Full browser view hides toggle
+    &-fullscreen [data-player='fullscreen'],
+    &-fullscreen [data-player='fullscreen'] + label {
+        display: none !important;
+    }
 }

src/sass/plyr.scss

@@ -5,439 +5,588 @@
 // Variables
 // -------------------------------
 // Colors
-$blue:          			#3498DB;
-$gray-dark: 				#343f4a;
-$gray: 						#565d64;
-$gray-light: 				#cbd0d3;
+$blue:                    #3498DB;
+$gray-dark:               #343f4a;
+$gray:                    #565d64;
+$gray-light:              #cbd0d3;
 
 // Font sizes
-$font-size-small: 			14px;
-$font-size-base: 			16px;
-$font-size-large:           ceil(($font-size-base * 1.5));
+$font-size-small:         14px;
+$font-size-base:          16px;
+$font-size-large:         ceil(($font-size-base * 1.5));
 
 // Controls
-$control-spacing: 			10px;
-$controls-bg: 				$gray-dark;
-$control-bg-hover: 			$blue;
-$control-color: 			$gray-light;
-$control-color-inactive: 	$gray;
-$control-color-focus: 		#fff;
-$control-color-hover: 		#fff;
+$control-spacing:         10px;
+$controls-bg:             $gray-dark;
+$control-bg-hover:        $blue;
+$control-color:           $gray-light;
+$control-color-inactive:  $gray;
+$control-color-hover:     #fff;
+
+// Tooltips
+$tooltip-bg:              $controls-bg;
+$tooltip-color:           #fff;
+$tooltip-padding:         $control-spacing;
+$tooltip-arrow-size:      5px;
+$tooltip-radius:          3px;
 
 // Progress
-$progress-bg: 				lighten($gray, 10%);
-$progress-playing-bg: 		$blue;
-$progress-buffered-bg: 		$gray;
+$progress-bg:             lighten($gray, 10%);
+$progress-playing-bg:     $blue;
+$progress-buffered-bg:    $gray;
+$progress-loading-size:   40px;
+$progress-loading-bg:     rgba(0,0,0, .15);
 
-// Range
-$range-track-height: 		6px;
-$range-track-bg: 			$gray;
-$range-thumb-height: 		($range-track-height * 2);
-$range-thumb-width: 		($range-track-height * 2);
-$range-thumb-bg: 			$control-color;
-$range-thumb-bg-focus: 		$control-bg-hover;
+// Volume
+$volume-track-height:     6px;
+$volume-track-bg:         $gray;
+$volume-thumb-height:     ($volume-track-height * 2);
+$volume-thumb-width:      ($volume-track-height * 2);
+$volume-thumb-bg:         $control-color;
+$volume-thumb-bg-focus:   $control-bg-hover;
 
 // Breakpoints
-$bp-control-split: 			560px; // When controls split into left/right
-$bp-captions-large: 		768px; // When captions jump to the larger font size
+$bp-control-split:        560px; // When controls split into left/right
+$bp-captions-large:       768px; // When captions jump to the larger font size
 
 // Utility classes & mixins
 // -------------------------------
 // Screen reader only
 .sr-only {
-	position: absolute !important;
-	clip: rect(1px, 1px, 1px, 1px);
-	padding: 0 !important;
-	border: 0 !important;
-	height: 1px !important;
-	width: 1px !important;
-	overflow: hidden;
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0 !important;
+    border: 0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
 }
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 @mixin clearfix()
 {
-	zoom: 1;
-	&:before,
-	&:after { content: ""; display: table; }
-	&:after { clear: both; }
+    zoom: 1;
+    &:before,
+    &:after { content: ""; display: table; }
+    &:after { clear: both; }
 }
-
 // Tab focus styles
 @mixin tab-focus()
 {
-	outline: thin dotted #000;
-	outline-offset: 1px;
+    outline: thin dotted #000;
+    outline-offset: 0;
 }
 
-// Range styling
+// Animation
 // ---------------------------------------
-@mixin range-thumb()
-{
-	height: $range-thumb-height;
-	width: $range-thumb-width;
-	background: $range-thumb-bg;
-	border: 0;
-	border-radius: ($range-thumb-height / 2);
-	transition: background .3s ease;
-	cursor: ew-resize;
+@keyframes progress {
+    to { background-position: $progress-loading-size 0; }
 }
-@mixin range-track()
+
+// <input type="range"> styling
+// ---------------------------------------
+@mixin volume-thumb()
 {
-	height: $range-track-height;
-	background: $range-track-bg;
-	border: 0;
-	border-radius: ($range-track-height / 2);
+    height: $volume-thumb-height;
+    width: $volume-thumb-width;
+    background: $volume-thumb-bg;
+    border: 0;
+    border-radius: ($volume-thumb-height / 2);
+    transition: background .3s ease;
+    cursor: ew-resize;
+}
+@mixin volume-track()
+{
+    height: $volume-track-height;
+    background: $volume-track-bg;
+    border: 0;
+    border-radius: ($volume-track-height / 2);
+}
+@mixin seek-thumb()
+{
+    background: transparent;
+    border: 0;
+    width: ($control-spacing * 2);
+    height: $control-spacing;
+}
+@mixin seek-track()
+{
+    background: none;
+    border: 0;
 }
 
 // Font smoothing
 // ---------------------------------------
-@mixin font-smoothing($mode: on) when ($mode = on)
+@mixin font-smoothing($mode: on)
 {
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-}
-@mixin font-smoothing($mode: on) when ($mode = off)
-{
-	-moz-osx-font-smoothing: auto;
-	-webkit-font-smoothing: subpixel-antialiased;
+    @if $mode == 'on' {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    } @else if $mode == 'off' {
+        -moz-osx-font-smoothing: auto;
+        -webkit-font-smoothing: subpixel-antialiased;
+    }
 }
 
 // Styles
 // -------------------------------
 // Base
 .player {
-	position: relative;
-	max-width: 100%;
-	min-width: 290px;
-	overflow: hidden; // For the controls
+    position: relative;
+    max-width: 100%;
+    min-width: 290px;
 
-	// border-box everything
-	// http://paulirish.com/2012/box-sizing-border-box-ftw/
-	&,
-	*,
-	*::after,
-	*::before {
-		box-sizing: border-box;
-	}
+    // border-box everything
+    // http://paulirish.com/2012/box-sizing-border-box-ftw/
+    &,
+    *,
+    *::after,
+    *::before {
+        box-sizing: border-box;
+    }
 
-	// For video
-	&-video-wrapper {
-		position: relative;
-	}
-	video {
-		width: 100%;
-		height: auto;
-		vertical-align: middle;
-	}
+    // For video
+    &-video-wrapper {
+        position: relative;
+    }
+    video {
+        width: 100%;
+        height: auto;
+        vertical-align: middle;
+    }
 
-	// Captions
-	&-captions {
-		display: none;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		padding: 20px;
-		min-height: 2.5em;
-		color: #fff;
-		font-size: $font-size-base;
-		font-weight: 600;
-		text-shadow:
-		-1px -1px 0 $gray,
-		1px -1px 0 $gray,
-		-1px 1px 0 $gray,
-		1px 1px 0 $gray;
-		text-align: center;
-		@include font-smoothing();
+    // Captions
+    &-captions {
+        display: none;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 20px;
+        min-height: 2.5em;
+        color: #fff;
+        font-size: $font-size-base;
+        font-weight: 600;
+        text-shadow:
+        -1px -1px 0 $gray,
+        1px -1px 0 $gray,
+        -1px 1px 0 $gray,
+        1px 1px 0 $gray;
+        text-align: center;
+        @include font-smoothing();
 
-		@media (min-width: $bp-captions-large) {
-			font-size: $font-size-large;
-		}
-	}
-	&.captions-active &-captions {
-		display: block;
-	}
+        @media (min-width: $bp-captions-large) {
+            font-size: $font-size-large;
+        }
+    }
+    &.captions-active &-captions {
+        display: block;
+    }
 
-	// Player controls
-	&-controls {
-		@include clearfix();
-		@include font-smoothing();
-		position: relative;
-		padding: ($control-spacing * 2) $control-spacing $control-spacing;
-		background: $controls-bg;
-		line-height: 1;
-		text-align: center;
+    // Player controls
+    &-controls {
+        @include clearfix();
+        @include font-smoothing();
+        position: relative;
+        padding: ($control-spacing * 2) $control-spacing $control-spacing;
+        background: $controls-bg;
+        line-height: 1;
+        text-align: center;
 
-		// Layout
-		&-sound {
-			display: block;
-			margin: $control-spacing auto 0;
-		}
-		@media (min-width: $bp-control-split) {
-			&-playback {
-				float: left;
-			}
-			&-sound {
-				float: right;
-				margin-top: 0;
-			}
-		}
+        // Layout
+        &-right {
+            display: block;
+            margin: $control-spacing auto 0;
+        }
+        @media (min-width: $bp-control-split) {
+            &-left {
+                float: left;
+            }
+            &-right {
+                float: right;
+                margin-top: 0;
+            }
+        }
 
-		input + label,
-		button {
-			display: inline-block;
-			vertical-align: middle;
-			margin: 0 2px;
-			padding: ($control-spacing / 2) $control-spacing;
+        input + label,
+        button {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0 2px;
+            padding: ($control-spacing / 2) $control-spacing;
 
-			transition: background .3s ease;
-			border-radius: 3px;
-			cursor: pointer;
+            transition: background .3s ease;
+            border-radius: 3px;
+            cursor: pointer;
 
-			svg {
-				width: 18px;
-				height: 18px;
-				display: block;
-				fill: currentColor;
-				transition: fill .3s ease;
-			}
-		}
-		input + label,
-		input.inverted:checked + label {
-			color: $control-color-inactive;
-		}
-		button,
-		input.inverted + label,
-		input:checked + label {
-			color: $control-color;
-		}
-		button {
-			border: 0;
-			background: transparent;
-			overflow: hidden;
-		}
-		input:focus + label,
-		button:focus {
-			@include tab-focus();
-			color: $control-color-focus;
-		}
-		button:hover,
-		input + label:hover {
-			background: $control-bg-hover;
-			color: $control-color-hover;
-		}
-		.icon-exit-fullscreen,
-		.icon-muted {
-			display: none;
-		}
-		.player-time {
-			display: inline-block;
-			vertical-align: middle;
-			margin-left: $control-spacing;
-			color: $control-color;
-			font-weight: 600;
-			font-size: $font-size-small;
-			@include font-smoothing();
-		}
-	}
+            svg {
+                width: 18px;
+                height: 18px;
+                display: block;
+                fill: currentColor;
+                transition: fill .3s ease;
+            }
+        }
+        input + label,
+        .inverted:checked + label {
+            color: $control-color-inactive;
+        }
+        button,
+        .inverted + label,
+        input:checked + label {
+            color: $control-color;
+        }
+        button {
+            border: 0;
+            background: transparent;
+            overflow: hidden;
+        }
 
-	// Player progress
-	// <progress> element
-	&-progress {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		width: 100%;
-		height: $control-spacing;
-		background: $progress-bg;
+        // Specificity for overriding .inverted
+        button:focus,
+        button:hover,
+        [type="checkbox"]:focus + label,
+        [type="checkbox"] + label:hover {
+            background: $control-bg-hover;
+            color: $control-color-hover;
+        }
+        button:focus,
+        input:focus + label {
+            outline: 0;
+        }
+        .icon-exit-fullscreen,
+        .icon-muted,
+        .icon-captions-on {
+            display: none;
+        }
+        .player-time {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: $control-spacing;
+            color: $control-color;
+            font-weight: 600;
+            font-size: $font-size-small;
+            @include font-smoothing();
+        }
+    }
 
-		&-buffer,
-		&-played {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			margin: 0;
-			vertical-align: top;
+    // Tooltips
+    &-tooltip {
+        visibility: hidden;
+        position: absolute;
+        z-index: 2;
+        bottom: 100%;
+        margin-bottom: $tooltip-padding;
+        padding: $tooltip-padding ($tooltip-padding * 1.5);
 
-			&[value] {
-				-webkit-appearance: none;
-				border: none;
-				background: transparent;
+                opacity: 0;
+        background: $tooltip-bg;
+        border-radius: $tooltip-radius;
+        color: $tooltip-color;
+        font-size: $font-size-small;
+        line-height: 1.5;
+        font-weight: 600;
 
-				&::-webkit-progress-bar {
-					background: transparent;
-				}
+        transform: translate(-50%, ($tooltip-padding * 3));
+                transition: transform .2s .2s ease, opacity .2s .2s ease;
 
-				// Inherit from currentColor;
-				&::-webkit-progress-value {
-					background: currentColor;
-				}
-				&::-moz-progress-bar {
-					background: currentColor;
-				}
-			}
-		}
-		&-played {
-			z-index: 2;
-		}
-		&-played[value] {
-			cursor: pointer;
-			color: $progress-playing-bg;
-		}
-		&-buffer[value] {
-			color: $progress-buffered-bg;
-		}
-	}
+        &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 50%;
+            bottom: -$tooltip-arrow-size;
+            margin-left: -$tooltip-arrow-size;
+            width: 0;
+            height: 0;
+            transition: inherit;
+            border-style: solid;
+            border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size;
+            border-color: $controls-bg transparent transparent;
+        }
+    }
+    label:hover .player-tooltip,
+    input:focus + label .player-tooltip,
+    button:hover .player-tooltip,
+    button:focus .player-tooltip {
+        visibility: visible;
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
+    label:hover .player-tooltip,
+    button:hover .player-tooltip {
+        z-index: 3;
+    }
 
-	// States
-	&-controls [data-player='pause'],
-	&.playing .player-controls [data-player='play'] {
-		display: none;
-	}
-	&.playing .player-controls [data-player='pause'] {
-		display: inline-block;
-	}
+    // Player progress
+    // <progress> element
+    &-progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: $control-spacing;
+        background: $progress-bg;
 
-	// Muted
-	&.muted .player-controls .icon-muted {
-		display: block;
+        &-buffer[value],
+        &-played[value],
+        &-seek[type=range] {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: $control-spacing;
+            margin: 0;
+            padding: 0;
+            vertical-align: top;
 
-		& + svg {
-			display: none;
-		}
-	}
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            border: none;
+            background: transparent;
+        }
+        &-buffer[value],
+        &-played[value] {
+            &::-webkit-progress-bar {
+                background: transparent;
+            }
 
-	// Volume control
-	// <input[type='range']> element
-	// Specificity is for bootstrap compatibility
-	&-volume[type=range] {
-		vertical-align: middle;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		width: 100px;
-		margin: 0 $control-spacing 0 0;
-		padding: 0;
-		cursor: pointer;
-		background: none;
+            // Inherit from currentColor;
+            &::-webkit-progress-value {
+                background: currentColor;
+            }
+            &::-moz-progress-bar {
+                background: currentColor;
+            }
+        }
+        &-played[value] {
+            z-index: 2;
+            color: $progress-playing-bg;
+        }
+        &-buffer[value] {
+            color: $progress-buffered-bg;
+        }
 
-		// Webkit
-		&::-webkit-slider-runnable-track {
-			@include range-track();
-		}
-		&::-webkit-slider-thumb {
-			-webkit-appearance: none;
-			margin-top: -(($range-thumb-height - $range-track-height) / 2);
-			@include range-thumb();
-		}
+        // Seek control
+        // <input[type='range']> element
+        // Specificity is for bootstrap compatibility
+        &-seek[type=range] {
+            z-index: 4;
+            cursor: pointer;
+            outline: 0;
 
-		// Mozilla
-		&::-moz-range-track {
-			@include range-track();
-		}
-		&::-moz-range-thumb {
-			@include range-thumb();
-		}
+            // Webkit
+            &::-webkit-slider-runnable-track {
+                @include seek-track();
+            }
+            &::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                @include seek-thumb();
+            }
 
-		// Microsoft
-		&::-ms-track {
-			height: $range-track-height;
-			background: transparent;
-			border-color: transparent;
-			border-width: (($range-thumb-height - $range-track-height) / 2) 0;
-			color: transparent;
-		}
-		&::-ms-fill-lower,
-		&::-ms-fill-upper {
-			@include range-track();
-		}
-		&::-ms-thumb {
-			@include range-thumb();
-		}
+            // Mozilla
+            &::-moz-range-track {
+                @include seek-track();
+            }
+            &::-moz-range-thumb {
+                -moz-appearance: none;
+                @include seek-thumb();
+            }
 
-		&:focus {
-			outline: 0;
+            // Microsoft
+            &::-ms-track {
+                color: transparent;
+                @include seek-track();
+            }
+            &::-ms-fill-lower,
+            &::-ms-fill-upper {
+                @include seek-track();
+            }
+            &::-ms-thumb {
+                @include seek-thumb();
+            }
 
-			&::-webkit-slider-thumb {
-				background: $range-thumb-bg-focus;
-			}
-			&::-moz-range-thumb {
-				background: $range-thumb-bg-focus;
-			}
-			&::-ms-thumb {
-				background: $range-thumb-bg-focus;
-			}
-		}
-	}
+            &:focus {
+                outline: 0;
+            }
+            &::-moz-focus-outer {
+                border: 0;
+            }
+        }
+    }
 
-	// Full screen mode
-	&-fullscreen,
-	&.fullscreen-active {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		height: 100%;
-		width: 100%;
-		z-index: 10000000;
-		background: #000;
+    // Loading state
+    &.loading .player-progress-buffer {
+        animation: progress 1s linear infinite;
+        background-size: $progress-loading-size $progress-loading-size;
+        background-repeat: repeat-x;
+        background-color: $progress-buffered-bg;
+        background-image: linear-gradient(
+            -45deg,
+            $progress-loading-bg 25%,
+            transparent 25%,
+            transparent 50%,
+            $progress-loading-bg 50%,
+            $progress-loading-bg 75%,
+            transparent 75%,
+            transparent);
+            color: transparent;
+    }
 
-		.player-video-wrapper {
-			height: 100%;
-			width: 100%;
+    // States
+    &-controls [data-player='pause'],
+    &.playing .player-controls [data-player='play'] {
+        display: none;
+    }
+    &.playing .player-controls [data-player='pause'] {
+        display: inline-block;
+    }
 
-			video {
-				height: 100%;
-			}
-			.player-captions {
-				top: auto;
-				bottom: 90px;
+    // Volume control
+    // <input[type='range']> element
+    // Specificity is for bootstrap compatibility
+    &-volume[type=range] {
+        display: inline-block;
+        vertical-align: middle;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        width: 100px;
+        margin: 0 $control-spacing 0 0;
+        padding: 0;
+        cursor: pointer;
+        background: none;
 
-				@media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) {
-					bottom: 60px;
-				}
-				@media (min-width: $bp-captions-large) {
-					bottom: 80px;
-				}
-			}
-		}
-		.player-controls {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-		}
-	}
+        // Webkit
+        &::-webkit-slider-runnable-track {
+            @include volume-track();
+        }
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
+            @include volume-thumb();
+        }
 
-	// When true full screen, show exit fullscreen icon
-	&.fullscreen-active .icon-exit-fullscreen {
-		display: block;
+        // Mozilla
+        &::-moz-range-track {
+            @include volume-track();
+        }
+        &::-moz-range-thumb {
+            @include volume-thumb();
+        }
 
-		& + svg {
-			display: none;
-		}
-	}
+        // Microsoft
+        &::-ms-track {
+            height: $volume-track-height;
+            background: transparent;
+            border-color: transparent;
+            border-width: (($volume-thumb-height - $volume-track-height) / 2) 0;
+            color: transparent;
+        }
+        &::-ms-fill-lower,
+        &::-ms-fill-upper {
+            @include volume-track();
+        }
+        &::-ms-thumb {
+            @include volume-thumb();
+        }
 
-	// Some options are hidden by default
-	[data-player='captions'],
-	[data-player='captions'] + label,
-	[data-player='fullscreen'],
-	[data-player='fullscreen'] + label {
-		display: none;
-	}
-	&.captions-enabled [data-player='captions'],
-	&.captions-enabled [data-player='captions'] + label,
-	&.fullscreen-enabled [data-player='fullscreen'],
-	&.fullscreen-enabled [data-player='fullscreen'] + label {
-		display: inline-block;
-	}
+        &:focus {
+            outline: 0;
 
-	// Full browser view hides toggle
-	&-fullscreen [data-player='fullscreen'],
-	&-fullscreen [data-player='fullscreen'] + label {
-		display: none !important;
-	}
+            &::-webkit-slider-thumb {
+                background: $volume-thumb-bg-focus;
+            }
+            &::-moz-range-thumb {
+                background: $volume-thumb-bg-focus;
+            }
+            &::-ms-thumb {
+                background: $volume-thumb-bg-focus;
+            }
+        }
+    }
+
+    // Hide sound controls on iOS
+    // It's not supported to change volume using JavaScript:
+    // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
+    &.ios &-volume,
+    &.ios [data-player='mute'],
+    &.ios [data-player='mute'] + label,
+    &-audio.ios &-controls-right {
+        display: none;
+    }
+    // Center buttons so it looks less odd
+    &-audio.ios &-controls-left {
+        float: none;
+    }
+
+    // Full screen mode
+    &-fullscreen,
+    &.fullscreen-active {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 10000000;
+        background: #000;
+
+        .player-video-wrapper {
+            height: 100%;
+            width: 100%;
+
+            video {
+                height: 100%;
+            }
+            .player-captions {
+                top: auto;
+                bottom: 90px;
+
+                @media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) {
+                    bottom: 60px;
+                }
+                @media (min-width: $bp-captions-large) {
+                    bottom: 80px;
+                }
+            }
+        }
+        .player-controls {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    // Change icons on state change
+    &.fullscreen-active .icon-exit-fullscreen,
+    &.muted .player-controls .icon-muted,
+    &.captions-active .player-controls .icon-captions-on {
+        display: block;
+
+        & + svg {
+            display: none;
+        }
+    }
+
+    // Some options are hidden by default
+    [data-player='captions'],
+    [data-player='captions'] + label,
+    [data-player='fullscreen'],
+    [data-player='fullscreen'] + label {
+        display: none;
+    }
+    &.captions-enabled [data-player='captions'],
+    &.captions-enabled [data-player='captions'] + label,
+    &.fullscreen-enabled [data-player='fullscreen'],
+    &.fullscreen-enabled [data-player='fullscreen'] + label {
+        display: inline-block;
+    }
+
+    // Full browser view hides toggle
+    &-fullscreen [data-player='fullscreen'],
+    &-fullscreen [data-player='fullscreen'] + label {
+        display: none !important;
+    }
 }

src/sprite/icon-bubble.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M9.016 3c2.748 0 4.984 2.243 4.984 5s-2.236 5-4.97 5l-0.060-0.004c-0.055-0.004-0.11-0.007-0.165-0.010l-0.336-0.014-3.665 1.098 0.629-2.483-0.517-0.747c-0.58-0.839-0.886-1.822-0.886-2.842 0-2.757 2.236-5 4.984-5zM9.016 1c-3.857 0-6.984 3.134-6.984 7 0 1.479 0.46 2.848 1.241 3.978l-1.272 5.022 6.722-2.015c0.098 0.004 0.194 0.015 0.293 0.015 3.857 0 6.984-3.134 6.984-7s-3.127-7-6.984-7v0z"></path>
-</svg>

src/sprite/icon-captions-off.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-captions-off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+    </g>
+</svg>

src/sprite/icon-captions-on.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-captions-on</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="3" y="11" width="3" height="2"></rect>
+        <rect id="Rectangle-3" sketch:type="MSShapeGroup" x="12" y="11" width="3" height="2"></rect>
+        <rect id="Rectangle-2" sketch:type="MSShapeGroup" x="7" y="11" width="4" height="2"></rect>
+    </g>
+</svg>

src/sprite/icon-refresh.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M8.013 14.006h-0.822c-2.372-0.388-4.187-2.453-4.187-4.934 0-0.831 0.213-1.609 0.574-2.299l0.613 0.85c0.446 0.618 1.409 0.446 1.614-0.289l1.162-4.179c0.162-0.58-0.275-1.155-0.877-1.154l-4.174 0.006c-0.741 0.001-1.17 0.841-0.736 1.443l1.128 1.564c-0.817 1.145-1.302 2.544-1.302 4.059 0 3.499 2.566 6.399 5.918 6.917 0.091 0.014 0.18 0.010 0.267-0.001v0.012h0.822c0.545 0 0.987-0.442 0.987-0.987v-0.020c0-0.545-0.442-0.987-0.987-0.987z"></path>
-<path d="M16.82 14.551l-1.129-1.564c0.818-1.145 1.302-2.544 1.302-4.059 0-3.499-2.566-6.399-5.918-6.918-0.091-0.014-0.18-0.010-0.267 0.001v-0.013h-0.822c-0.545 0-0.986 0.442-0.986 0.987v0.020c0 0.546 0.442 0.988 0.986 0.988h0.822c2.372 0.388 4.187 2.453 4.187 4.934 0 0.831-0.213 1.609-0.573 2.299l-0.614-0.85c-0.446-0.618-1.409-0.446-1.613 0.289l-1.163 4.179c-0.161 0.581 0.275 1.155 0.878 1.154l4.174-0.006c0.742-0.001 1.17-0.842 0.736-1.443z"></path>
-</svg>

src/sprite/icon-restart.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-restart</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path>
+    </g>
+</svg>