More bug fixes

changelog.md

@@ -1,4 +1,4 @@
-## v3.1.1
+## v3.2.0
 
 *   Fullscreen fixes (thanks @friday)
 *   Menu fix for if speed not in config
@@ -7,7 +7,10 @@
 *   Safer check for active caption (thanks @Antonio-Laguna)
 *   Add custom property fallback (thanks @friday)
 *   Fixed bug for captions with no srclang and labels and improved logic (fixes #875)
-*   Fix for `playing` false positive
+*   Fix for `playing` false positive (fixes #898)
+*   Fix for IE issue with navigator.language (thanks @nicolasthy) (fixes #893)
+*   Fix for Vimeo controls missing on iOS (thanks @verde-io) (fixes #807)
+*   Fix for double vimeo caption rendering (fixes #877)
 
 ## v3.1.0
 

demo/dist/demo.js

@@ -4010,7 +4010,7 @@ singleton.Client = Client;
             });
 
             // Setup the player
-            var player = new Plyr('video', {
+            var player = new Plyr('#player', {
                 debug: true,
                 title: 'View From A Blue Moon',
                 iconUrl: '../dist/plyr.svg',
@@ -4020,7 +4020,6 @@ singleton.Client = Client;
                 tooltips: {
                     controls: true
                 },
-                settings: ['captions'],
                 /* controls: [
                     'play-large',
                     'restart',

demo/src/js/demo.js

@@ -47,7 +47,7 @@ import Raven from 'raven-js';
             });
 
             // Setup the player
-            const player = new Plyr('video', {
+            const player = new Plyr('#player', {
                 debug: true,
                 title: 'View From A Blue Moon',
                 iconUrl: '../dist/plyr.svg',
@@ -57,7 +57,6 @@ import Raven from 'raven-js';
                 tooltips: {
                     controls: true,
                 },
-                settings: ['captions'],
                 /* controls: [
                     'play-large',
                     'restart',

dist/plyr.js

@@ -1704,16 +1704,16 @@ var support = {
 
     // Check for support
     // Basic functionality vs full UI
-    check: function check(type, provider, inline) {
+    check: function check(type, provider, playsinline) {
         var api = false;
         var ui = false;
         var browser = utils.getBrowser();
-        var playsInline = browser.isIPhone && inline && support.inline;
+        var canPlayInline = browser.isIPhone && playsinline && support.playsinline;
 
         switch (provider + ':' + type) {
             case 'html5:video':
                 api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             case 'html5:audio':
@@ -1724,7 +1724,7 @@ var support = {
             case 'youtube:video':
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             default:
@@ -1752,7 +1752,7 @@ var support = {
 
     // Inline playback support
     // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    inline: 'playsInline' in document.createElement('video'),
+    playsinline: 'playsInline' in document.createElement('video'),
 
     // Check for mime type support against a player instance
     // Credits: http://diveintohtml5.info/everything.html
@@ -3485,6 +3485,11 @@ var controls = {
             list = pane && pane.querySelector('ul');
         }
 
+        // If there's no list it means it's not been rendered...
+        if (!utils.is.element(list)) {
+            return;
+        }
+
         // Update the label
         var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
         label.innerHTML = controls.getLabel.call(this, setting, value);
@@ -6040,10 +6045,14 @@ var vimeo = {
     setAspectRatio: function setAspectRatio(input) {
         var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         var padding = 100 / ratio[0] * ratio[1];
+        this.elements.wrapper.style.paddingBottom = padding + '%';
+
+        if (this.supported.ui) {
             var height = 240;
             var offset = (height - padding) / (height / 50);
-        this.elements.wrapper.style.paddingBottom = padding + '%';
+
             this.media.style.transform = 'translateY(-' + offset + '%)';
+        }
     },
 
 
@@ -6062,7 +6071,8 @@ var vimeo = {
             title: false,
             speed: true,
             transparent: 0,
-            gesture: 'media'
+            gesture: 'media',
+            playsinline: !this.config.fullscreen.iosNative
         };
         var params = utils.buildUrlParams(options);
 
@@ -6096,6 +6106,11 @@ var vimeo = {
         player.media.paused = true;
         player.media.currentTime = 0;
 
+        // Disable native text track rendering
+        if (player.supported.ui) {
+            player.embed.disableTextTrack();
+        }
+
         // Create a faux HTML5 API using the Vimeo API
         player.media.play = function () {
             player.embed.play().then(function () {
@@ -6465,7 +6480,7 @@ var source = {
             _this2.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
 
             // Check for support
-            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.inline);
+            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.playsinline);
 
             // Create new markup
             switch (_this2.provider + ':' + _this2.type) {
@@ -6513,7 +6528,7 @@ var source = {
                 if (_this2.config.muted) {
                     _this2.media.setAttribute('muted', '');
                 }
-                if (_this2.config.inline) {
+                if (_this2.config.playsinline) {
                     _this2.media.setAttribute('playsinline', '');
                 }
             }
@@ -6717,12 +6732,17 @@ var Plyr = function () {
                         if (truthy.includes(params.autoplay)) {
                             this.config.autoplay = true;
                         }
-                        if (truthy.includes(params.playsinline)) {
-                            this.config.inline = true;
-                        }
                         if (truthy.includes(params.loop)) {
                             this.config.loop.active = true;
                         }
+
+                        // TODO: replace fullscreen.iosNative with this playsinline config option
+                        // YouTube requires the playsinline in the URL
+                        if (this.isYouTube) {
+                            this.config.playsinline = truthy.includes(params.playsinline);
+                        } else {
+                            this.config.playsinline = true;
+                        }
                     }
                 } else {
                     // <div> with attributes
@@ -6756,7 +6776,7 @@ var Plyr = function () {
                     this.config.autoplay = true;
                 }
                 if (this.media.hasAttribute('playsinline')) {
-                    this.config.inline = true;
+                    this.config.playsinline = true;
                 }
                 if (this.media.hasAttribute('muted')) {
                     this.config.muted = true;
@@ -6773,7 +6793,7 @@ var Plyr = function () {
         }
 
         // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.inline);
+        this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
         // If no support for even API, bail
         if (!this.supported.api) {

dist/plyr.polyfilled.js

@@ -7638,16 +7638,16 @@ var support = {
 
     // Check for support
     // Basic functionality vs full UI
-    check: function check(type, provider, inline) {
+    check: function check(type, provider, playsinline) {
         var api = false;
         var ui = false;
         var browser = utils.getBrowser();
-        var playsInline = browser.isIPhone && inline && support.inline;
+        var canPlayInline = browser.isIPhone && playsinline && support.playsinline;
 
         switch (provider + ':' + type) {
             case 'html5:video':
                 api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             case 'html5:audio':
@@ -7658,7 +7658,7 @@ var support = {
             case 'youtube:video':
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             default:
@@ -7686,7 +7686,7 @@ var support = {
 
     // Inline playback support
     // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    inline: 'playsInline' in document.createElement('video'),
+    playsinline: 'playsInline' in document.createElement('video'),
 
     // Check for mime type support against a player instance
     // Credits: http://diveintohtml5.info/everything.html
@@ -9419,6 +9419,11 @@ var controls = {
             list = pane && pane.querySelector('ul');
         }
 
+        // If there's no list it means it's not been rendered...
+        if (!utils.is.element(list)) {
+            return;
+        }
+
         // Update the label
         var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
         label.innerHTML = controls.getLabel.call(this, setting, value);
@@ -11974,10 +11979,14 @@ var vimeo = {
     setAspectRatio: function setAspectRatio(input) {
         var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         var padding = 100 / ratio[0] * ratio[1];
+        this.elements.wrapper.style.paddingBottom = padding + '%';
+
+        if (this.supported.ui) {
             var height = 240;
             var offset = (height - padding) / (height / 50);
-        this.elements.wrapper.style.paddingBottom = padding + '%';
+
             this.media.style.transform = 'translateY(-' + offset + '%)';
+        }
     },
 
 
@@ -11996,7 +12005,8 @@ var vimeo = {
             title: false,
             speed: true,
             transparent: 0,
-            gesture: 'media'
+            gesture: 'media',
+            playsinline: !this.config.fullscreen.iosNative
         };
         var params = utils.buildUrlParams(options);
 
@@ -12030,6 +12040,11 @@ var vimeo = {
         player.media.paused = true;
         player.media.currentTime = 0;
 
+        // Disable native text track rendering
+        if (player.supported.ui) {
+            player.embed.disableTextTrack();
+        }
+
         // Create a faux HTML5 API using the Vimeo API
         player.media.play = function () {
             player.embed.play().then(function () {
@@ -12399,7 +12414,7 @@ var source = {
             _this2.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
 
             // Check for support
-            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.inline);
+            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.playsinline);
 
             // Create new markup
             switch (_this2.provider + ':' + _this2.type) {
@@ -12447,7 +12462,7 @@ var source = {
                 if (_this2.config.muted) {
                     _this2.media.setAttribute('muted', '');
                 }
-                if (_this2.config.inline) {
+                if (_this2.config.playsinline) {
                     _this2.media.setAttribute('playsinline', '');
                 }
             }
@@ -12651,12 +12666,17 @@ var Plyr = function () {
                         if (truthy.includes(params.autoplay)) {
                             this.config.autoplay = true;
                         }
-                        if (truthy.includes(params.playsinline)) {
-                            this.config.inline = true;
-                        }
                         if (truthy.includes(params.loop)) {
                             this.config.loop.active = true;
                         }
+
+                        // TODO: replace fullscreen.iosNative with this playsinline config option
+                        // YouTube requires the playsinline in the URL
+                        if (this.isYouTube) {
+                            this.config.playsinline = truthy.includes(params.playsinline);
+                        } else {
+                            this.config.playsinline = true;
+                        }
                     }
                 } else {
                     // <div> with attributes
@@ -12690,7 +12710,7 @@ var Plyr = function () {
                     this.config.autoplay = true;
                 }
                 if (this.media.hasAttribute('playsinline')) {
-                    this.config.inline = true;
+                    this.config.playsinline = true;
                 }
                 if (this.media.hasAttribute('muted')) {
                     this.config.muted = true;
@@ -12707,7 +12727,7 @@ var Plyr = function () {
         }
 
         // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.inline);
+        this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
         // If no support for even API, bail
         if (!this.supported.api) {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",

src/js/controls.js

@@ -581,6 +581,11 @@ const controls = {
             list = pane && pane.querySelector('ul');
         }
 
+        // If there's no list it means it's not been rendered...
+        if (!utils.is.element(list)) {
+            return;
+        }
+
         // Update the label
         const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
         label.innerHTML = controls.getLabel.call(this, setting, value);

src/js/plugins/vimeo.js

@@ -35,10 +35,14 @@ const vimeo = {
     setAspectRatio(input) {
         const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         const padding = 100 / ratio[0] * ratio[1];
+        this.elements.wrapper.style.paddingBottom = `${padding}%`;
+
+        if (this.supported.ui) {
             const height = 240;
             const offset = (height - padding) / (height / 50);
-        this.elements.wrapper.style.paddingBottom = `${padding}%`;
+
             this.media.style.transform = `translateY(-${offset}%)`;
+        }
     },
 
     // API Ready
@@ -55,6 +59,7 @@ const vimeo = {
             speed: true,
             transparent: 0,
             gesture: 'media',
+            playsinline: !this.config.fullscreen.iosNative,
         };
         const params = utils.buildUrlParams(options);
 
@@ -88,6 +93,11 @@ const vimeo = {
         player.media.paused = true;
         player.media.currentTime = 0;
 
+        // Disable native text track rendering
+        if (player.supported.ui) {
+            player.embed.disableTextTrack();
+        }
+
         // Create a faux HTML5 API using the Vimeo API
         player.media.play = () => {
             player.embed.play().then(() => {

src/js/plyr.js

@@ -185,12 +185,17 @@ class Plyr {
                         if (truthy.includes(params.autoplay)) {
                             this.config.autoplay = true;
                         }
-                        if (truthy.includes(params.playsinline)) {
-                            this.config.inline = true;
-                        }
                         if (truthy.includes(params.loop)) {
                             this.config.loop.active = true;
                         }
+
+                        // TODO: replace fullscreen.iosNative with this playsinline config option
+                        // YouTube requires the playsinline in the URL
+                        if (this.isYouTube) {
+                            this.config.playsinline = truthy.includes(params.playsinline);
+                        } else {
+                            this.config.playsinline = true;
+                        }
                     }
                 } else {
                     // <div> with attributes
@@ -224,7 +229,7 @@ class Plyr {
                     this.config.autoplay = true;
                 }
                 if (this.media.hasAttribute('playsinline')) {
-                    this.config.inline = true;
+                    this.config.playsinline = true;
                 }
                 if (this.media.hasAttribute('muted')) {
                     this.config.muted = true;
@@ -241,7 +246,7 @@ class Plyr {
         }
 
         // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.inline);
+        this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
         // If no support for even API, bail
         if (!this.supported.api) {

src/js/source.js

@@ -55,7 +55,7 @@ const source = {
                 this.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
 
                 // Check for support
-                this.supported = support.check(this.type, this.provider, this.config.inline);
+                this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
                 // Create new markup
                 switch (`${this.provider}:${this.type}`) {
@@ -103,7 +103,7 @@ const source = {
                     if (this.config.muted) {
                         this.media.setAttribute('muted', '');
                     }
-                    if (this.config.inline) {
+                    if (this.config.playsinline) {
                         this.media.setAttribute('playsinline', '');
                     }
                 }

src/js/support.js

@@ -12,16 +12,16 @@ const support = {
 
     // Check for support
     // Basic functionality vs full UI
-    check(type, provider, inline) {
+    check(type, provider, playsinline) {
         let api = false;
         let ui = false;
         const browser = utils.getBrowser();
-        const playsInline = browser.isIPhone && inline && support.inline;
+        const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
 
         switch (`${provider}:${type}`) {
             case 'html5:video':
                 api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             case 'html5:audio':
@@ -32,7 +32,7 @@ const support = {
             case 'youtube:video':
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             default:
@@ -59,7 +59,7 @@ const support = {
 
     // Inline playback support
     // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    inline: 'playsInline' in document.createElement('video'),
+    playsinline: 'playsInline' in document.createElement('video'),
 
     // Check for mime type support against a player instance
     // Credits: http://diveintohtml5.info/everything.html

src/sass/components/embed.scss

@@ -3,14 +3,12 @@
 // YouTube, Vimeo, etc
 // --------------------------------------------------------------
 
-.plyr__video-embed {
+// Default to 16:9 ratio but this is set by JavaScript based on config
-    // Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
-    $padding: ((100 / 16) * 9);
-    $height: 240;
-    $offset: to-percentage(($height - $padding) / ($height / 50));
 
+.plyr__video-embed {
     height: 0;
-    padding-bottom: to-percentage($padding);
+    padding-bottom: to-percentage($embed-padding);
     position: relative;
 
     iframe {
@@ -22,6 +20,17 @@
         user-select: none;
         width: 100%;
     }
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // To allow mouse events to be captured if full support
+    iframe {
+        pointer-events: none;
+    }
 
     // Vimeo hack
     > div {
@@ -30,7 +39,3 @@
         transform: translateY(-$offset);
     }
 }
-// To allow mouse events to be captured if full support
-.plyr--full-ui .plyr__video-embed iframe {
-    pointer-events: none;
-}