Version bump to 2.0.12

allow for setting additional listener for captions

.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,6 +16,12 @@
 - Operating System:
 - Version: 
 
+Players affected:
+- [ ] HTML5 Video
+- [ ] HTML5 Audio
+- [ ] YouTube
+- [ ] Vimeo
+
 ### Steps to reproduce 
 - 
 

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)

demo/index.html

@@ -51,7 +51,7 @@
                 </ul>
             </nav>
             <section>
-                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
+                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
                     <!-- Video files -->
                     <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
                     <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
@@ -66,8 +66,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>

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",

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)
@@ -31,11 +33,12 @@ Oh and yes, it works with Bootstrap.
 Check out the [changelog](changelog.md) to see what's new with Plyr.
 
 ## Features currently being developed
-- Playback speed (#53)
-- Quality selection (#218)
-- Caption language selection (#385)
+- Playback speed selection
+- Quality selection 
+- Caption language selection
 - AirPlay
-- Picture in Picture (MacOS Sierra + Safari) (#366)
+- Picture in Picture (MacOS Sierra + Safari)
+
 [more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)
 
 ## Planned features
@@ -131,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
@@ -144,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
 
@@ -283,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>
@@ -1012,7 +1021,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:
 
@@ -1032,6 +1041,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/)
@@ -1066,5 +1079,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).

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.10
+// plyr.js v2.0.12
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -43,7 +43,8 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.10/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.12/plyr.svg',
+        blankUrl:               'https://cdn.selz.com/plyr/blank.mp4',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
@@ -257,6 +258,7 @@
             isChrome:   isChrome,
             isSafari:   isSafari,
             isIos:      /(iPad|iPhone|iPod)/g.test(navigator.platform),
+            isIphone:   /(iPhone|iPod)/g.test(navigator.userAgent),
             isTouch:    'ontouchstart' in document.documentElement
         };
     }
@@ -1489,7 +1491,7 @@
                 _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
 
                 // Add iOS class
-                _toggleClass(plyr.ontainer, config.classes.isIos, plyr.browser.isIos);
+                _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos);
 
                 // Add touch class
                 _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
@@ -3064,7 +3066,7 @@
             }
 
             // Captions
-            _on(plyr.buttons.captions, 'click', _toggleCaptions);
+            _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions);
 
             // Seek tooltip
             _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
@@ -3216,7 +3218,7 @@
             // Set blank video src attribute
             // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
             // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
-            plyr.media.setAttribute('src', 'https://cdn.selz.com/plyr/blank.mp4');
+            plyr.media.setAttribute('src', config.blankUrl);
 
             // Load the new empty source
             // This will cancel existing requests
@@ -3257,7 +3259,7 @@
                     plyr.embed.unload().then(cleanUp);
 
                     // Vimeo does not always return
-                    window.setTimeout(cleanUp, 200);
+                    timers.cleanUp = window.setTimeout(cleanUp, 200);
 
                     break;
 
@@ -3273,6 +3275,8 @@
             }
 
             function cleanUp() {
+                clearTimeout(timers.cleanUp);
+
                 // Default to restore original element
                 if (!_is.boolean(restore)) {
                     restore = true;
@@ -3294,6 +3298,9 @@
                 // Replace the container with the original element provided
                 plyr.container.parentNode.replaceChild(original, plyr.container);
 
+                // Allow overflow (set on fullscreen)
+                document.body.style.overflow = '';
+
                 // Event
                 _triggerEvent(original, 'destroyed', true);
             }
@@ -3540,31 +3547,48 @@
         var browser     = _browserSniff(),
             isOldIE     = (browser.isIE && browser.version <= 9),
             isIos       = browser.isIos,
-            isIphone    = /iPhone|iPod/i.test(navigator.userAgent),
-            audio       = !!document.createElement('audio').canPlayType,
-            video       = !!document.createElement('video').canPlayType,
-            basic, full;
+            isIphone    = browser.isIphone,
+            audioSupport = !!document.createElement('audio').canPlayType,
+            videoSupport = !!document.createElement('video').canPlayType,
+            basic       = false,
+            full        = false;
 
         switch (type) {
             case 'video':
-                basic = video;
+                basic = videoSupport;
                 full  = (basic && (!isOldIE && !isIphone));
                 break;
 
             case 'audio':
-                basic = audio;
+                basic = audioSupport;
                 full  = (basic && !isOldIE);
                 break;
 
+            // Vimeo does not seem to be supported on iOS via API
+            // Issue raised https://github.com/vimeo/player.js/issues/87
             case 'vimeo':
-            case 'youtube':
-            case 'soundcloud':
                 basic = true;
                 full = (!isOldIE && !isIos);
                 break;
 
+            case 'youtube':
+                basic = true;
+                full = (!isOldIE && !isIos);
+
+                // YouTube seems to work on iOS 10+ on iPad
+                if (isIos && !isIphone && browser.version >= 10) {
+                    full = true;
+                }
+
+                break;
+
+            case 'soundcloud':
+                basic = true;
+                full  = (!isOldIE && !isIphone);
+                break;
+
             default:
-                basic = (audio && video);
+                basic = (audioSupport && videoSupport);
                 full  = (basic && !isOldIE);
         }
 

src/less/plyr.less

@@ -179,9 +179,10 @@
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
-    overflow: hidden;
+    border-radius: inherit;
 
-    // Require z-index to force border-radius
+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
     z-index: 0;
 
     iframe {
@@ -192,7 +193,6 @@
         height: 100%;
         border: 0;
         user-select: none;
-        z-index: 1;
     }
 
     // Vimeo hack
@@ -341,6 +341,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, 50%));
     border-bottom-left-radius: inherit;
@@ -740,6 +741,10 @@
         height: 100%;
         width: 100%;
     }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
     .plyr__controls {
         position: absolute;
         bottom: 0;

src/scss/plyr.scss

@@ -178,10 +178,10 @@
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
-    overflow: hidden;
     border-radius: inherit;
 
-    // Require z-index to force border-radius
+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
     z-index: 0;
 
     iframe {
@@ -738,6 +738,10 @@
         height: 100%;
         width: 100%;
     }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
     .plyr__controls {
         position: absolute;
         bottom: 0;