Merge branch 'master' of github.com:selz/plyr

Fix for embed property not being set
Update readme.md
2016-03-14 22:34:44 +11:00 · 2016-03-14 22:34:28 +11:00 · 2016-03-13 22:45:47 +11:00 · 2016-03-13 22:45:27 +11:00 · 2016-03-13 22:44:14 +11:00 · 2016-03-13 21:45:57 +11:00
14 changed files with 753 additions and 545 deletions
--- a/.gitignore
+++ b/.gitignore
@ -6,3 +6,4 @@ aws.json
 docs/index.dev.html
 *.mp4
 notes.txt
+npm-debug.log
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,42 @@
 # 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)
+- 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,7 +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'>--:--</span>",
+        "<span class='plyr__tooltip'>00:00</span>",
    "</div>",
    "<span class='plyr__controls--left'>",
        "<button type='button' data-plyr='restart'>",
@ -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'>--:--</span>",
+            "<span class='plyr__time--duration'>00:00</span>",
        "</span>",
    "</span>",
    "<span class='plyr__controls--right'>",
--- 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},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"));
+"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
@ -13,8 +13,7 @@ plyr.setup('.js-media-player', {
 	},
 	captions: {
 		defaultActive: 	true
-	},
-	duration: 100
+	}
 });

 // Setup shr
@ -117,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.11",
+  "version": "1.5.19",
  "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
@ -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,9 +25,10 @@ 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
+- Streaming
 - Playback speed
 - Playlists
 - Multiple language captions (with selection)
@ -37,12 +38,13 @@ Check out the [changelog](changelog.md) to see what's been new with Plyr.
 If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.

 ## Implementation
-
 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.10/plyr.js` to `https://cdn.plyr.io/1.5.10/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.19/plyr.js` to `https://cdn.plyr.io/1.5.19/plyr.js`

 ### Node Package Manager (NPM)
+[![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) 
+
 Using NPM, you can grab Plyr:
 ```
 npm install plyr
@ -50,6 +52,8 @@ npm install plyr
 [https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)

 ### Bower
+[![Bower version](https://badge.fury.io/bo/plyr.svg)](https://badge.fury.io/bo/plyr)
+
 If bower is your thang, you can grab Plyr using:
 ```
 bower install plyr
@ -69,11 +73,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.10/plyr.css">
-<script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.19/plyr.css">
+<script src="https://cdn.plyr.io/1.5.19/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.10/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.19/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 +167,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 +179,7 @@ More info on CORS here:
 Here's an example of a default setup:

 ```html
-<script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.19/plyr.js"></script>
 <script>plyr.setup();</script>
 ```

@ -200,7 +209,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>
@ -282,7 +291,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>
@ -475,15 +490,15 @@ Here's a list of the methods supported:
      <br><br>
      <strong>array</strong><br>
      <pre><code>.source([
-      	{ 
-      		src: "/path/to/video.webm", 
-      		type: "video/webm", 
-      		...more attributes... 
-      	}, 
-      	{ 
-      		src: "/path/to/video.mp4", 
-      		type: "video/mp4", 
-      		...more attributes... 
+      	{
+      		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.
@ -664,7 +679,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>
@ -748,6 +763,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>

@ -756,8 +776,8 @@ 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() {
-  /* Magic happens */
+document.querySelector('.js-plyr').addEventListener('ready', function() {
+	var player = event.target.plyr;
 });
 ```

@ -765,6 +785,28 @@ document.querySelector(".js-plyr").addEventListener("playing", function() {

 YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences.

+Plyr references a custom version of the Vimeo Froogaloop API as Vimeo have neglected to maintain the library and there were bugs with their version. You don't need to worry about including your own versions of the Vimeo or YouTube JavaScript APIs.
+
+The native API's can be accessed through the `embed` property of the plyr object. For example:
+
+```javascript
+document.querySelector('.js-plyr').addEventListener('ready', function() {
+	var player = event.target.plyr;
+
+	// YouTube
+	console.log(player.embed.getVideoData());
+
+	// Vimeo
+	console.log(player.embed.api('getColor'));
+});
+```
+
+More info on the respective API's here:
+[YouTube API Reference](https://developers.google.com/youtube/js_api_reference)
+[Vimeo API Reference](https://developer.vimeo.com/player/js-api#reference)
+
+*Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.
+
 ## Fullscreen

 Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `plyr-fullscreen` class to your container.
@ -831,6 +873,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 :-)

--- 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
 // ---------------------------------------
@ -129,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/
@ -166,6 +168,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 */
@ -366,7 +373,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;
        }
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -7,69 +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-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 !default;
+    $plyr-control-color:             $plyr-gray-light !default;
 }
@else {
-    $plyr-control-color: $plyr-gray-lighter !default;
+    $plyr-control-color:             $plyr-gray-lighter !default;
 }
@if lightness($plyr-control-bg-hover) >= 65% {
-    $plyr-control-color-hover: $plyr-gray !default;
+    $plyr-control-color-hover:       $plyr-gray !default;
 }
@else {
-    $plyr-control-color-hover: #fff !default;
+    $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%), .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;
+$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, .8) !default;
+$plyr-progress-playing-bg:           $plyr-blue !default;
+$plyr-progress-buffered-bg:          transparentize($plyr-gray, .75) !default;
+$plyr-progress-loading-size:         40px !default;
+$plyr-progress-loading-bg:           transparentize(#000, .85) !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
 // ---------------------------------------
@ -128,6 +130,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
    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/
@ -165,6 +168,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 */
@ -211,7 +219,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
        span {
            border-radius: 2px;
            padding: 3px 10px;
-            background: transparentize(#000, .9);
+            background: transparentize(#000, .1);
        }
        span:empty {
            display: none;
@ -236,7 +244,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
        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 {
@ -365,7 +373,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	33771ef8c0	Merge branch 'master' of github.com:selz/plyr	2016-03-14 22:34:44 +11:00
Sam Potts	b51a1684dc	Fix for embed property not being set	2016-03-14 22:34:28 +11:00
Sam Potts	ba9abdc1d3	Update readme.md	2016-03-13 22:45:47 +11:00
Sam Potts	6a8803ec9f	Update readme.md	2016-03-13 22:45:27 +11:00
Sam Potts	bcb5b981f9	Update readme.md	2016-03-13 22:44:14 +11:00
Sam Potts	5ea9e59d71	SASS fixes, docs changes (fixes #180 ), 'ready' event	2016-03-13 21:45:57 +11:00
Sam Potts	01b45e7d97	Merge branch 'master' of github.com:selz/plyr	2016-03-13 21:23:00 +11:00
Sam Potts	c41e5320c8	SASS fixes, Default font stack added	2016-03-13 21:22:51 +11:00
Sam Potts	426c0f5559	Merge pull request #181 from shakeelmohamed/bugfix/youtube-autoplay Dynamically set YouTube autoplay from config	2016-03-13 18:29:49 +11:00
Shakeel Mohamed	c636f0e69e	Dynamically set YouTube autoplay from config The YouTube autoplay doesn't work without this change.	2016-03-12 14:05:33 -08:00
Sam Potts	193103cb2d	Update readme.md	2016-03-07 23:18:56 +11:00
Sam Potts	f9c593d2f9	Update readme.md	2016-03-07 23:16:46 +11:00
Sam Potts	87d174ac2c	Bug fixes and native APIs exposed for embeds	2016-03-07 22:28:30 +11:00
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
Ivan Vermeyen	7d0311fd64	Allow player control colors to be overridden #158	2016-02-12 17:11:07 +01:00