Merge branch 'master' into develop

# Conflicts: # dist/plyr.css # dist/plyr.js # src/js/plyr.js # src/less/plyr.less # src/scss/plyr.scss
2017-03-25 11:24:38 +11:00 · 2017-03-25 11:24:38 +11:00 · b083bf4297
commit b083bf4297
parent ebc7ed538a 4957e4d80c
10 changed files with 76 additions and 26 deletions
--- a/.github/issue_template.md
+++ b/.github/issue_template.md
@ -1,3 +1,7 @@
+<!--- 
+Please use this issue template as it makes replicating and fixing the issue easier! 
+--->
+
 - [ ] Issue does not already exist
 - [ ] Issue observed on https://plyr.io

@ -12,7 +16,13 @@
 - Operating System:
 - Version: 

+Players affected:
+- [ ] HTML5 Video
+- [ ] HTML5 Audio
+- [ ] YouTube
+- [ ] Vimeo
+
 ### Steps to reproduce 
 - 

-### Relevant links
+### Relevant links
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,13 @@
 # Changelog

+## v2.0.12
+- Ability to set custom `blankUrl` for source changes (https://github.com/Selz/plyr/pull/504)
+- Ability to set caption button listener (https://github.com/Selz/plyr/pull/468)
+
+## v2.0.11
+- Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)
+- Fix for YouTube controls on iPad (fixes #391)
+
 ## v2.0.10
 - Added seek event fixes for Vimeo and YouTube (fixes #409)
 - Added support for embed URLs rather than ID only (fixes #345)
@ -21,10 +29,10 @@

 ## v2.0.6
 - Fixed merge issue with `Updated define to work with AMD imports #326` PR
- Code formatting 
+- Code formatting

 ## v2.0.5
- Fix for Vimeo in IE9 & IE10 
+- Fix for Vimeo in IE9 & IE10
 - Fix for HTML5 elements not firing `ready` event

 ## v2.0.4
@ -44,8 +52,8 @@ This version contains several potential ***breaking changes***:

 - `setup()` has been reverted to pre v1.8.0 behaviour; meaning it will return the *instance* rather than the *element*. This is because the reference to the instance is no longer added to the original element (see below).
 - The reference to the `plyr` instance is now added to the media element rather than original container. This is because if a container with multiple children was passed to `setup()` the references to all instances would have been added to the container, creating issues. I would recommend using the return value from `setup()` or the new `get()` method to access the instance.
- Players will always be wrapped in their own div now - this makes `setup()` and `destroy()` cleaner. This *may* break any custom styling based on DOM position. 
- Players no longer seek to 0 on 'ended' - this is to fix a bug with Microsoft Edge as it triggers 'ended' on media change for whatever reason. They'll never change ;-) 
+- Players will always be wrapped in their own div now - this makes `setup()` and `destroy()` cleaner. This *may* break any custom styling based on DOM position.
+- Players no longer seek to 0 on 'ended' - this is to fix a bug with Microsoft Edge as it triggers 'ended' on media change for whatever reason. They'll never change ;-)

 And some other changes and bug fixes:

@ -75,7 +83,7 @@ And some other changes and bug fixes:

 ## v1.8.11
 - Fix for keyboard navigation on Vimeo (Fixes #317)
- Fix for bug introduced in v1.8.9 related to additional controls 
+- Fix for bug introduced in v1.8.9 related to additional controls
 - Vimeo API upgrade
 - Fix for YouTube bug introduced in v1.8.9
 - Added support for passing array to .setup() (Fixes #319)
@ -115,20 +123,20 @@ And some other changes and bug fixes:
 - Improvements for controls hiding and showing on touch devices

 ## v1.8.2
- Fixed event bubbling 
+- Fixed event bubbling

 ## v1.8.1
 - Fixed inaccurate log message

 # v1.8.0
 - ***(Important)*** `setup()` now returns the element Plyr was setup on rather than the `plyr` object. This means `var player = plyr.setup()[0];` would now be `var player = plyr.setup()[0].plyr;`. This improves support for React and other virtual dom frameworks as mentioned in #254
- Fixed using a relative URL for `iconUrl` in IE (fixes #269) 
+- Fixed using a relative URL for `iconUrl` in IE (fixes #269)

 # v1.7.0
 - SASS cleanup (fixes #265)
 - Docs tidy up to help quick start (fixes #253)
 - Fix for issues with data attribute options passing (fixes #257)
- ***(Important)*** Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `<video>`, `<audio>` and `[data-type]` elements. If you are just calling `setup()` with a `<div class="plyr">` you may want to give it a good test after upgrading. You can probably remove the wrapper div. The reason behind this is to make setup easier for newcomers and prevent the styling being used on unsupported players (because the plyr classname was used as a CSS and JS hook - which isn't ideal) 
+- ***(Important)*** Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `<video>`, `<audio>` and `[data-type]` elements. If you are just calling `setup()` with a `<div class="plyr">` you may want to give it a good test after upgrading. You can probably remove the wrapper div. The reason behind this is to make setup easier for newcomers and prevent the styling being used on unsupported players (because the plyr classname was used as a CSS and JS hook - which isn't ideal)
 - Renamed the 'docs' folder to `demo` to avoid confusion - the readme is the docs after all

 ## v1.6.20
@ -158,7 +166,7 @@ And some other changes and bug fixes:
 - Decreased sensitivity and inverted scroll on volume slider (scroll up to increase, down to decrease)

 ## v1.6.12
- Fix for undefined buffer error 
+- Fix for undefined buffer error
 - Add scroll listener on volume slider (PR #227 bty @igoradamenko)

 ## v1.6.11
@ -200,13 +208,13 @@ And some other changes and bug fixes:
 - Other minor bug fixes

 ## v1.6.1
- Tooltip changes for accessibility 
+- Tooltip changes for accessibility

 ## v1.6.0
 - New, cleaner, UI:
 	- Controls are now overlaid, maintaining the video's ratio and making sizing easier
 	- A large play button can now be overlaid over videos
-	- Default number of control buttons reduced 
+	- Default number of control buttons reduced
 	- New play, pause, rewind and fast forward icons
 	- Flexbox all the things!
 - Tidied up the LESS (and SCSS) as part of the above, variables and mixins in seprate files amking customization and upgrades easier
--- a/demo/index.html
+++ b/demo/index.html
@ -67,8 +67,8 @@
                <ul>
                    <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
                    <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
-                    <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
-                    <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small>
+                    <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
+                    <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
                </ul>
            </section>
        </main>
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "2.0.10",
+  "version": "2.0.12",
  "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,6 +1,8 @@
 # Plyr
 A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

+[Donate to support Plyr](#donate)
+
 [Checkout the demo](https://plyr.io)

 [![Image of Plyr](https://cdn.selz.com/plyr/plyr_v1.8.9.png)](https://plyr.io)
@ -132,10 +134,10 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 <script>plyr.setup();</script>
 ```

-If you want to use our CDN for the JavaScript, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:

 ```html
-<script src="https://cdn.plyr.io/2.0.10/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.12/plyr.js"></script>
 ```

 ### CSS
@ -145,14 +147,14 @@ Include the `plyr.css` stylsheet into your `<head>`
 <link rel="stylesheet" href="path/to/plyr.css">
 ```

-If you want to use our CDN for the default CSS, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/2.0.10/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
 ```

 ### SVG Sprite
-The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.10/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.12/plyr.svg`.

 ## Advanced

@ -284,6 +286,12 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
      <td><code>plyr</code></td>
      <td>Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.</td>
    </tr>
+    <tr>
+      <td><code>blankUrl</code></td>
+      <td>String</td>
+      <td><code>https://cdn.selz.com/plyr/blank.mp4</code></td>
+      <td>Specify a URL or path to a blank video file used to properly cancel network requests. See <a href="https://github.com/Selz/plyr/issues/174">issue #174</a> for more info.</td>
+    </tr>
    <tr>
      <td><code>debug</code></td>
      <td>Boolean</td>
@ -1050,7 +1058,7 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http

 &sup2; Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported (v1.0.28+)

-&sup3; IE10 has no native fullscreen support, fallback can be used (see options)
+&sup3; IE10 has no native fullscreen support, fallback can be used (see [options](#options))

 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:

@ -1070,6 +1078,10 @@ If you find anything weird with Plyr, please let us know using the GitHub issues
 ## Author
 Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)

+## Donate
+Plyr costs money to run, not my time - I donate that for free but domains, hosting and more. Any help is appreciated...
+[Donate to support Plyr](https://www.paypal.me/pottsy/20usd)
+
 ## Mentions
 - [ProductHunt](https://www.producthunt.com/tech/plyr)
 - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
@ -1104,5 +1116,10 @@ Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
 - [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)

+## Thanks
+[![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/)
+
+Thanks to [Fastly](https://www.fastly.com/) for providing the CDN services. 
+
 ## Copyright and License
 [The MIT license](license.md).
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -3752,7 +3752,7 @@
            }

            // Captions
-            on(plyr.buttons.captions, 'click', toggleCaptions);
+            proxy(plyr.buttons.captions, 'click', config.listeners.captions, toggleCaptions);

            // Settings
            on(plyr.buttons.settings, 'click', function(event) {
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -198,7 +198,11 @@
 .plyr__video-embed {
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
+    border-radius: inherit;
+    // Require overflow and z-index to force border-radius
    overflow: hidden;
+    z-index: 0;
+

    iframe {
        position: absolute;
@ -208,7 +212,6 @@
        height: 100%;
        border: 0;
        user-select: none;
-        z-index: 1;
    }

    // Vimeo hack
@ -362,6 +365,7 @@
    left: 0;
    right: 0;
    bottom: 0;
+    z-index: 2;
    padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
    border-bottom-left-radius: inherit;
@ -921,6 +925,10 @@
        height: 100%;
        width: 100%;
    }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
    .plyr__controls {
        position: absolute;
        bottom: 0;
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@ -181,9 +181,12 @@
 .plyr__video-embed {
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
-    overflow: hidden;
    border-radius: inherit;

+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
+    z-index: 0;
+
    iframe {
        position: absolute;
        top: 0;
@ -741,6 +744,10 @@
        height: 100%;
        width: 100%;
    }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
    .plyr__controls {
        position: absolute;
        bottom: 0;