1.5.11

# Conflicts:
#	dist/plyr.js

.gitignore

@@ -4,4 +4,5 @@ node_modules
 .DS_Store
 aws.json
 docs/index.dev.html
-*.mp4
+*.mp4
+notes.txt

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v1.5.8
+- Fix for touch device seek tooltip
+- Seek improvements
+
+## v1.5.7
+- Fix for control tooltips always showing
+
 ## v1.5.6
 - Seek tooltip (option for tooltips changed, please check docs)
 - SASS compile error fixes (fixes #148)

controls.md

@@ -49,13 +49,14 @@ This is an example `html` option with all controls.
 var controls = ["<div class='plyr__controls'>",
     "<div class='plyr__progress'>",
         "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
-        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.5' value='0' data-plyr='seek'>",
+        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
         "<progress class='plyr__progress--played' max='100' value='0'>",
             "<span>0</span>% played",
         "</progress>",
         "<progress class='plyr__progress--buffer' max='100' value='0'>",
             "<span>0</span>% buffered",
         "</progress>",
+        "<span class='plyr__tooltip'>--:--</span>",
     "</div>",
     "<span class='plyr__controls--left'>",
         "<button type='button' data-plyr='restart'>",
@@ -84,7 +85,7 @@ var controls = ["<div class='plyr__controls'>",
         "</span>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Duration</span>",
-            "<span class='plyr__duration'>00:00</span>",
+            "<span class='plyr__duration'>--:--</span>",
         "</span>",
     "</span>",
     "<span class='plyr__controls--right'>",

docs/dist/docs.js

@@ -1 +1 @@
-"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(!(t in n)||!o&&t==s||!s.length&&t==n.video)return void console.warn("Unregonized type.");var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),a||t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
+"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0},duration:100}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(t in n&&(o||t!=s)&&(s.length||t!=n.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

docs/src/js/docs.js

@@ -13,7 +13,8 @@ plyr.setup('.js-media-player', {
 	},
 	captions: {
 		defaultActive: 	true
-	}
+	},
+	duration: 100
 });
 
 // Setup shr
@@ -58,13 +59,19 @@ shr.setup({
 	// On load
 	if(historySupport) {
 		var video = !currentType.length;
+
+		// If there's no current type set, assume video
 		if(video) {
 			currentType = types.video;
 		}
+
+		// Replace current history state
 		if(currentType in types) {
 			history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
 		}
-		if(!video) {
+
+		// If it's not video, load the source
+		if(currentType !== types.video) {
 			newSource(currentType, true);
 		}
 	}
@@ -86,7 +93,6 @@ shr.setup({
 	function newSource(type, init) {
 		// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
 		if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
-			console.warn('Unregonized type.');
 			return;
 		}
 

package.json

@@ -1,9 +1,9 @@
 {
   "name": "plyr",
-  "version": "1.5.6",
-  "description": "A simple HTML5 media player using custom controls",
+  "version": "1.5.11",
+  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
-  "main": "gulpfile.js",
+  "main": "src/js/plyr.js",
   "dependencies": {},
   "devDependencies": {
     "gulp": "^3.9.0",
@@ -24,9 +24,6 @@
     "gulp-util": "^3.0.7",
     "run-sequence": "^1.1.5"
   },
-  "scripts": {
-    "preinstall": "npm install -g gulp"
-  },
   "keywords": [
     "HTML5 Video",
     "HTML5 Audio",
@@ -36,8 +33,15 @@
     "type": "git",
     "url": "git://github.com/selz/plyr.git"
   },
-  "authors": [
-    "Sam Potts <me@sampotts.me>"
-  ],
-  "license": "MIT"
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/selz/plyr/issues"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Sam Potts <sam@selz.com> (selz.com)"
 }

readme.md

@@ -40,13 +40,22 @@ 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.5.6/plyr.js` to `https://cdn.plyr.io/1.5.6/plyr.js`
+**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.5.10/plyr.js` to `https://cdn.plyr.io/1.5.10/plyr.js`
+
+### Node Package Manager (NPM)
+Using NPM, you can grab Plyr:
+```
+npm install plyr
+```
+[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
 ```
 bower install plyr
 ```
+[http://bower.io/search/?q=plyr](http://bower.io/search/?q=plyr)
+
 More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
 
 ### Ember
@@ -60,11 +69,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.5.6/plyr.css">
-<script src="https://cdn.plyr.io/1.5.6/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.10/plyr.css">
+<script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.6/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.10/sprite.svg`.
 
 ### CSS & Styling
 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.
@@ -96,7 +105,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
 ```
 
 If you're using the `<base>` tag on your site, you may need to use something like this:
-[https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2](svgfixer.js)
+[svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
 
 More info on SVG sprites here:
 [http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
@@ -161,7 +170,7 @@ More info on CORS here:
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -239,6 +248,12 @@ Options must be passed as an object to the `setup()` method as above.
     <td><code>false</code></td>
     <td>Display debugging information on what Plyr is doing.</td>
   </tr>
+  <tr>
+    <td><code>autoplay</code></td>
+    <td>Boolean</td>
+    <td><code>false</code></td>
+    <td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation).</td>
+  </tr>
   <tr>
     <td><code>seekTime</code></td>
     <td>Number</td>
@@ -454,16 +469,23 @@ Here's a list of the methods supported:
   </tr>
   <tr>
     <td><code>source(...)</code></td>
-    <td>Array or undefined</td>
+    <td>Object or undefined</td>
     <td>
       Get/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>
+      <pre><code>.source([
+      	{ 
+      		src: "/path/to/video.webm", 
+      		type: "video/webm", 
+      		...more attributes... 
+      	}, 
+      	{ 
+      		src: "/path/to/video.mp4", 
+      		type: "video/mp4", 
+      		...more attributes... 
+      	}
+      ])`</code></pre><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.
       <br><br>
       <strong>YouTube</strong><br>
@@ -586,8 +608,8 @@ Some more details on the object parameters
     </tr>
     <tr>
       <td><code>sources</code></td>
-      <td>Array or String</td>
-      <td>This is an array of sources or optionally a string for embedded players (YouTube and Vimeo). `type` is also optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
+      <td>Array</td>
+      <td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
     </tr>
     <tr>
       <td><code>poster</code></td>
@@ -805,6 +827,7 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
 - [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)
 - [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
+- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
 
 ## Used by
 - [Selz.com](https://selz.com)

src/js/plyr.js

@@ -11,17 +11,17 @@
     'use strict';
     /*global define,module*/
 
-    if (typeof define === 'function' && define.amd) {
-        // AMD
-        define(null, function() { factory(root, document) });
-    } else if (typeof module === 'object') {
+    if (typeof module === 'object' && typeof module.exports === 'object') {
         // Node, CommonJS-like
         module.exports = factory(root, document);
+    } else if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(null, function() { factory(root, document) });
     } else {
         // Browser globals (root is window)
         root.plyr = factory(root, document);
     }
-}(this, function(window, document) {
+}(typeof window !== 'undefined' ? window : this, function(window, document) {
     'use strict';
     /*global YT,$f*/
 
@@ -162,7 +162,7 @@
         '<div class="plyr__controls">',
             '<div class="plyr__progress">',
                 '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
-                '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.5" value="0" data-plyr="seek">',
+                '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
                 '<progress class="plyr__progress--played" max="100" value="0">',
                     '<span>0</span>% ' + config.i18n.played,
                 '</progress>',
@@ -172,7 +172,7 @@
 
         // Seek tooltip
         if (config.tooltips.seek) {
-            html.push('<span class="plyr__tooltip">0:00</span>');
+            html.push('<span class="plyr__tooltip">--:--</span>');
         }
 
         // Close progress
@@ -238,7 +238,7 @@
             html.push(
                 '<span class="plyr__time">',
                     '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
-                    '<span class="plyr__time--duration">00:00</span>',
+                    '<span class="plyr__time--duration">--:--</span>',
                 '</span>'
             );
         }
@@ -746,7 +746,7 @@
     // Player instance
     function Plyr(container) {
         var plyr = this;
-        plyr.container = container,
+        plyr.container = container;
         plyr.timers = {};
 
         // Captions functions
@@ -943,7 +943,7 @@
             container.insertAdjacentHTML('beforeend', html);
 
             // Setup tooltips
-            if (config.tooltips) {
+            if (config.tooltips.controls) {
                 var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);
 
                 for (var i = labels.length - 1; i >= 0; i--) {
@@ -1816,14 +1816,18 @@
         function _setVolume(volume) {
             // Use default if no value specified
             if (typeof volume === 'undefined') {
+                volume = config.volume;
+
                 if (config.storage.enabled && _storage().supported) {
-                    volume = window.localStorage[config.storage.key] || config.volume;
-                }
-                else {
-                    volume = config.volume;
+                    volume = window.localStorage.getItem(config.storage.key);
                 }
             }
 
+            // Use config if all else fails
+            if(isNaN(volume)) {
+                volume = config.volume;
+            }
+
             // Maximum is 10
             if (volume > 10) {
                 volume = 10;
@@ -1873,7 +1877,7 @@
             }
 
             // Store the volume in storage
-            if (config.storage.enabled && _storage().supported) {
+            if (config.storage.enabled && _storage().supported && !isNaN(volume)) {
                 window.localStorage.setItem(config.storage.key, volume);
             }
 
@@ -2015,6 +2019,7 @@
                 return;
             }
 
+            // Determine duration
             var duration = plyr.media.duration || 0;
 
             // If there's only one time display, display duration there
@@ -2048,7 +2053,7 @@
         // Update hover tooltip for seeking
         function _updateSeekTooltip(event) {
             // Bail if setting not true
-            if (!config.tooltips.seek) {
+            if (!config.tooltips.seek || plyr.browser.touch) {
                 return;
             }
 
@@ -2251,11 +2256,11 @@
                 // Load HTML5 sources
                 plyr.media.load();
 
-                // Display duration if available
-                _displayDuration();
-
                 // Setup interface
                 _setupInterface();
+
+                // Display duration if available
+                _displayDuration();
             }
 
             // Play if autoplay attribute is present

src/less/plyr.less

@@ -32,7 +32,7 @@
 
 // Tooltips
 @plyr-tooltip-bg:                @plyr-controls-bg;
-@plyr-tooltip-border-color:      fade(@plyr-gray-dark, 10%);
+@plyr-tooltip-border-color:      fade(darken(@plyr-controls-bg, 5%), 10%);
 @plyr-tooltip-border-width:      1px;
 @plyr-tooltip-shadow:            0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
 @plyr-tooltip-color:             @plyr-control-color;
@@ -110,8 +110,11 @@
 .seek-thumb() {
     background: transparent;
     border: 0;
-    width: (@plyr-control-spacing * 4);
+    width: 1px;
     height: @plyr-control-spacing;
+}
+.seek-thumb-touch() {
+    width: (@plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 .seek-track() {
@@ -178,7 +181,6 @@
             height: 100%;
             border: 0;
             user-select: none;
-            pointer-events: none; // To allow mouse events to be captured
         }
 
         // Vimeo hack
@@ -187,6 +189,11 @@
             padding-bottom: 200%;
             transform: translateY(-35.95%);
         }
+
+        // To allow mouse events to be captured if full support
+        &.plyr iframe {
+            pointer-events: none;
+        }
     }
 
     // Captions
@@ -384,9 +391,14 @@
     }
 
     // Common range styles
-    input[type='range'].tab-focus:focus {
-        outline: 1px dotted fade(@plyr-gray-dark, 80%);
-        outline-offset: 3px;
+    input[type='range'] {
+        &::-ms-tooltip {
+            display: none;
+        }
+        &.tab-focus:focus {
+            outline: 1px dotted fade(@plyr-gray-dark, 80%);
+            outline-offset: 3px;
+        }
     }
 
     // Playback progress
@@ -495,6 +507,21 @@
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            .seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            .seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            .seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;

src/sass/plyr.scss

@@ -27,21 +27,19 @@ $plyr-font-size-captions-large:  ($plyr-font-size-base * 2) !default;
 $plyr-control-spacing:           10px !default;
 $plyr-controls-bg:               #fff !default;
 $plyr-control-bg-hover:          $plyr-blue !default;
-$plyr-control-color:             null !default;
-$plyr-control-color-hover:       null !default;
 
 // Contrast
 @if lightness($plyr-controls-bg) >= 65% {
-    $plyr-control-color: $plyr-gray-light;
+    $plyr-control-color: $plyr-gray-light !default;
 }
 @else {
-    $plyr-control-color: $plyr-gray-lighter;
+    $plyr-control-color: $plyr-gray-lighter !default;
 }
 @if lightness($plyr-control-bg-hover) >= 65% {
-    $plyr-control-color-hover: $plyr-gray;
+    $plyr-control-color-hover: $plyr-gray !default;
 }
 @else {
-    $plyr-control-color-hover: #fff;
+    $plyr-control-color-hover: #fff !default;
 }
 
 // Tooltips
@@ -111,8 +109,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
 @mixin seek-thumb() {
     background: transparent;
     border: 0;
-    width: ($plyr-control-spacing * 4);
+    width: 1px;
     height: $plyr-control-spacing;
+}
+@mixin seek-thumb-touch() {
+    width: ($plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 @mixin seek-track() {
@@ -179,7 +180,6 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             height: 100%;
             border: 0;
             user-select: none;
-            pointer-events: none; // To allow mouse events to be captured
         }
 
         // Vimeo hack
@@ -188,6 +188,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             padding-bottom: 200%;
             transform: translateY(-35.95%);
         }
+
+        // To allow mouse events to be captured if full support
+        &.plyr iframe {
+            pointer-events: none;
+        }
     }
 
     // Captions
@@ -496,6 +501,21 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            @include seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            @include seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            @include seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;
@@ -637,33 +657,33 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             left: 0;
             right: 0;
         }
+    }
 
-        // Hide controls when playing in full screen
-        &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
-        &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
-            .plyr__controls {
-                transform: translateY(100%) translateY($plyr-control-spacing / 2);
-                transition: transform .3s .2s ease;
-            }
-            .plyr__captions {
-                bottom: ($plyr-control-spacing / 2);
-                transition: bottom .3s .2s ease;
-            }
-            &.plyr--hover .plyr__controls {
-                transform: translateY(0);
-            }
+    // Hide controls when playing in full screen
+    &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
+    &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
+        .plyr__controls {
+            transform: translateY(100%) translateY($plyr-control-spacing / 2);
+            transition: transform .3s .2s ease;
         }
+        .plyr__captions {
+            bottom: ($plyr-control-spacing / 2);
+            transition: bottom .3s .2s ease;
+        }
+        &.plyr--hover .plyr__controls {
+            transform: translateY(0);
+        }
+    }
 
-        // Captions
-        &.plyr--fullscreen .plyr__captions,
-        &--fullscreen-active .plyr__captions,
-        &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
-            top: auto;
-            bottom: 90px;
+    // Captions
+    &.plyr--fullscreen .plyr__captions,
+    &--fullscreen-active .plyr__captions,
+    &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
+        top: auto;
+        bottom: 90px;
 
-            @media (min-width: $plyr-bp-control-split) {
-                bottom: 60px;
-            }
+        @media (min-width: $plyr-bp-control-split) {
+            bottom: 60px;
         }
     }