Cancel requests on source change (Fixes #174 )

CustomEvent polyfill (Fixes #172 )
Remove version from source
2016-02-28 12:50:34 +11:00 · 2016-02-28 11:22:11 +11:00 · 2016-02-25 19:36:14 +11:00 · 2016-02-25 19:35:03 +11:00 · 2016-02-23 15:11:48 +11:00 · 2016-02-23 15:11:35 +11:00
14 changed files with 731 additions and 541 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,4 +4,6 @@ node_modules
 .DS_Store
 aws.json
 docs/index.dev.html
-*.mp4
+*.mp4
+notes.txt
+npm-debug.log
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,31 @@
 # Changelog

+## 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)
+- SASS bug fix for default values (fixes #158)
+
+## v1.5.9 + v1.5.10
+- NPM bug fixes
+
 ## v1.5.8
 - Fix for touch device seek tooltip
 - Seek improvements
--- a/controls.md
+++ b/controls.md
@ -56,6 +56,7 @@ var controls = ["<div class='plyr__controls'>",
        "<progress class='plyr__progress--buffer' max='100' value='0'>",
            "<span>0</span>% buffered",
        "</progress>",
+        "<span class='plyr__tooltip'>00:00</span>",
    "</div>",
    "<span class='plyr__controls--left'>",
        "<button type='button' data-plyr='restart'>",
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/docs/dist/docs.js
+++ b/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}}),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"));
--- a/docs/index.html
+++ b/docs/index.html
@ -58,7 +58,7 @@
                        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">

                        <!-- Text track file -->
-                        <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt" default>
+                        <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>

                        <!-- Fallback for browsers that don't support the <video> element -->
                        <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@ -58,13 +58,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 +92,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;
 		}

@ -111,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
 					}]
 				});
--- a/gulpfile.js
+++ b/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"])
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.5.10",
+  "version": "1.5.16",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "http://plyr.io",
  "main": "src/js/plyr.js",
--- a/readme.md
+++ b/readme.md
@ -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.9/plyr.js` to `https://cdn.plyr.io/1.5.9/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.16/plyr.js` to `https://cdn.plyr.io/1.5.16/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.9/plyr.css">
-<script src="https://cdn.plyr.io/1.5.9/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.16/plyr.css">
+<script src="https://cdn.plyr.io/1.5.16/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.9/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.16/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.
@ -105,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/)
@ -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.9/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.16/plyr.js"></script>
 <script>plyr.setup();</script>
 ```

@ -200,7 +205,7 @@ plyr.setup(options);

 #### Options

-Options must be passed as an object to the `setup()` method as above.
+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.

 <table class="table" width="100%">
 <thead>
@ -248,6 +253,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>
@ -276,7 +287,13 @@ Options must be passed as an object to the `setup()` method as above.
 		<strong>seek</strong>: Display a seek tooltip to indicate on click where the media would seek to.
 	</td>
  </tr>
-    <tr>
+  <tr>
+    <td><code>duration</code></td>
+    <td>Number</td>
+    <td><code>null</code></td>
+    <td>Specify a custom duration.</td>
+  </tr>
+  <tr>
    <td><code>displayDuration</code></td>
    <td>Boolean</td>
    <td><code>true</code></td>
@ -463,16 +480,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>
@ -595,8 +619,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>
@ -814,6 +838,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)
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -7,57 +7,58 @@
 // -------------------------------

 // Colors
-@plyr-blue:                      #3498DB;
-@plyr-gray-dark:                 #343F4A;
-@plyr-gray:                      #565D64;
-@plyr-gray-light:                #6B7D86;
-@plyr-gray-lighter:              #CBD0D3;
-@plyr-off-white:                 #D6DADD;
+@plyr-blue:                          #3498DB;
+@plyr-gray-dark:                     #343F4A;
+@plyr-gray:                          #565D64;
+@plyr-gray-light:                    #6B7D86;
+@plyr-gray-lighter:                 #CBD0D3;
+@plyr-off-white:                     #D6DADD;

 // Font sizes
-@plyr-font-size-small:           14px;
-@plyr-font-size-base:            16px;
+@plyr-font-size-small:               14px;
+@plyr-font-size-base:                16px;

 // Captions
-@plyr-font-size-captions-base:   ceil(@plyr-font-size-base * 1.25);
-@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
-@plyr-font-size-captions-large:  (@plyr-font-size-base * 2);
+@plyr-font-size-captions-base:       ceil(@plyr-font-size-base * 1.25);
+@plyr-font-size-captions-medium:     ceil(@plyr-font-size-base * 1.5);
+@plyr-font-size-captions-large:      (@plyr-font-size-base * 2);

 // Controls
-@plyr-control-spacing:           10px;
-@plyr-controls-bg:               #fff;
-@plyr-control-bg-hover:          @plyr-blue;
+@plyr-control-spacing:               10px;
+@plyr-controls-bg:                   #fff;
+@plyr-control-bg-hover:              @plyr-blue;
 .contrast-control-color(@plyr-controls-bg);
 .contrast-control-color-hover(@plyr-control-bg-hover);

 // Tooltips
-@plyr-tooltip-bg:                @plyr-controls-bg;
-@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;
-@plyr-tooltip-padding:           @plyr-control-spacing;
-@plyr-tooltip-arrow-size:        6px;
-@plyr-tooltip-radius:            3px;
+@plyr-tooltip-bg:                    @plyr-controls-bg;
+@plyr-tooltip-border-color:          fade(darken(@plyr-controls-bg, 75%), 10%);
+@plyr-tooltip-arrow-border-color:    fade(darken(@plyr-controls-bg, 75%), 20%);
+@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;
+@plyr-tooltip-padding:               @plyr-control-spacing;
+@plyr-tooltip-arrow-size:            6px;
+@plyr-tooltip-radius:                3px;

 // Progress
-@plyr-progress-bg:               fade(@plyr-gray, 20%);
-@plyr-progress-playing-bg:       @plyr-blue;
-@plyr-progress-buffered-bg:      fade(@plyr-gray, 25%);
-@plyr-progress-loading-size:     40px;
-@plyr-progress-loading-bg:       fade(#000, 15%);
+@plyr-progress-bg:                   fade(@plyr-gray, 20%);
+@plyr-progress-playing-bg:           @plyr-blue;
+@plyr-progress-buffered-bg:          fade(@plyr-gray, 25%);
+@plyr-progress-loading-size:         40px;
+@plyr-progress-loading-bg:           fade(#000, 15%);

 // Volume
-@plyr-volume-track-height:       6px;
-@plyr-volume-track-bg:           darken(@plyr-controls-bg, 10%);
-@plyr-volume-thumb-height:       (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-width:        (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-bg:           @plyr-control-color;
-@plyr-volume-thumb-bg-focus:     @plyr-control-bg-hover;
+@plyr-volume-track-height:           6px;
+@plyr-volume-track-bg:               darken(@plyr-controls-bg, 10%);
+@plyr-volume-thumb-height:           (@plyr-volume-track-height * 2);
+@plyr-volume-thumb-width:            (@plyr-volume-track-height * 2);
+@plyr-volume-thumb-bg:               @plyr-control-color;
+@plyr-volume-thumb-bg-focus:         @plyr-control-bg-hover;

 // Breakpoints
-@plyr-bp-control-split:          560px; // When controls split into left/right
-@plyr-bp-captions-large:         768px; // When captions jump to the larger font size
+@plyr-bp-control-split:              560px; // When controls split into left/right
+@plyr-bp-captions-large:             768px; // When captions jump to the larger font size

 // Animation
 // ---------------------------------------
@ -166,6 +167,11 @@
        vertical-align: middle;
    }

+    // Hide default captions
+    video::-webkit-media-text-track-container {
+        display: none;
+    }
+
    // Container for embeds
    &__video-embed {
        padding-bottom: 56.25%; /* 16:9 */
@ -181,7 +187,6 @@
            height: 100%;
            border: 0;
            user-select: none;
-            pointer-events: none; // To allow mouse events to be captured
        }

        // Vimeo hack
@ -190,6 +195,11 @@
            padding-bottom: 200%;
            transform: translateY(-35.95%);
        }
+
+        // To allow mouse events to be captured if full support
+        &.plyr iframe {
+            pointer-events: none;
+        }
    }

    // Captions
@ -362,7 +372,7 @@
            @plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
            bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
            border-right: @plyr-border-arrow-size solid transparent;
-            border-top: @plyr-border-arrow-size solid @plyr-tooltip-border-color;
+            border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
            border-left: @plyr-border-arrow-size solid transparent;
            z-index: 1;
        }
@ -387,9 +397,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
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -7,71 +7,71 @@
 // -------------------------------

 // Colors
-$plyr-blue:                      #3498DB !default;
-$plyr-gray-dark:                 #343F4A !default;
-$plyr-gray:                      #565D64 !default;
-$plyr-gray-light:                #6B7D86 !default;
-$plyr-gray-lighter:              #CBD0D3 !default;
-$plyr-off-white:                 #D6DADD !default;
+$plyr-blue:                          #3498DB !default;
+$plyr-gray-dark:                     #343F4A !default;
+$plyr-gray:                          #565D64 !default;
+$plyr-gray-light:                    #6B7D86 !default;
+$plyr-gray-lighter:                  #CBD0D3 !default;
+$plyr-off-white:                     #D6DADD !default;

 // Font sizes
-$plyr-font-size-small:           14px !default;
-$plyr-font-size-base:            16px !default;
+$plyr-font-size-small:               14px !default;
+$plyr-font-size-base:                16px !default;

 // Captions
-$plyr-font-size-captions-base:   ceil($plyr-font-size-base * 1.25) !default;
-$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
-$plyr-font-size-captions-large:  ($plyr-font-size-base * 2) !default;
+$plyr-font-size-captions-base:       ceil($plyr-font-size-base * 1.25) !default;
+$plyr-font-size-captions-medium:     ceil($plyr-font-size-base * 1.5) !default;
+$plyr-font-size-captions-large:      ($plyr-font-size-base * 2) !default;

 // Controls
-$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;
+$plyr-control-spacing:               10px !default;
+$plyr-controls-bg:                   #fff !default;
+$plyr-control-bg-hover:              $plyr-blue !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
-$plyr-tooltip-bg:                $plyr-controls-bg !default;
-$plyr-tooltip-border-color:      transparentize($plyr-gray-dark, .1) !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;
-$plyr-tooltip-color:             $plyr-control-color !default;
-$plyr-tooltip-padding:           $plyr-control-spacing !default;
-$plyr-tooltip-arrow-size:        6px !default;
-$plyr-tooltip-radius:            3px !default;
+$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-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 !default;
+$plyr-tooltip-padding:               $plyr-control-spacing !default;
+$plyr-tooltip-arrow-size:            6px !default;
+$plyr-tooltip-radius:                3px !default;

 // Progress
-$plyr-progress-bg:               transparentize($plyr-gray, .2) !default;
-$plyr-progress-playing-bg:       $plyr-blue !default;
-$plyr-progress-buffered-bg:      transparentize($plyr-gray, .25) !default;
-$plyr-progress-loading-size:     40px !default;
-$plyr-progress-loading-bg:       transparentize(#000, .15) !default;
+$plyr-progress-bg:                   transparentize($plyr-gray, .2) !default;
+$plyr-progress-playing-bg:           $plyr-blue !default;
+$plyr-progress-buffered-bg:          transparentize($plyr-gray, .25) !default;
+$plyr-progress-loading-size:         40px !default;
+$plyr-progress-loading-bg:           transparentize(#000, .15) !default;

 // Volume
-$plyr-volume-track-height:       6px !default;
-$plyr-volume-track-bg:           darken($plyr-controls-bg, 10%) !default;
-$plyr-volume-thumb-height:       ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-width:        ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-bg:           $plyr-control-color !default;
-$plyr-volume-thumb-bg-focus:     $plyr-control-bg-hover !default;
+$plyr-volume-track-height:           6px !default;
+$plyr-volume-track-bg:               darken($plyr-controls-bg, 10%) !default;
+$plyr-volume-thumb-height:           ($plyr-volume-track-height * 2) !default;
+$plyr-volume-thumb-width:            ($plyr-volume-track-height * 2) !default;
+$plyr-volume-thumb-bg:               $plyr-control-color !default;
+$plyr-volume-thumb-bg-focus:         $plyr-control-bg-hover !default;

 // Breakpoints
-$plyr-bp-control-split:          560px !default; // When controls split into left/right
-$plyr-bp-captions-large:         768px !default; // When captions jump to the larger font size
+$plyr-bp-control-split:              560px !default; // When controls split into left/right
+$plyr-bp-captions-large:             768px !default; // When captions jump to the larger font size

 // Animation
 // ---------------------------------------
@ -167,6 +167,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
        vertical-align: middle;
    }

+    // Hide default captions
+    video::-webkit-media-text-track-container {
+        display: none;
+    }
+
    // For embeds
    &__video-embed {
        padding-bottom: 56.25%; /* 16:9 */
@ -182,7 +187,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
@ -191,6 +195,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
@ -363,7 +372,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
            $plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
            bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
            border-right: $plyr-border-arrow-size solid transparent;
-            border-top: $plyr-border-arrow-size solid $plyr-tooltip-border-color;
+            border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color;
            border-left: $plyr-border-arrow-size solid transparent;
            z-index: 1;
        }
Author	SHA1	Message	Date
Sam Potts	cd83a2670b	Cancel requests on source change (Fixes #174 )	2016-02-28 12:50:34 +11:00
Sam Potts	1bbc47c64f	CustomEvent polyfill (Fixes #172 )	2016-02-28 11:22:11 +11:00
Sam Potts	7a1a5830aa	Remove version from source	2016-02-25 19:36:14 +11:00
Sam Potts	1ecbec4044	Volume storage fix (Fixes #171 )	2016-02-25 19:35:03 +11:00
Sam Potts	ab329b99df	Merge branch 'master' of github.com:selz/plyr	2016-02-23 15:11:48 +11:00
Sam Potts	54af43dd75	Docs code	2016-02-23 15:11:35 +11:00
Sam Potts	188a2e72eb	Update readme.md	2016-02-21 14:34:49 +11:00
Sam Potts	b7a14be2ac	Removed npm log	2016-02-21 14:33:34 +11:00
Sam Potts	c99f20d5d8	Fix for manual captions	2016-02-21 14:28:01 +11:00
Sam Potts	5b968c97f4	v1.5.12	2016-02-21 14:07:17 +11:00
Sam Potts	d538cdcdf6	1.5.12	2016-02-21 14:04:49 +11:00
Sam Potts	cad142fe85	Merge branch 'master' of github.com:selz/plyr # Conflicts: # src/js/plyr.js	2016-02-21 14:04:13 +11:00
Sam Potts	b18ed03384	WIP on captions bug, manual duration option, reset media object	2016-02-21 13:17:30 +11:00
Sam Potts	6a0b3dc823	Merge pull request #168 from gurupras/fix-captions Fixes for captions	2016-02-21 11:28:15 +11:00
Guru Prasad Srinivasa	402c45ee2b	Updated manual caption split pattern Previously, Plyr was using a fixed pattern of '\n\n' to split contents into captions. This does not always work as some VTT files contain '\r\n'. This commit checks for both.	2016-02-16 20:17:10 -05:00
Guru Prasad Srinivasa	67f19166ac	Some WebVTT fixes to allow manual captions WebVTT allows additional parameters along with the line that contains the start and end times. These were not being filtered out while attempting to manually display captions.	2016-02-16 19:52:08 -05:00
Sam Potts	32b7b6b886	Merge pull request #167 from ivanvermeyen/patch-1 Allow player control colors to be overridden #158	2016-02-15 11:50:38 +11:00
Sam Potts	96df8fbc85	Update readme.md	2016-02-14 14:04:30 +11:00
Sam Potts	e742527e65	Version bump	2016-02-13 22:23:11 +11:00
Sam Potts	f426af6e9e	1.5.11	2016-02-13 22:19:48 +11:00
Sam Potts	aea86b6124	Merge branch 'master' of github.com:selz/plyr # Conflicts: # dist/plyr.js	2016-02-13 22:19:31 +11:00
Sam Potts	ce51344269	iOS fix (Fixes #166 ), Edge Progress Tip (Fixes #160 ), SASS fix (Fixes #158 )	2016-02-13 22:18:42 +11:00
Ivan Vermeyen	7d0311fd64	Allow player control colors to be overridden #158	2016-02-12 17:11:07 +01:00
Sam Potts	89e000f669	Update readme.md	2016-02-09 14:53:57 +11:00
Sam Potts	f341f1264d	Update readme.md	2016-02-09 14:53:20 +11:00
Sam Potts	c687b867e7	Update readme.md	2016-02-09 14:52:37 +11:00
Sam Potts	4ee31ba661	Update readme.md	2016-02-09 14:40:26 +11:00
Sam Potts	a9126a4c82	Update readme.md	2016-02-05 00:02:24 +11:00
Sam Potts	6b70c4b49a	Update readme.md	2016-02-04 14:59:59 +11:00
Sam Potts	d8fb876c81	Update readme.md	2016-02-04 14:58:00 +11:00
Sam Potts	73e6ad610f	Merge pull request #156 from mortonfox/patch-1 Fix the svgfixer.js link	2016-02-02 09:35:31 +11:00
Morton Fox	eee7553d09	Fix the svgfixer.js link	2016-02-01 16:14:22 -05:00
Sam Potts	130b5ebedf	Update readme.md	2016-01-29 10:25:39 +11:00
Sam Potts	dae5fb9785	Merge pull request #154 from marvinhagemeister/fix_window_usage Get the proper reference to window on initialization.	2016-01-28 09:19:25 +11:00
Marvin Hagemeister	31a0eb8d14	Get the proper window reference on initialization. The previous code assumed that `this` points to the browsers window object, which is not the case when using a module bundler. So we check for the variable `window` first, before falling back to `this`. (taken from jQuery's codebase)	2016-01-27 21:27:58 +01:00
Sam Potts	b8b611fbb6	Merge pull request #152 from marvinhagemeister/fix_commonjs Swap CommonJS and AMD module check so that CommonJS is checked first	2016-01-27 08:45:10 +11:00
Marvin Hagemeister	a285fcc4ec	Check for module.exports as well for CommonJS Modules	2016-01-26 17:05:57 +01:00
Marvin Hagemeister	4fda65c862	Swap CommonJS and AMD module check so that CommonJS is checked first. Fixes Webpack module bundling	2016-01-26 16:53:15 +01:00