v3.2.1

Show captions even if toggle button is omitted from controls

changelog.md

@@ -1,3 +1,9 @@
+## v3.2.1
+
+*   Accessibility improvements for the controls (part of #905 fixes)
+*   Fix for context menu showing on YouTube (thanks Anthony Recenello in Slack)
+*   Vimeo fix for their API not returning the right duration until playback begins (fixes #891)
+
 ## v3.2.0
 
 *   Fullscreen fixes (thanks @friday)

demo/dist/demo.js

@@ -4011,7 +4011,6 @@ singleton.Client = Client;
                     case types.youtube:
                         player.source = {
                             type: 'video',
-                            title: 'View From A Blue Moon',
                             sources: [{
                                 src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
                                 provider: 'youtube'

demo/index.html

@@ -141,7 +141,7 @@
                 </li>
                 <li class="plyr__cite plyr__cite--vimeo" hidden>
                     <small>
-                        <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
+                        <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
                         <span class="color--vimeo">
                             <svg class="icon" role="presentation">
                                 <title>Vimeo</title>

demo/src/js/demo.js

@@ -182,7 +182,6 @@ import Raven from 'raven-js';
                     case types.youtube:
                         player.source = {
                             type: 'video',
-                            title: 'View From A Blue Moon',
                             sources: [{
                                 src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
                                 provider: 'youtube',

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.1/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -2102,7 +2102,7 @@ var Fullscreen = function () {
         get: function get$$1() {
             // No prefix
             if (utils.is.function(document.exitFullscreen)) {
-                return false;
+                return '';
             }
 
             // Check for fullscreen support by vendor prefix
@@ -2414,11 +2414,6 @@ var captions = {
 
     // Display captions container and button (for initialization)
     show: function show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
-
         // Try to load the value from storage
         var active = this.storage.get('captions');
 
@@ -2940,10 +2935,6 @@ var browser$1 = utils.getBrowser();
 var controls = {
     // Webkit polyfill for lower fill range
     updateRangeFill: function updateRangeFill(target) {
-        // WebKit only
-        if (!browser$1.isWebkit) {
-            return;
-        }
 
         // Get range from event if event passed
         var range = utils.is.event(target) ? target.target : target;
@@ -2953,6 +2944,14 @@ var controls = {
             return;
         }
 
+        // Set aria value for https://github.com/sampotts/plyr/issues/905
+        range.setAttribute('aria-valuenow', range.value);
+
+        // WebKit only
+        if (!browser$1.isWebkit) {
+            return;
+        }
+
         // Set CSS custom property
         range.style.setProperty('--value', range.value / range.max * 100 + '%');
     },
@@ -2976,7 +2975,8 @@ var controls = {
         // Create <svg>
         var icon = document.createElementNS(namespace, 'svg');
         utils.setAttributes(icon, utils.extend(attributes, {
-            role: 'presentation'
+            role: 'presentation',
+            focusable: 'false'
         }));
 
         // Create the <use> to reference sprite
@@ -3158,6 +3158,7 @@ var controls = {
         // Seek label
         var label = utils.createElement('label', {
             for: attributes.id,
+            id: attributes.id + '-label',
             class: this.config.classNames.hidden
         }, i18n.get(type, this.config));
 
@@ -3168,7 +3169,13 @@ var controls = {
             max: 100,
             step: 0.01,
             value: 0,
-            autocomplete: 'off'
+            autocomplete: 'off',
+            // A11y fixes for https://github.com/sampotts/plyr/issues/905
+            role: 'slider',
+            'aria-labelledby': attributes.id + '-label',
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+            'aria-valuenow': 0
         }, attributes));
 
         this.elements.inputs[type] = input;
@@ -3188,7 +3195,9 @@ var controls = {
         var progress = utils.createElement('progress', utils.extend(utils.getAttributesFromSelector(this.config.selectors.display[type]), {
             min: 0,
             max: 100,
-            value: 0
+            value: 0,
+            role: 'presentation',
+            'aria-hidden': true
         }, attributes));
 
         // Create the label inside
@@ -4505,7 +4514,7 @@ var Listeners = function () {
 
             // Disable right click
             if (this.player.supported.ui && this.player.config.disableContextMenu) {
-                utils.on(this.player.media, 'contextmenu', function (event) {
+                utils.on(this.player.elements.wrapper, 'contextmenu', function (event) {
                     event.preventDefault();
                 }, false);
             }
@@ -6149,7 +6158,9 @@ var vimeo = {
                 utils.dispatchEvent.call(player, player.media, 'seeking');
 
                 // Seek after events
-                player.embed.setCurrentTime(time);
+                player.embed.setCurrentTime(time).catch(function () {
+                    // Do nothing
+                });
 
                 // Restore pause state
                 if (paused) {
@@ -6329,6 +6340,15 @@ var vimeo = {
             if (parseInt(data.percent, 10) === 1) {
                 utils.dispatchEvent.call(player, player.media, 'canplaythrough');
             }
+
+            // Get duration as if we do it before load, it gives an incorrect value
+            // https://github.com/sampotts/plyr/issues/891
+            player.embed.getDuration().then(function (value) {
+                if (value !== player.media.duration) {
+                    player.media.duration = value;
+                    utils.dispatchEvent.call(player, player.media, 'durationchange');
+                }
+            });
         });
 
         player.embed.on('seeked', function () {
@@ -7013,8 +7033,8 @@ var Plyr = function () {
          * @param {boolean} input - Whether to enable captions
          */
         value: function toggleCaptions(input) {
-            // If there's no full support, or there's no caption toggle
+            // If there's no full support
-            if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+            if (!this.supported.ui) {
                 return;
             }
 
@@ -7407,7 +7427,7 @@ var Plyr = function () {
             }
 
             // Set
-            this.media.currentTime = parseFloat(targetTime.toFixed(4));
+            this.media.currentTime = targetTime;
 
             // Logging
             this.debug.log('Seeking to ' + this.currentTime + ' seconds');
@@ -7464,7 +7484,7 @@ var Plyr = function () {
         key: 'duration',
         get: function get$$1() {
             // Faux duration set via config
-            var fauxDuration = parseInt(this.config.duration, 10);
+            var fauxDuration = parseFloat(this.config.duration);
 
             // True duration
             var realDuration = this.media ? Number(this.media.duration) : 0;

dist/plyr.polyfilled.js

@@ -5117,7 +5117,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.2.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.1/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -7136,7 +7136,7 @@ var Fullscreen = function () {
         get: function get() {
             // No prefix
             if (utils.is.function(document.exitFullscreen)) {
-                return false;
+                return '';
             }
 
             // Check for fullscreen support by vendor prefix
@@ -7448,11 +7448,6 @@ var captions = {
 
     // Display captions container and button (for initialization)
     show: function show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
-
         // Try to load the value from storage
         var active = this.storage.get('captions');
 
@@ -7974,10 +7969,6 @@ var browser$1 = utils.getBrowser();
 var controls = {
     // Webkit polyfill for lower fill range
     updateRangeFill: function updateRangeFill(target) {
-        // WebKit only
-        if (!browser$1.isWebkit) {
-            return;
-        }
 
         // Get range from event if event passed
         var range = utils.is.event(target) ? target.target : target;
@@ -7987,6 +7978,14 @@ var controls = {
             return;
         }
 
+        // Set aria value for https://github.com/sampotts/plyr/issues/905
+        range.setAttribute('aria-valuenow', range.value);
+
+        // WebKit only
+        if (!browser$1.isWebkit) {
+            return;
+        }
+
         // Set CSS custom property
         range.style.setProperty('--value', range.value / range.max * 100 + '%');
     },
@@ -8010,7 +8009,8 @@ var controls = {
         // Create <svg>
         var icon = document.createElementNS(namespace, 'svg');
         utils.setAttributes(icon, utils.extend(attributes, {
-            role: 'presentation'
+            role: 'presentation',
+            focusable: 'false'
         }));
 
         // Create the <use> to reference sprite
@@ -8192,6 +8192,7 @@ var controls = {
         // Seek label
         var label = utils.createElement('label', {
             for: attributes.id,
+            id: attributes.id + '-label',
             class: this.config.classNames.hidden
         }, i18n.get(type, this.config));
 
@@ -8202,7 +8203,13 @@ var controls = {
             max: 100,
             step: 0.01,
             value: 0,
-            autocomplete: 'off'
+            autocomplete: 'off',
+            // A11y fixes for https://github.com/sampotts/plyr/issues/905
+            role: 'slider',
+            'aria-labelledby': attributes.id + '-label',
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+            'aria-valuenow': 0
         }, attributes));
 
         this.elements.inputs[type] = input;
@@ -8222,7 +8229,9 @@ var controls = {
         var progress = utils.createElement('progress', utils.extend(utils.getAttributesFromSelector(this.config.selectors.display[type]), {
             min: 0,
             max: 100,
-            value: 0
+            value: 0,
+            role: 'presentation',
+            'aria-hidden': true
         }, attributes));
 
         // Create the label inside
@@ -9539,7 +9548,7 @@ var Listeners = function () {
 
             // Disable right click
             if (this.player.supported.ui && this.player.config.disableContextMenu) {
-                utils.on(this.player.media, 'contextmenu', function (event) {
+                utils.on(this.player.elements.wrapper, 'contextmenu', function (event) {
                     event.preventDefault();
                 }, false);
             }
@@ -11183,7 +11192,9 @@ var vimeo = {
                 utils.dispatchEvent.call(player, player.media, 'seeking');
 
                 // Seek after events
-                player.embed.setCurrentTime(time);
+                player.embed.setCurrentTime(time).catch(function () {
+                    // Do nothing
+                });
 
                 // Restore pause state
                 if (paused) {
@@ -11363,6 +11374,15 @@ var vimeo = {
             if (parseInt(data.percent, 10) === 1) {
                 utils.dispatchEvent.call(player, player.media, 'canplaythrough');
             }
+
+            // Get duration as if we do it before load, it gives an incorrect value
+            // https://github.com/sampotts/plyr/issues/891
+            player.embed.getDuration().then(function (value) {
+                if (value !== player.media.duration) {
+                    player.media.duration = value;
+                    utils.dispatchEvent.call(player, player.media, 'durationchange');
+                }
+            });
         });
 
         player.embed.on('seeked', function () {
@@ -12047,8 +12067,8 @@ var Plyr = function () {
          * @param {boolean} input - Whether to enable captions
          */
         value: function toggleCaptions(input) {
-            // If there's no full support, or there's no caption toggle
+            // If there's no full support
-            if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+            if (!this.supported.ui) {
                 return;
             }
 
@@ -12441,7 +12461,7 @@ var Plyr = function () {
             }
 
             // Set
-            this.media.currentTime = parseFloat(targetTime.toFixed(4));
+            this.media.currentTime = targetTime;
 
             // Logging
             this.debug.log('Seeking to ' + this.currentTime + ' seconds');
@@ -12498,7 +12518,7 @@ var Plyr = function () {
         key: 'duration',
         get: function get() {
             // Faux duration set via config
-            var fauxDuration = parseInt(this.config.duration, 10);
+            var fauxDuration = parseFloat(this.config.duration);
 
             // True duration
             var realDuration = this.media ? Number(this.media.duration) : 0;

package.json

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

readme.md

@@ -128,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups.
 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/3.2.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.2.1/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 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/3.2.0/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.2.1/plyr.css">
 ```
 
 ### SVG Sprite
 
 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/3.2.0/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.2.1/plyr.svg`.
 
 ## Ads
 

src/js/captions.js

@@ -250,11 +250,6 @@ const captions = {
 
     // Display captions container and button (for initialization)
     show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
-
         // Try to load the value from storage
         let active = this.storage.get('captions');
 

src/js/controls.js

@@ -15,10 +15,7 @@ const browser = utils.getBrowser();
 const controls = {
     // Webkit polyfill for lower fill range
     updateRangeFill(target) {
-        // WebKit only
+
-        if (!browser.isWebkit) {
-            return;
-        }
 
         // Get range from event if event passed
         const range = utils.is.event(target) ? target.target : target;
@@ -28,6 +25,14 @@ const controls = {
             return;
         }
 
+        // Set aria value for https://github.com/sampotts/plyr/issues/905
+        range.setAttribute('aria-valuenow', range.value);
+
+        // WebKit only
+        if (!browser.isWebkit) {
+            return;
+        }
+
         // Set CSS custom property
         range.style.setProperty('--value', `${range.value / range.max * 100}%`);
     },
@@ -52,6 +57,7 @@ const controls = {
             icon,
             utils.extend(attributes, {
                 role: 'presentation',
+                focusable: 'false',
             }),
         );
 
@@ -238,6 +244,7 @@ const controls = {
             'label',
             {
                 for: attributes.id,
+                id: `${attributes.id}-label`,
                 class: this.config.classNames.hidden,
             },
             i18n.get(type, this.config),
@@ -255,6 +262,12 @@ const controls = {
                     step: 0.01,
                     value: 0,
                     autocomplete: 'off',
+                    // A11y fixes for https://github.com/sampotts/plyr/issues/905
+                    role: 'slider',
+                    'aria-labelledby': `${attributes.id}-label`,
+                    'aria-valuemin': 0,
+                    'aria-valuemax': 100,
+                    'aria-valuenow': 0,
                 },
                 attributes,
             ),
@@ -281,6 +294,8 @@ const controls = {
                     min: 0,
                     max: 100,
                     value: 0,
+                    role: 'presentation',
+                    'aria-hidden': true,
                 },
                 attributes,
             ),

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.2.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.1/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

src/js/fullscreen.js

@@ -90,7 +90,7 @@ class Fullscreen {
     static get prefix() {
         // No prefix
         if (utils.is.function(document.exitFullscreen)) {
-            return false;
+            return '';
         }
 
         // Check for fullscreen support by vendor prefix

src/js/listeners.js

@@ -334,7 +334,7 @@ class Listeners {
         // Disable right click
         if (this.player.supported.ui && this.player.config.disableContextMenu) {
             utils.on(
-                this.player.media,
+                this.player.elements.wrapper,
                 'contextmenu',
                 event => {
                     event.preventDefault();

src/js/plugins/vimeo.js

@@ -134,7 +134,9 @@ const vimeo = {
                 utils.dispatchEvent.call(player, player.media, 'seeking');
 
                 // Seek after events
-                player.embed.setCurrentTime(time);
+                player.embed.setCurrentTime(time).catch(() => {
+                    // Do nothing
+                });
 
                 // Restore pause state
                 if (paused) {
@@ -320,6 +322,15 @@ const vimeo = {
             if (parseInt(data.percent, 10) === 1) {
                 utils.dispatchEvent.call(player, player.media, 'canplaythrough');
             }
+
+            // Get duration as if we do it before load, it gives an incorrect value
+            // https://github.com/sampotts/plyr/issues/891
+            player.embed.getDuration().then(value => {
+                if (value !== player.media.duration) {
+                    player.media.duration = value;
+                    utils.dispatchEvent.call(player, player.media, 'durationchange');
+                }
+            });
         });
 
         player.embed.on('seeked', () => {

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.2.0
+// plyr.js v3.2.1
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -452,7 +452,7 @@ class Plyr {
         }
 
         // Set
-        this.media.currentTime = parseFloat(targetTime.toFixed(4));
+        this.media.currentTime = targetTime;
 
         // Logging
         this.debug.log(`Seeking to ${this.currentTime} seconds`);
@@ -498,7 +498,7 @@ class Plyr {
      */
     get duration() {
         // Faux duration set via config
-        const fauxDuration = parseInt(this.config.duration, 10);
+        const fauxDuration = parseFloat(this.config.duration);
 
         // True duration
         const realDuration = this.media ? Number(this.media.duration) : 0;
@@ -845,8 +845,8 @@ class Plyr {
      * @param {boolean} input - Whether to enable captions
      */
     toggleCaptions(input) {
-        // If there's no full support, or there's no caption toggle
+        // If there's no full support
-        if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+        if (!this.supported.ui) {
             return;
         }
 

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.2.0
+// plyr.js v3.2.1
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================