SASS fixes, docs changes (fixes #180), 'ready' event

Dynamically set YouTube autoplay from config

.gitignore

@@ -6,3 +6,4 @@ aws.json
 docs/index.dev.html
 *.mp4
 notes.txt
+npm-debug.log

changelog.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## v1.5.18
+- Added 'ready' event for initial setup complete or source change occurs
+- Fixed SASS stylesheet references to transparentize
+- Added default font stack to controls 
+- Docs fixes inc controls HTML (fixes #180)
+
+## v1.5.17
+- Expose YouTube and Vimeo API (docs update required) (Fixes #176)
+- Auto set title based on YouTube getVideoData() title property
+- Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end
+
+## v1.5.16
+- Cancel requests on source change (Fixes #174)
+
+## v1.5.15
+- Fix for CustomEvent polyfill and related bug (See #172)
+
+## v1.5.14
+- Volume storage fix (Fixes #171)
+
+## v1.5.13
+- Fix for manual caption rendering
+
+## v1.5.12
+- Added a duration option to pass the duration of the file
+- Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example)
+- Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events
+- Firefox bug fix for event not defined
+
 ## v1.5.11
 - iOS embed bug fixes (fixes #166)
 - Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)

controls.md

@@ -81,11 +81,11 @@ var controls = ["<div class='plyr__controls'>",
         "</button>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Current time</span>",
-            "<span class='plyr__current-time'>00:00</span>",
+            "<span class='plyr__time--curent'>00:00</span>",
         "</span>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Duration</span>",
-            "<span class='plyr__duration'>00:00</span>",
+            "<span class='plyr__time--duration'>00:00</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,s=arguments.length;for(i=0;s>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",s=e.Element[i],n=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+/):[],s=0,n=i.length;n>s;s++)this.push(i[s]);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,s=t.length,n=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),n=!0);while(++i<s);n&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,n=i.length,o=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++s<n);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},n.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{n.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,n.defineProperty(s,t,p))}}else n[i].__defineGetter__&&s.__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 s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,o){if(t in s&&(o||t!=n)&&(n.length||t!=s.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case s.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 s.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 s.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case s.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}n=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]"),s={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=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=!n.length;a&&(n=s.video),n in s&&history.replaceState({type:n},"",a?"":"#"+n),n!==s.video&&t(n,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,n,o,r){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=s,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}}),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.en.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

@@ -116,7 +116,7 @@ shr.setup({
 						kind:   'captions',
 						label:  'English',
 						srclang:'en',
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt',
+						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
 						default: true
 					}]
 				});

gulpfile.js

@@ -214,8 +214,10 @@ options = {
 
 // If aws is setup
 if("cdn" in aws) {
-    var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"),
-    localpath   = new RegExp("(\.\.\/)?dist", "gi");
+    var regex       = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)",
+    cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
+    semver          = new RegExp("v" + regex, "gi"),
+    localpath       = new RegExp("(\.\.\/)?dist", "gi");
 }
 
 // Publish version to CDN bucket
@@ -244,6 +246,11 @@ gulp.task("docs", function () {
         .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
         .pipe(gulp.dest(root));
 
+    // Replace versioned files in plyr.js
+    gulp.src(path.join(root, "src/js/plyr.js"))
+        .pipe(replace(semver, "v" + version))
+        .pipe(gulp.dest(path.join(root, "src/js/")));
+
     // Replace local file paths with remote paths in docs
     // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
     gulp.src([paths.docs.root + "*.html"])

npm-debug.log

@@ -1,20 +0,0 @@
-0 info it worked if it ends with ok
-1 verbose cli [ '/usr/local/Cellar/node/5.0.0/bin/node',
-1 verbose cli   '/usr/local/bin/npm',
-1 verbose cli   'version',
-1 verbose cli   '1.5.12' ]
-2 info using npm@3.3.9
-3 info using node@v5.0.0
-4 verbose stack Error: Version not changed
-4 verbose stack     at /usr/local/lib/node_modules/npm/lib/version.js:52:49
-4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:76:16
-4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)
-5 verbose cwd /usr/local/var/www/dev/plyr
-6 error Darwin 14.5.0
-7 error argv "/usr/local/Cellar/node/5.0.0/bin/node" "/usr/local/bin/npm" "version" "1.5.12"
-8 error node v5.0.0
-9 error npm  v3.3.9
-10 error Version not changed
-11 error If you need help, you may report this error at:
-11 error     <https://github.com/npm/npm/issues>
-12 verbose exit [ 1, true ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.5.12",
+  "version": "1.5.18",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
   "main": "src/js/plyr.js",

readme.md

@@ -1,9 +1,9 @@
 # Plyr
 A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
 
-[Checkout the demo](http://plyr.io)
+[Checkout the demo](https://plyr.io)
 
-[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](https://plyr.io)
 
 ## Why?
 We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
@@ -25,7 +25,7 @@ We wanted a lightweight, accessible and customizable media player that supports
 Oh and yes, it works with Bootstrap.
 
 ## Changelog
-Check out the [changelog](changelog.md) to see what's been new with Plyr.
+Check out the [changelog](changelog.md) to see what's new with Plyr.
 
 ## Planned Development
 - Playback speed
@@ -40,7 +40,7 @@ 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.12/plyr.js` to `https://cdn.plyr.io/1.5.12/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.18/plyr.js` to `https://cdn.plyr.io/1.5.18/plyr.js`
 
 ### Node Package Manager (NPM)
 Using NPM, you can grab Plyr:
@@ -69,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.12/plyr.css">
-<script src="https://cdn.plyr.io/1.5.12/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.18/plyr.css">
+<script src="https://cdn.plyr.io/1.5.18/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.12/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.18/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.
@@ -163,6 +163,11 @@ You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>`
 More info on CORS here:
 [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
 
+### Captions
+WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
+
+Be sure to [validate your caption files](https://quuz.org/webvtt/)
+
 ### JavaScript
 
 #### Quick setup
@@ -170,7 +175,7 @@ More info on CORS here:
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.12/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.18/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -198,11 +203,6 @@ Passing just the options object:
 plyr.setup(options);
 ```
 
-### Captions
-WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
-
-Be sure to [validate your caption files](https://quuz.org/webvtt/)
-
 #### Options
 
 Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements (e.g. data-plyr='{ title: "testing" }') - note the single quotes encapsulating the JSON.
@@ -675,7 +675,7 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td>Sent when an error occurs.&nbsp; The element's <code>error</code> attribute contains more information.</td>
 	</tr>
 	<tr>
-		<td><code>loadeddata/code></td>
+		<td><code>loadeddata</code></td>
 		<td>✔</td>
 		<td>The first frame of the media has finished loading.</td>
 	</tr>
@@ -759,6 +759,11 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td></td>
 		<td>Captions toggled off</td>
 	</tr>
+	<tr>
+		<td><code>ready</code></td>
+		<td></td>
+		<td>Triggered when initial setup is done or a source change has occurred.</td>
+	</tr>
 	</tbody>
 </table>
 
@@ -767,7 +772,7 @@ Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Event
 Here's an example of binding an event listener:
 
 ```javascript
-document.querySelector(".js-plyr").addEventListener("playing", function() {
+document.querySelector(".js-plyr").addEventListener("ready", function() {
   /* Magic happens */
 });
 ```
@@ -842,6 +847,8 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
 
 ## Used by
 - [Selz.com](https://selz.com)
+- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
+- [Oscar Radio](http://oscar-radio.xyz/)
 
 Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.5.3
+// plyr.js v1.5.18
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -107,7 +107,7 @@
         },
         storage: {
             enabled:            true,
-            key:                'plyr_volume'
+            key:                'plyr'
         },
         controls:               ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'],
         i18n: {
@@ -133,7 +133,7 @@
         // URLs
         urls: {
             vimeo: {
-                api:            'https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js',
+                api:            'https://cdn.plyr.io/froogaloop/1.0.1/plyr.froogaloop.js',
             },
             youtube: {
                 api:            'https://www.youtube.com/iframe_api'
@@ -914,16 +914,26 @@
                         xhr.onreadystatechange = function() {
                             if (xhr.readyState === 4) {
                                 if (xhr.status === 200) {
-                                    var records = [],
-                                        record,
+                                    var captions = [],
+                                        caption,
                                         req = xhr.responseText;
 
-                                    records = req.split('\n\n');
+                                    captions = req.split('\n\n');
 
-                                    for (var r = 0; r < records.length; r++) {
-                                        record = records[r];
+                                    for (var r = 0; r < captions.length; r++) {
+                                        caption = captions[r];
                                         plyr.captions[r] = [];
-                                        plyr.captions[r] = record.split('\n');
+
+                                        // Get the parts of the captions
+                                        var parts = caption.split('\n'),
+                                            index = 0;
+
+                                        // Incase caption numbers are added
+                                        if(parts[index].indexOf(":") === -1) {
+                                            index = 1;
+                                        }
+
+                                        plyr.captions[r] = [parts[index], parts[index + 1]];
                                     }
 
                                     // Remove first element ('VTT')
@@ -1232,7 +1242,7 @@
 
         // Toggle style hook
         function _toggleStyleHook() {
-            _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
+            _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
         }
 
         // Toggle native controls
@@ -1410,6 +1420,9 @@
 
             // Set title
             _setTitle(_getElement('iframe'));
+
+            // Store reference to API
+            plyr.container.plyr.embed = plyr.embed;
         }
 
         // Handle YouTube API ready
@@ -1425,7 +1438,7 @@
             plyr.embed = new YT.Player(container.id, {
                 videoId: videoId,
                 playerVars: {
-                    autoplay: 0,
+                    autoplay: plyr.autoplay ? 1 : 0,
                     controls: (plyr.supported.full ? 0 : 1),
                     rel: 0,
                     showinfo: 0,
@@ -1460,6 +1473,9 @@
                         plyr.media.currentTime = instance.getCurrentTime();
                         plyr.media.muted = instance.isMuted();
 
+                        // Set title
+                        config.title = instance.getVideoData().title;
+
                         // Trigger timeupdate
                         _triggerEvent(plyr.media, 'timeupdate');
 
@@ -1859,11 +1875,15 @@
 
                 if (config.storage.enabled && _storage().supported) {
                     volume = window.localStorage.getItem(config.storage.key);
+
+                    // Clean up old volume
+                    // https://github.com/Selz/plyr/issues/171
+                    window.localStorage.removeItem('plyr-volume');
                 }
             }
 
             // Use config if all else fails
-            if(isNaN(volume)) {
+            if(volume === null || isNaN(volume)) {
                 volume = config.volume;
             }
 
@@ -2211,6 +2231,12 @@
                 _remove(plyr.videoContainer);
             }
 
+            // Remove embed object
+            plyr.embed = null;
+
+            // Cancel current network requests
+            _cancelRequests();
+
             // Remove the old media
             _remove(plyr.media);
 
@@ -2309,12 +2335,10 @@
             }
 
             // Set aria title and iframe title
-            if ('title' in source) {
-                config.title = source.title;
-                _setTitle();
-            }
+            config.title = source.title;
+            _setTitle();
 
-            // Reset media object
+            // Reset media objects
             plyr.container.plyr.media = plyr.media;
         }
 
@@ -2507,6 +2531,31 @@
             });
         }
 
+        // Cancel current network requests
+        // See https://github.com/Selz/plyr/issues/174
+        function _cancelRequests() {
+            if(!_inArray(config.types.html5, plyr.type)) {
+                return;
+            }
+
+            // Set empty src attribute
+            plyr.media.setAttribute('src', '');
+
+            // Remove child sources
+            var sources = plyr.media.querySelectorAll('source');
+            for (var i = 0; i < sources.length; i++) {
+                _remove(sources[i]);
+            }
+
+            // Load the new empty source
+            // This will cancel existing requests
+            // See https://github.com/Selz/plyr/issues/174
+            plyr.media.load();
+
+            // Debugging
+            _log("Cancelled network requests for old media");
+        }
+
         // Destroy an instance
         // Event listeners are removed when elements are removed
         // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
@@ -2533,7 +2582,7 @@
 
             // If video, we need to remove some more
             if (plyr.type === 'video') {
-                // Remove captions
+                // Remove captions container
                 _remove(_getElement(config.selectors.captions));
 
                 // Remove video wrapper
@@ -2681,6 +2730,9 @@
 
             // Display duration
             _displayDuration();
+
+            // Ready event
+            _triggerEvent(plyr.container, 'ready');
         }
 
         // Initialize instance
@@ -2819,16 +2871,18 @@
 // Custom event polyfill
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 (function () {
+    if (typeof window.CustomEvent === 'function') {
+        return false;
+    }
+
     function CustomEvent (event, params) {
         params = params || { bubbles: false, cancelable: false, detail: undefined };
         var evt = document.createEvent('CustomEvent');
-        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
         return evt;
     }
 
     CustomEvent.prototype = window.Event.prototype;
 
-    if(!('CustomEvent' in window)) {
-        window.CustomEvent = CustomEvent;
-    }
+    window.CustomEvent = CustomEvent;
 })();

src/less/plyr.less

@@ -11,7 +11,7 @@
 @plyr-gray-dark:                     #343F4A;
 @plyr-gray:                          #565D64;
 @plyr-gray-light:                    #6B7D86;
-@plyr-gray-lighter:                 #CBD0D3;
+@plyr-gray-lighter:                  #CBD0D3;
 @plyr-off-white:                     #D6DADD;
 
 // Font sizes
@@ -130,6 +130,7 @@
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/

src/sass/plyr.scss

@@ -44,8 +44,8 @@ $plyr-control-bg-hover:              $plyr-blue !default;
 
 // Tooltips
 $plyr-tooltip-bg:                    $plyr-controls-bg !default;
-$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .1) !default;
-$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .2) !default;
+$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .9) !default;
+$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .8) !default;
 
 $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;
@@ -55,11 +55,11 @@ $plyr-tooltip-arrow-size:            6px !default;
 $plyr-tooltip-radius:                3px !default;
 
 // Progress
-$plyr-progress-bg:                   transparentize($plyr-gray, .2) !default;
+$plyr-progress-bg:                   transparentize($plyr-gray, .8) !default;
 $plyr-progress-playing-bg:           $plyr-blue !default;
-$plyr-progress-buffered-bg:          transparentize($plyr-gray, .25) !default;
+$plyr-progress-buffered-bg:          transparentize($plyr-gray, .75) !default;
 $plyr-progress-loading-size:         40px !default;
-$plyr-progress-loading-bg:           transparentize(#000, .15) !default;
+$plyr-progress-loading-bg:           transparentize(#000, .85) !default;
 
 // Volume
 $plyr-volume-track-height:           6px !default;
@@ -130,6 +130,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -218,7 +219,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         span {
             border-radius: 2px;
             padding: 3px 10px;
-            background: transparentize(#000, .9);
+            background: transparentize(#000, .1);
         }
         span:empty {
             display: none;
@@ -243,7 +244,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         background: $plyr-controls-bg;
         line-height: 1;
         text-align: center;
-        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .2);
+        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8);
 
         // Clear floats
         &::after {