v3.3.22

v3.3.12

.eslintrc.json

@@ -5,8 +5,12 @@
         "browser": true,
         "es6": true
     },
-    "globals": { "Plyr": false, "jQuery": false },
+    "globals": {
+        "Plyr": false,
+        "jQuery": false
+    },
     "rules": {
+        "import/no-cycle": 1,
         "no-const-assign": 1,
         "no-shadow": 0,
         "no-this-before-super": 1,
@@ -21,17 +25,8 @@
         "eqeqeq": [2, "always"],
         "one-var": [2, "never"],
         "comma-dangle": [2, "always-multiline"],
-        "no-restricted-globals": [
-            "error",
-            {
-                "name": "event",
-                "message": "Use local parameter instead."
-            },
-            {
-                "name": "error",
-                "message": "Use local parameter instead."
-            }
-        ],
+        "spaced-comment": [2, "always"],
+        "no-restricted-globals": 2,
         "no-param-reassign": [2, { "props": false }]
     },
     "parserOptions": {

.github/issue_template.md

@@ -1,6 +1,4 @@
-<!---
-Please use this issue template as it makes replicating and fixing the issue easier!
---->
+*Please _use this issue template_ as it makes replicating and fixing the issue easier for us. If you decide not to use it or you are vague your issue may be close instantly.*
 
 ### Expected behaviour
 
@@ -14,4 +12,4 @@ Please use this issue template as it makes replicating and fixing the issue easi
 - Version:
 
 ### Steps to reproduce
--
+-

.github/pull_request_template.md

@@ -4,5 +4,5 @@
 
 ### Checklist
 - [ ] Use `develop` as the base branch
-- [ ] Exclude the gulp build from the PR
+- [ ] Exclude the gulp build (`/dist` changes) from the PR
 - [ ] Test on [supported browsers](https://github.com/sampotts/plyr#browser-support)

.gitignore

@@ -5,7 +5,7 @@ aws.json
 !dist/blank.mp4
 index-*.html
 npm-debug.log
+yarn-error.log
+package-lock.json
 *.webm
-/package-lock.json
-.idea/
-
+.idea/

.npmignore

@@ -2,3 +2,10 @@ demo
 .github
 .vscode
 *.code-workspace
+aws.json
+bundles.json
+yarn.lock
+package-lock.json
+*.mp4
+*.webm
+!dist/blank.mp4

.prettierrc

@@ -1,7 +1,6 @@
 {
     "useTabs": false,
     "tabWidth": 4,
-    "printWidth": 120,
     "singleQuote": true,
     "trailingComma": "all"
 }

.stickler.yml

@@ -0,0 +1,5 @@
+linters:
+  eslint:
+files:
+  ignore:
+    - 'node_modules/*'

.travis.yml

@@ -1,7 +1,8 @@
 language: node_js
-node_js:
-  - 'lts/*'
+node_js: lts/*
 
 script:
-  - npm run lint
-  - npm run build
+- bash .travis/prevent-base-master.sh
+- bash .travis/omit-dist.sh
+- npm run lint
+- npm run build

.travis/omit-dist.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+if [ $TRAVIS_BRANCH == "develop" ] && $(git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qE "^(demo/)?dist/"); then
+	echo 'Build output ("dist" and "demo/dist") not permitted in develop' >&2
+	exit 1
+fi

.travis/prevent-base-master.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+if [ "$TRAVIS_PULL_REQUEST" != "false" ] && [ $TRAVIS_BRANCH == "master" ] && $(git diff --name-only $TRAVIS_COMMIT_RANGE | grep -q "^src/"); then
+	echo 'The base branch for pull requests must be "develop"' >&2
+	exit 1
+fi

bower.json

@@ -1,33 +0,0 @@
-{
-    "name": "plyr",
-    "description": "A simple HTML5 media player using custom controls",
-    "homepage": "http://plyr.io",
-    "keywords": [
-        "Audio",
-        "Video",
-        "HTML5 Audio",
-        "HTML5 Video"
-    ],
-    "authors": [
-        "Sam Potts <sam@potts.es>"
-    ],
-    "dependencies": {},
-    "main": [
-        "dist/plyr.css",
-        "dist/plyr.js",
-        "dist/plyr.svg",
-        "src/less/plyr.less",
-        "src/scss/plyr.scss",
-        "src/js/plyr.js"
-    ],
-    "ignore": [
-        "node_modules",
-        "bower_components",
-        ".gitignore"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git://github.com/sampotts/plyr.git"
-    },
-    "license": "MIT"
-}

changelog.md

@@ -1,3 +1,34 @@
+# v3.3.22
+
+-   Travis & CI improvements (thanks @friday)
+-   Add navigator.languages fallback for iOS 9 (thanks @friday)
+
+# v3.3.21
+
+-   Hide currentTime and progress for streams (thanks @mimse)
+-   Fixed condition check (thanks @mimse)
+-   Handle undefined this.player.elements.buttons.play (thanks @klassicd)
+-   Fix captions.toggle() if there is no toggle button (thanks @friday)
+
+# v3.3.20
+
+-   Fix for bug where controls wouldn't show on hover over YouTube video
+
+# v3.3.19
+
+-   Remove `pointer-events: none` on embed `<iframe>` to comply with YouTube ToS
+
+# 3.3.18
+
+-   Ads are now only supported on HTML5 videos as it violates terms of service for YouTube and Vimeo 😢
+-   Fix i18n defaults path on README (thanks @meyt!)
+-   Minor increaseVolume and decreaseVolume changes (thanks @friday!)
+
+# v3.3.17
+
+-   Fix YouTube muting after seeking with the progress slider (thanks @friday!)
+-   Respect preload="none" when setting quality if the media hasn't been loaded some other way (thanks @friday!)
+
 # v3.3.16
 
 -   Fixed regression relating the play button status (fixes #1048)

demo/dist/demo.js

@@ -1874,7 +1874,7 @@ typeof navigator === "object" && (function () {
 	  // webpack (using a build step causes webpack #1617). Grunt verifies that
 	  // this value matches package.json during build.
 	  //   See: https://github.com/getsentry/raven-js/issues/465
-	  VERSION: '3.26.2',
+	  VERSION: '3.26.3',
 
 	  debug: false,
 
@@ -2351,7 +2351,9 @@ typeof navigator === "object" && (function () {
 	      return;
 	    }
 
-	    if (this._globalOptions.stacktrace || (options && options.stacktrace)) {
+	    // Always attempt to get stacktrace if message is empty.
+	    // It's the only way to provide any helpful information to the user.
+	    if (this._globalOptions.stacktrace || options.stacktrace || data.message === '') {
 	      // fingerprint on msg, not stack trace (legacy behavior, could be revisited)
 	      data.fingerprint = data.fingerprint == null ? msg : data.fingerprint;
 
@@ -3508,6 +3510,11 @@ typeof navigator === "object" && (function () {
 	      options
 	    );
 
+	    var ex = data.exception.values[0];
+	    if (ex.type == null && ex.value === '') {
+	      ex.value = 'Unrecoverable error caught';
+	    }
+
 	    // Move mechanism from options to exception interface
 	    // We do this, as requiring user to pass `{exception:{mechanism:{ ... }}}` would be
 	    // too much
@@ -4130,6 +4137,7 @@ typeof navigator === "object" && (function () {
 	                tooltips: {
 	                    controls: true
 	                },
+	                clickToPlay: false,
 	                /* controls: [
 	                    'play-large',
 	                    'restart',

demo/src/js/demo.js

@@ -57,6 +57,7 @@ import Raven from 'raven-js';
                 tooltips: {
                     controls: true,
                 },
+                clickToPlay: false,
                 /* controls: [
                     'play-large',
                     'restart',

dist/plyr.js

@@ -11,60 +11,92 @@ typeof navigator === "object" && (function (global, factory) {
     var getConstructor = function getConstructor(input) {
         return input !== null && typeof input !== 'undefined' ? input.constructor : null;
     };
-
     var instanceOf = function instanceOf(input, constructor) {
         return Boolean(input && constructor && input instanceof constructor);
     };
+    var isNullOrUndefined = function isNullOrUndefined(input) {
+        return input === null || typeof input === 'undefined';
+    };
+    var isObject = function isObject(input) {
+        return getConstructor(input) === Object;
+    };
+    var isNumber = function isNumber(input) {
+        return getConstructor(input) === Number && !Number.isNaN(input);
+    };
+    var isString = function isString(input) {
+        return getConstructor(input) === String;
+    };
+    var isBoolean = function isBoolean(input) {
+        return getConstructor(input) === Boolean;
+    };
+    var isFunction = function isFunction(input) {
+        return getConstructor(input) === Function;
+    };
+    var isArray = function isArray(input) {
+        return Array.isArray(input);
+    };
+    var isWeakMap = function isWeakMap(input) {
+        return instanceOf(input, WeakMap);
+    };
+    var isNodeList = function isNodeList(input) {
+        return instanceOf(input, NodeList);
+    };
+    var isElement = function isElement(input) {
+        return instanceOf(input, Element);
+    };
+    var isTextNode = function isTextNode(input) {
+        return getConstructor(input) === Text;
+    };
+    var isEvent = function isEvent(input) {
+        return instanceOf(input, Event);
+    };
+    var isCue = function isCue(input) {
+        return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+    };
+    var isTrack = function isTrack(input) {
+        return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind);
+    };
+
+    var isEmpty = function isEmpty(input) {
+        return isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length;
+    };
+
+    var isUrl = function isUrl(input) {
+        // Accept a URL object
+        if (instanceOf(input, window.URL)) {
+            return true;
+        }
+
+        // Add the protocol if required
+        var string = input;
+        if (!input.startsWith('http://') || !input.startsWith('https://')) {
+            string = 'http://' + input;
+        }
+
+        try {
+            return !isEmpty(new URL(string).hostname);
+        } catch (e) {
+            return false;
+        }
+    };
 
     var is = {
-        object: function object(input) {
-            return getConstructor(input) === Object;
-        },
-        number: function number(input) {
-            return getConstructor(input) === Number && !Number.isNaN(input);
-        },
-        string: function string(input) {
-            return getConstructor(input) === String;
-        },
-        boolean: function boolean(input) {
-            return getConstructor(input) === Boolean;
-        },
-        function: function _function(input) {
-            return getConstructor(input) === Function;
-        },
-        array: function array(input) {
-            return !is.nullOrUndefined(input) && Array.isArray(input);
-        },
-        weakMap: function weakMap(input) {
-            return instanceOf(input, WeakMap);
-        },
-        nodeList: function nodeList(input) {
-            return instanceOf(input, NodeList);
-        },
-        element: function element(input) {
-            return instanceOf(input, Element);
-        },
-        textNode: function textNode(input) {
-            return getConstructor(input) === Text;
-        },
-        event: function event(input) {
-            return instanceOf(input, Event);
-        },
-        cue: function cue(input) {
-            return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-        },
-        track: function track(input) {
-            return instanceOf(input, TextTrack) || !is.nullOrUndefined(input) && is.string(input.kind);
-        },
-        url: function url(input) {
-            return !is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
-        },
-        nullOrUndefined: function nullOrUndefined(input) {
-            return input === null || typeof input === 'undefined';
-        },
-        empty: function empty(input) {
-            return is.nullOrUndefined(input) || (is.string(input) || is.array(input) || is.nodeList(input)) && !input.length || is.object(input) && !Object.keys(input).length;
-        }
+        nullOrUndefined: isNullOrUndefined,
+        object: isObject,
+        number: isNumber,
+        string: isString,
+        boolean: isBoolean,
+        function: isFunction,
+        array: isArray,
+        weakMap: isWeakMap,
+        nodeList: isNodeList,
+        element: isElement,
+        textNode: isTextNode,
+        event: isEvent,
+        cue: isCue,
+        track: isTrack,
+        url: isUrl,
+        empty: isEmpty
     };
 
     // ==========================================================================
@@ -769,22 +801,17 @@ typeof navigator === "object" && (function (global, factory) {
 
             // Quality
             Object.defineProperty(player.media, 'quality', {
-                get: function get$$1() {
+                get: function get() {
                     // Get sources
                     var sources = html5.getSources.call(player);
-
-                    var _sources$filter = sources.filter(function (source) {
+                    var source = sources.find(function (source) {
                         return source.getAttribute('src') === player.source;
-                    }),
-                        _sources$filter2 = slicedToArray(_sources$filter, 1),
-                        source = _sources$filter2[0];
+                    });
 
                     // Return size, if match is found
-
-
                     return source && Number(source.getAttribute('size'));
                 },
-                set: function set$$1(input) {
+                set: function set(input) {
                     // Get sources
                     var sources = html5.getSources.call(player);
 
@@ -799,25 +826,30 @@ typeof navigator === "object" && (function (global, factory) {
                     }
 
                     // Get current state
-                    var currentTime = player.currentTime,
-                        playing = player.playing;
+                    var _player$media = player.media,
+                        currentTime = _player$media.currentTime,
+                        paused = _player$media.paused,
+                        preload = _player$media.preload,
+                        readyState = _player$media.readyState;
 
                     // Set new source
 
                     player.media.src = source.getAttribute('src');
 
-                    // Restore time
-                    var onLoadedMetaData = function onLoadedMetaData() {
-                        player.currentTime = currentTime;
-                    };
-                    player.once('loadedmetadata', onLoadedMetaData);
+                    // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+                    if (preload !== 'none' || readyState) {
+                        // Restore time
+                        player.once('loadedmetadata', function () {
+                            player.currentTime = currentTime;
 
-                    // Load new source
-                    player.media.load();
+                            // Resume playing
+                            if (!paused) {
+                                player.play();
+                            }
+                        });
 
-                    // Resume playing
-                    if (playing) {
-                        player.play();
+                        // Load new source
+                        player.media.load();
                     }
 
                     // Trigger change event
@@ -1451,7 +1483,7 @@ typeof navigator === "object" && (function (global, factory) {
             }
 
             if ('class' in attributes) {
-                if (attributes.class.includes(this.config.classNames.control)) {
+                if (!attributes.class.includes(this.config.classNames.control)) {
                     attributes.class += ' ' + this.config.classNames.control;
                 }
             } else {
@@ -1900,6 +1932,16 @@ typeof navigator === "object" && (function (global, factory) {
                 return;
             }
 
+            // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar.
+            // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415
+            // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062
+            // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338
+            if (this.duration >= Math.pow(2, 32)) {
+                toggleHidden(this.elements.display.currentTime, true);
+                toggleHidden(this.elements.progress, true);
+                return;
+            }
+
             // Update ARIA values
             if (is.element(this.elements.inputs.seek)) {
                 this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);
@@ -2849,7 +2891,7 @@ typeof navigator === "object" && (function (global, factory) {
             // * active:    The state preferred by user settings or config
             // * toggled:   The real captions state
 
-            var languages = dedupe(Array.from(navigator.languages || navigator.userLanguage).map(function (language) {
+            var languages = dedupe(Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(function (language) {
                 return language.split('-')[0];
             }));
 
@@ -2977,8 +3019,10 @@ typeof navigator === "object" && (function (global, factory) {
                     return;
                 }
 
-                // Toggle state
-                this.elements.buttons.captions.pressed = active;
+                // Toggle button if it's enabled
+                if (this.elements.buttons.captions) {
+                    this.elements.buttons.captions.pressed = active;
+                }
 
                 // Add class hook
                 toggleClass(this.elements.container, activeClass, active);
@@ -4573,9 +4617,11 @@ typeof navigator === "object" && (function (global, factory) {
                 };
 
                 // Play/pause toggle
-                Array.from(this.player.elements.buttons.play).forEach(function (button) {
-                    bind(button, 'click', _this4.player.togglePlay, 'play');
-                });
+                if (this.player.elements.buttons.play) {
+                    Array.from(this.player.elements.buttons.play).forEach(function (button) {
+                        bind(button, 'click', _this4.player.togglePlay, 'play');
+                    });
+                }
 
                 // Pause
                 bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
@@ -4777,33 +4823,28 @@ typeof navigator === "object" && (function (global, factory) {
                     // Detect "natural" scroll - suppored on OS X Safari only
                     // Other browsers on OS X will be inverted until support improves
                     var inverted = event.webkitDirectionInvertedFromDevice;
-                    var step = 1 / 50;
-                    var direction = 0;
 
-                    // Scroll down (or up on natural) to decrease
-                    if (event.deltaY < 0 || event.deltaX > 0) {
-                        if (inverted) {
-                            _this4.player.decreaseVolume(step);
-                            direction = -1;
-                        } else {
-                            _this4.player.increaseVolume(step);
-                            direction = 1;
-                        }
-                    }
+                    // Get delta from event. Invert if `inverted` is true
 
-                    // Scroll up (or down on natural) to increase
-                    if (event.deltaY > 0 || event.deltaX < 0) {
-                        if (inverted) {
-                            _this4.player.increaseVolume(step);
-                            direction = 1;
-                        } else {
-                            _this4.player.decreaseVolume(step);
-                            direction = -1;
-                        }
-                    }
+                    var _map = [event.deltaX, -event.deltaY].map(function (value) {
+                        return inverted ? -value : value;
+                    }),
+                        _map2 = slicedToArray(_map, 2),
+                        x = _map2[0],
+                        y = _map2[1];
+
+                    // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
+
+
+                    var direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
+
+                    // Change the volume by 2%
+                    _this4.player.increaseVolume(direction / 50);
 
                     // Don't break page scrolling at max and min
-                    if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
+                    var volume = _this4.player.media.volume;
+
+                    if (direction === 1 && volume < 1 || direction === -1 && volume > 0) {
                         event.preventDefault();
                     }
                 }, 'volume', false);
@@ -5822,8 +5863,8 @@ typeof navigator === "object" && (function (global, factory) {
                                 return Number(instance.getCurrentTime());
                             },
                             set: function set(time) {
-                                // If paused, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
-                                if (player.paused) {
+                                // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
+                                if (player.paused && !player.embed.hasPlayed) {
                                     player.embed.mute();
                                 }
 
@@ -6742,7 +6783,7 @@ typeof navigator === "object" && (function (global, factory) {
         }, {
             key: 'enabled',
             get: function get$$1() {
-                return this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
+                return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
             }
         }, {
             key: 'tagUrl',
@@ -6750,7 +6791,7 @@ typeof navigator === "object" && (function (global, factory) {
                 var params = {
                     AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
                     AV_CHANNELID: '5a0458dc28a06145e4519d21',
-                    AV_URL: location.hostname,
+                    AV_URL: window.location.hostname,
                     cb: Date.now(),
                     AV_WIDTH: 640,
                     AV_HEIGHT: 480,
@@ -7299,7 +7340,7 @@ typeof navigator === "object" && (function (global, factory) {
              */
             value: function increaseVolume(step) {
                 var volume = this.media.muted ? 0 : this.volume;
-                this.volume = volume + (is.number(step) ? step : 1);
+                this.volume = volume + (is.number(step) ? step : 0);
             }
 
             /**
@@ -7310,8 +7351,7 @@ typeof navigator === "object" && (function (global, factory) {
         }, {
             key: 'decreaseVolume',
             value: function decreaseVolume(step) {
-                var volume = this.media.muted ? 0 : this.volume;
-                this.volume = volume - (is.number(step) ? step : 1);
+                this.increaseVolume(-step);
             }
 
             /**
@@ -7395,6 +7435,7 @@ typeof navigator === "object" && (function (global, factory) {
             value: function on$$1(event, callback) {
                 on.call(this, this.elements.container, event, callback);
             }
+
             /**
              * Add event listeners once
              * @param {string} event - Event type
@@ -7406,6 +7447,7 @@ typeof navigator === "object" && (function (global, factory) {
             value: function once$$1(event, callback) {
                 once.call(this, this.elements.container, event, callback);
             }
+
             /**
              * Remove event listeners
              * @param {string} event - Event type
@@ -7681,8 +7723,9 @@ typeof navigator === "object" && (function (global, factory) {
                 // Faux duration set via config
                 var fauxDuration = parseFloat(this.config.duration);
 
-                // Media duration can be NaN before the media has loaded
-                var duration = (this.media || {}).duration || 0;
+                // Media duration can be NaN or Infinity before the media has loaded
+                var realDuration = (this.media || {}).duration;
+                var duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
 
                 // If config duration is funky, use regular duration
                 return fauxDuration || duration;

dist/plyr.polyfilled.js

@@ -5397,60 +5397,92 @@ typeof navigator === "object" && (function (global, factory) {
 	var getConstructor = function getConstructor(input) {
 	    return input !== null && typeof input !== 'undefined' ? input.constructor : null;
 	};
-
 	var instanceOf = function instanceOf(input, constructor) {
 	    return Boolean(input && constructor && input instanceof constructor);
 	};
+	var isNullOrUndefined = function isNullOrUndefined(input) {
+	    return input === null || typeof input === 'undefined';
+	};
+	var isObject = function isObject(input) {
+	    return getConstructor(input) === Object;
+	};
+	var isNumber = function isNumber(input) {
+	    return getConstructor(input) === Number && !Number.isNaN(input);
+	};
+	var isString = function isString(input) {
+	    return getConstructor(input) === String;
+	};
+	var isBoolean = function isBoolean(input) {
+	    return getConstructor(input) === Boolean;
+	};
+	var isFunction = function isFunction(input) {
+	    return getConstructor(input) === Function;
+	};
+	var isArray = function isArray(input) {
+	    return Array.isArray(input);
+	};
+	var isWeakMap = function isWeakMap(input) {
+	    return instanceOf(input, WeakMap);
+	};
+	var isNodeList = function isNodeList(input) {
+	    return instanceOf(input, NodeList);
+	};
+	var isElement = function isElement(input) {
+	    return instanceOf(input, Element);
+	};
+	var isTextNode = function isTextNode(input) {
+	    return getConstructor(input) === Text;
+	};
+	var isEvent = function isEvent(input) {
+	    return instanceOf(input, Event);
+	};
+	var isCue = function isCue(input) {
+	    return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+	};
+	var isTrack = function isTrack(input) {
+	    return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind);
+	};
+
+	var isEmpty = function isEmpty(input) {
+	    return isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length;
+	};
+
+	var isUrl = function isUrl(input) {
+	    // Accept a URL object
+	    if (instanceOf(input, window.URL)) {
+	        return true;
+	    }
+
+	    // Add the protocol if required
+	    var string = input;
+	    if (!input.startsWith('http://') || !input.startsWith('https://')) {
+	        string = 'http://' + input;
+	    }
+
+	    try {
+	        return !isEmpty(new URL(string).hostname);
+	    } catch (e) {
+	        return false;
+	    }
+	};
 
 	var is$1 = {
-	    object: function object(input) {
-	        return getConstructor(input) === Object;
-	    },
-	    number: function number(input) {
-	        return getConstructor(input) === Number && !Number.isNaN(input);
-	    },
-	    string: function string(input) {
-	        return getConstructor(input) === String;
-	    },
-	    boolean: function boolean(input) {
-	        return getConstructor(input) === Boolean;
-	    },
-	    function: function _function(input) {
-	        return getConstructor(input) === Function;
-	    },
-	    array: function array(input) {
-	        return !is$1.nullOrUndefined(input) && Array.isArray(input);
-	    },
-	    weakMap: function weakMap(input) {
-	        return instanceOf(input, WeakMap);
-	    },
-	    nodeList: function nodeList(input) {
-	        return instanceOf(input, NodeList);
-	    },
-	    element: function element(input) {
-	        return instanceOf(input, Element);
-	    },
-	    textNode: function textNode(input) {
-	        return getConstructor(input) === Text;
-	    },
-	    event: function event(input) {
-	        return instanceOf(input, Event);
-	    },
-	    cue: function cue(input) {
-	        return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-	    },
-	    track: function track(input) {
-	        return instanceOf(input, TextTrack) || !is$1.nullOrUndefined(input) && is$1.string(input.kind);
-	    },
-	    url: function url(input) {
-	        return !is$1.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
-	    },
-	    nullOrUndefined: function nullOrUndefined(input) {
-	        return input === null || typeof input === 'undefined';
-	    },
-	    empty: function empty(input) {
-	        return is$1.nullOrUndefined(input) || (is$1.string(input) || is$1.array(input) || is$1.nodeList(input)) && !input.length || is$1.object(input) && !Object.keys(input).length;
-	    }
+	    nullOrUndefined: isNullOrUndefined,
+	    object: isObject,
+	    number: isNumber,
+	    string: isString,
+	    boolean: isBoolean,
+	    function: isFunction,
+	    array: isArray,
+	    weakMap: isWeakMap,
+	    nodeList: isNodeList,
+	    element: isElement,
+	    textNode: isTextNode,
+	    event: isEvent,
+	    cue: isCue,
+	    track: isTrack,
+	    url: isUrl,
+	    empty: isEmpty
 	};
 
 	// ==========================================================================
@@ -6158,16 +6190,11 @@ typeof navigator === "object" && (function (global, factory) {
 	            get: function get() {
 	                // Get sources
 	                var sources = html5.getSources.call(player);
-
-	                var _sources$filter = sources.filter(function (source) {
+	                var source = sources.find(function (source) {
 	                    return source.getAttribute('src') === player.source;
-	                }),
-	                    _sources$filter2 = slicedToArray(_sources$filter, 1),
-	                    source = _sources$filter2[0];
+	                });
 
 	                // Return size, if match is found
-
-
 	                return source && Number(source.getAttribute('size'));
 	            },
 	            set: function set(input) {
@@ -6185,25 +6212,30 @@ typeof navigator === "object" && (function (global, factory) {
 	                }
 
 	                // Get current state
-	                var currentTime = player.currentTime,
-	                    playing = player.playing;
+	                var _player$media = player.media,
+	                    currentTime = _player$media.currentTime,
+	                    paused = _player$media.paused,
+	                    preload = _player$media.preload,
+	                    readyState = _player$media.readyState;
 
 	                // Set new source
 
 	                player.media.src = source.getAttribute('src');
 
-	                // Restore time
-	                var onLoadedMetaData = function onLoadedMetaData() {
-	                    player.currentTime = currentTime;
-	                };
-	                player.once('loadedmetadata', onLoadedMetaData);
+	                // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+	                if (preload !== 'none' || readyState) {
+	                    // Restore time
+	                    player.once('loadedmetadata', function () {
+	                        player.currentTime = currentTime;
 
-	                // Load new source
-	                player.media.load();
+	                        // Resume playing
+	                        if (!paused) {
+	                            player.play();
+	                        }
+	                    });
 
-	                // Resume playing
-	                if (playing) {
-	                    player.play();
+	                    // Load new source
+	                    player.media.load();
 	                }
 
 	                // Trigger change event
@@ -6837,7 +6869,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        }
 
 	        if ('class' in attributes) {
-	            if (attributes.class.includes(this.config.classNames.control)) {
+	            if (!attributes.class.includes(this.config.classNames.control)) {
 	                attributes.class += ' ' + this.config.classNames.control;
 	            }
 	        } else {
@@ -7286,6 +7318,16 @@ typeof navigator === "object" && (function (global, factory) {
 	            return;
 	        }
 
+	        // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar.
+	        // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415
+	        // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062
+	        // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338
+	        if (this.duration >= Math.pow(2, 32)) {
+	            toggleHidden(this.elements.display.currentTime, true);
+	            toggleHidden(this.elements.progress, true);
+	            return;
+	        }
+
 	        // Update ARIA values
 	        if (is$1.element(this.elements.inputs.seek)) {
 	            this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);
@@ -8235,7 +8277,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        // * active:    The state preferred by user settings or config
 	        // * toggled:   The real captions state
 
-	        var languages = dedupe(Array.from(navigator.languages || navigator.userLanguage).map(function (language) {
+	        var languages = dedupe(Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(function (language) {
 	            return language.split('-')[0];
 	        }));
 
@@ -8363,8 +8405,10 @@ typeof navigator === "object" && (function (global, factory) {
 	                return;
 	            }
 
-	            // Toggle state
-	            this.elements.buttons.captions.pressed = active;
+	            // Toggle button if it's enabled
+	            if (this.elements.buttons.captions) {
+	                this.elements.buttons.captions.pressed = active;
+	            }
 
 	            // Add class hook
 	            toggleClass(this.elements.container, activeClass, active);
@@ -9959,9 +10003,11 @@ typeof navigator === "object" && (function (global, factory) {
 	            };
 
 	            // Play/pause toggle
-	            Array.from(this.player.elements.buttons.play).forEach(function (button) {
-	                bind(button, 'click', _this4.player.togglePlay, 'play');
-	            });
+	            if (this.player.elements.buttons.play) {
+	                Array.from(this.player.elements.buttons.play).forEach(function (button) {
+	                    bind(button, 'click', _this4.player.togglePlay, 'play');
+	                });
+	            }
 
 	            // Pause
 	            bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
@@ -10163,33 +10209,28 @@ typeof navigator === "object" && (function (global, factory) {
 	                // Detect "natural" scroll - suppored on OS X Safari only
 	                // Other browsers on OS X will be inverted until support improves
 	                var inverted = event.webkitDirectionInvertedFromDevice;
-	                var step = 1 / 50;
-	                var direction = 0;
 
-	                // Scroll down (or up on natural) to decrease
-	                if (event.deltaY < 0 || event.deltaX > 0) {
-	                    if (inverted) {
-	                        _this4.player.decreaseVolume(step);
-	                        direction = -1;
-	                    } else {
-	                        _this4.player.increaseVolume(step);
-	                        direction = 1;
-	                    }
-	                }
+	                // Get delta from event. Invert if `inverted` is true
 
-	                // Scroll up (or down on natural) to increase
-	                if (event.deltaY > 0 || event.deltaX < 0) {
-	                    if (inverted) {
-	                        _this4.player.increaseVolume(step);
-	                        direction = 1;
-	                    } else {
-	                        _this4.player.decreaseVolume(step);
-	                        direction = -1;
-	                    }
-	                }
+	                var _map = [event.deltaX, -event.deltaY].map(function (value) {
+	                    return inverted ? -value : value;
+	                }),
+	                    _map2 = slicedToArray(_map, 2),
+	                    x = _map2[0],
+	                    y = _map2[1];
+
+	                // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
+
+
+	                var direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
+
+	                // Change the volume by 2%
+	                _this4.player.increaseVolume(direction / 50);
 
 	                // Don't break page scrolling at max and min
-	                if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
+	                var volume = _this4.player.media.volume;
+
+	                if (direction === 1 && volume < 1 || direction === -1 && volume > 0) {
 	                    event.preventDefault();
 	                }
 	            }, 'volume', false);
@@ -11202,8 +11243,8 @@ typeof navigator === "object" && (function (global, factory) {
 	                            return Number(instance.getCurrentTime());
 	                        },
 	                        set: function set(time) {
-	                            // If paused, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
-	                            if (player.paused) {
+	                            // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
+	                            if (player.paused && !player.embed.hasPlayed) {
 	                                player.embed.mute();
 	                            }
 
@@ -12122,7 +12163,7 @@ typeof navigator === "object" && (function (global, factory) {
 	    }, {
 	        key: 'enabled',
 	        get: function get() {
-	            return this.player.isVideo && this.player.config.ads.enabled && !is$1.empty(this.publisherId);
+	            return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is$1.empty(this.publisherId);
 	        }
 	    }, {
 	        key: 'tagUrl',
@@ -12130,7 +12171,7 @@ typeof navigator === "object" && (function (global, factory) {
 	            var params = {
 	                AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
 	                AV_CHANNELID: '5a0458dc28a06145e4519d21',
-	                AV_URL: location.hostname,
+	                AV_URL: window.location.hostname,
 	                cb: Date.now(),
 	                AV_WIDTH: 640,
 	                AV_HEIGHT: 480,
@@ -12679,7 +12720,7 @@ typeof navigator === "object" && (function (global, factory) {
 	         */
 	        value: function increaseVolume(step) {
 	            var volume = this.media.muted ? 0 : this.volume;
-	            this.volume = volume + (is$1.number(step) ? step : 1);
+	            this.volume = volume + (is$1.number(step) ? step : 0);
 	        }
 
 	        /**
@@ -12690,8 +12731,7 @@ typeof navigator === "object" && (function (global, factory) {
 	    }, {
 	        key: 'decreaseVolume',
 	        value: function decreaseVolume(step) {
-	            var volume = this.media.muted ? 0 : this.volume;
-	            this.volume = volume - (is$1.number(step) ? step : 1);
+	            this.increaseVolume(-step);
 	        }
 
 	        /**
@@ -12775,6 +12815,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        value: function on$$1(event, callback) {
 	            on.call(this, this.elements.container, event, callback);
 	        }
+
 	        /**
 	         * Add event listeners once
 	         * @param {string} event - Event type
@@ -12786,6 +12827,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        value: function once$$1(event, callback) {
 	            once.call(this, this.elements.container, event, callback);
 	        }
+
 	        /**
 	         * Remove event listeners
 	         * @param {string} event - Event type
@@ -13061,8 +13103,9 @@ typeof navigator === "object" && (function (global, factory) {
 	            // Faux duration set via config
 	            var fauxDuration = parseFloat(this.config.duration);
 
-	            // Media duration can be NaN before the media has loaded
-	            var duration = (this.media || {}).duration || 0;
+	            // Media duration can be NaN or Infinity before the media has loaded
+	            var realDuration = (this.media || {}).duration;
+	            var duration = !is$1.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
 
 	            // If config duration is funky, use regular duration
 	            return fauxDuration || duration;

package.json

@@ -1,26 +1,54 @@
 {
     "name": "plyr",
-    "version": "3.3.16",
-    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
+    "version": "3.3.22",
+    "description":
+        "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
+    "author": "Sam Potts <sam@potts.es>",
+    "keywords": [
+        "HTML5 Video",
+        "HTML5 Audio",
+        "Media Player",
+        "DASH",
+        "Shaka",
+        "WordPress",
+        "HLS"
+    ],
     "main": "./dist/plyr.js",
     "browser": "./dist/plyr.min.js",
     "sass": "./src/sass/plyr.scss",
     "style": "./dist/plyr.css",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/sampotts/plyr.git"
+    },
+    "bugs": {
+        "url": "https://github.com/sampotts/plyr/issues"
+    },
+    "directories": {
+        "doc": "readme.md"
+    },
+    "scripts": {
+        "build": "gulp build",
+        "lint": "eslint src/js && npm run-script remark",
+        "remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
     "devDependencies": {
         "babel-core": "^6.26.3",
-        "babel-eslint": "^8.2.3",
+        "babel-eslint": "^8.2.6",
         "babel-plugin-external-helpers": "^6.22.0",
         "babel-preset-env": "^1.7.0",
         "del": "^3.0.0",
-        "eslint": "^4.19.1",
-        "eslint-config-airbnb-base": "^12.1.0",
+        "eslint": "^5.1.0",
+        "eslint-config-airbnb-base": "^13.0.0",
         "eslint-config-prettier": "^2.9.0",
-        "eslint-plugin-import": "^2.12.0",
+        "eslint-plugin-import": "^2.13.0",
         "git-branch": "^2.0.1",
         "gulp": "^3.9.1",
         "gulp-autoprefixer": "^5.0.0",
-        "gulp-better-rollup": "^3.2.1",
+        "gulp-better-rollup": "^3.3.0",
         "gulp-clean-css": "^3.9.4",
         "gulp-concat": "^2.6.1",
         "gulp-filter": "^5.1.0",
@@ -38,43 +66,27 @@
         "gulp-uglify-es": "^1.0.4",
         "gulp-util": "^3.0.8",
         "postcss-custom-properties": "^7.0.0",
-        "prettier-eslint": "^8.8.1",
+        "prettier-eslint": "^8.8.2",
         "prettier-stylelint": "^0.4.2",
-        "rollup-plugin-babel": "^3.0.4",
+        "remark-cli": "^5.0.0",
+        "remark-validate-links": "^7.0.0",
+        "rollup-plugin-babel": "^3.0.7",
         "rollup-plugin-commonjs": "^9.1.3",
         "rollup-plugin-node-resolve": "^3.3.0",
         "run-sequence": "^2.2.1",
         "stylelint": "^9.3.0",
-        "stylelint-config-prettier": "^3.2.0",
+        "stylelint-config-prettier": "^3.3.0",
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
         "stylelint-scss": "^3.1.3",
         "stylelint-selector-bem-pattern": "^2.0.0"
     },
-    "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
-    "repository": {
-        "type": "git",
-        "url": "git://github.com/sampotts/plyr.git"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/sampotts/plyr/issues"
-    },
-    "directories": {
-        "doc": "readme.md"
-    },
-    "scripts": {
-        "build": "gulp build",
-        "lint": "eslint src/js",
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
         "babel-polyfill": "^6.26.0",
         "custom-event-polyfill": "^0.3.0",
         "loadjs": "^3.5.4",
-        "raven-js": "^3.26.2",
+        "raven-js": "^3.26.3",
         "url-polyfill": "^1.0.13"
     }
 }

readme.md

@@ -16,7 +16,7 @@ A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo medi
 *   **HTML Video & Audio** - support for both formats
 *   **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
 *   **[Monetization](#ads)** - make money from your videos
-*   **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
+*   **[Streaming](#try-plyr-online)** - support for hls.js, Shaka and dash.js streaming playback
 *   **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
 *   **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
 *   **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.3.16/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.3.22/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.3.16/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.3.22/plyr.polyfilled.js"></script>
 ```
 
 ### CSS
@@ -152,13 +152,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.3.16/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.3.22/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.3.16/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.22/plyr.svg`.
 
 ## Ads
 
@@ -286,7 +286,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `debug`              | Boolean                    | `false`                                                                                                                        | Display debugging information in the console                                                                                                                                                                                                                                                                                                                           |
 | `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured. |
 | `settings`           | Array                      | `['captions', 'quality', 'speed', 'loop']`                                                                                     | If you're using the default controls are used then you can specify which settings to show in the menu                                                                                                                                                                                                                                                                  |
-| `i18n`               | Object                     | See [defaults.js](/src/js/defaults.js)                                                                                         | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                        |
+| `i18n`               | Object                     | See [defaults.js](/src/js/config/defaults.js)                                                                                         | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                        |
 | `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                  |
 | `iconUrl`            | String                     | `null`                                                                                                                         | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info.                                                                                                                                                                                                                                                                                    |
 | `iconPrefix`         | String                     | `plyr`                                                                                                                         | 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.                                                                                                                                 |
@@ -409,7 +409,7 @@ player.fullscreen.active; // false;
 | `speed`              | ✓      | ✓      | Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5.                                      |
 | `quality`&sup1;      | ✓      | ✓      | Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.                                                                       |
 | `loop`               | ✓      | ✓      | Gets or sets the current loop state of the player. The setter accepts a boolean.                                                                                                     |
-| `source`             | ✓      | ✓      | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#source-setter) below for examples.                                                |
+| `source`             | ✓      | ✓      | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#the-source-setter) below for examples.                                                |
 | `poster`             | ✓      | ✓      | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image.                                                             |
 | `autoplay`           | ✓      | ✓      | Gets or sets the autoplay state of the player. The setter accepts a boolean.                                                                                                         |
 | `currentTrack`       | ✓      | ✓      | Gets or sets the caption track by index. `-1` means the track is missing or captions is not active |
@@ -435,10 +435,12 @@ player.source = {
         {
             src: '/path/to/movie.mp4',
             type: 'video/mp4',
+            size: 720,
         },
         {
             src: '/path/to/movie.webm',
             type: 'video/webm',
+            size: 1080,
         },
     ],
     poster: '/path/to/poster.jpg',

src/js/captions.js

@@ -84,7 +84,7 @@ const captions = {
         // * toggled:   The real captions state
 
         const languages = dedupe(
-            Array.from(navigator.languages || navigator.userLanguage).map(language => language.split('-')[0]),
+            Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(language => language.split('-')[0]),
         );
 
         let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
@@ -191,8 +191,10 @@ const captions = {
                 return;
             }
 
-            // Toggle state
-            this.elements.buttons.captions.pressed = active;
+            // Toggle button if it's enabled
+            if (this.elements.buttons.captions) {
+                this.elements.buttons.captions.pressed = active;
+            }
 
             // Add class hook
             toggleClass(this.elements.container, activeClass, active);

src/js/console.js

@@ -17,10 +17,12 @@ export default class Console {
         // eslint-disable-next-line no-console
         return this.enabled ? Function.prototype.bind.call(console.log, console) : noop;
     }
+
     get warn() {
         // eslint-disable-next-line no-console
         return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop;
     }
+
     get error() {
         // eslint-disable-next-line no-console
         return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;

src/js/controls.js

@@ -16,11 +16,11 @@ import {
     getElement,
     getElements,
     hasClass,
+    matches,
     removeElement,
     setAttributes,
     toggleClass,
     toggleHidden,
-    matches,
 } from './utils/elements';
 import { off, on } from './utils/events';
 import is from './utils/is';
@@ -187,7 +187,7 @@ const controls = {
         }
 
         if ('class' in attributes) {
-            if (attributes.class.includes(this.config.classNames.control)) {
+            if (!attributes.class.includes(this.config.classNames.control)) {
                 attributes.class += ` ${this.config.classNames.control}`;
             }
         } else {
@@ -633,6 +633,16 @@ const controls = {
             return;
         }
 
+        // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar.
+        // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415
+        // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062
+        // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338
+        if (this.duration >= 2**32) {
+            toggleHidden(this.elements.display.currentTime, true);
+            toggleHidden(this.elements.progress, true);
+            return;
+        }
+
         // Update ARIA values
         if (is.element(this.elements.inputs.seek)) {
             this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);

src/js/html5.js

@@ -39,7 +39,7 @@ const html5 = {
             get() {
                 // Get sources
                 const sources = html5.getSources.call(player);
-                const [source] = sources.filter(source => source.getAttribute('src') === player.source);
+                const source = sources.find(source => source.getAttribute('src') === player.source);
 
                 // Return size, if match is found
                 return source && Number(source.getAttribute('size'));
@@ -57,23 +57,25 @@ const html5 = {
                 }
 
                 // Get current state
-                const { currentTime, playing } = player;
+                const { currentTime, paused, preload, readyState } = player.media;
 
                 // Set new source
                 player.media.src = source.getAttribute('src');
 
-                // Restore time
-                const onLoadedMetaData = () => {
-                    player.currentTime = currentTime;
-                };
-                player.once('loadedmetadata', onLoadedMetaData);
+                // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+                if (preload !== 'none' || readyState) {
+                    // Restore time
+                    player.once('loadedmetadata', () => {
+                        player.currentTime = currentTime;
 
-                // Load new source
-                player.media.load();
+                        // Resume playing
+                        if (!paused) {
+                            player.play();
+                        }
+                    });
 
-                // Resume playing
-                if (playing) {
-                    player.play();
+                    // Load new source
+                    player.media.load();
                 }
 
                 // Trigger change event

src/js/listeners.js

@@ -431,9 +431,11 @@ class Listeners {
         };
 
         // Play/pause toggle
-        Array.from(this.player.elements.buttons.play).forEach(button => {
-            bind(button, 'click', this.player.togglePlay, 'play');
-        });
+        if (this.player.elements.buttons.play) {
+            Array.from(this.player.elements.buttons.play).forEach(button => {
+                bind(button, 'click', this.player.togglePlay, 'play');
+            });
+        }
 
         // Pause
         bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
@@ -665,36 +667,19 @@ class Listeners {
                 // Detect "natural" scroll - suppored on OS X Safari only
                 // Other browsers on OS X will be inverted until support improves
                 const inverted = event.webkitDirectionInvertedFromDevice;
-                const step = 1 / 50;
-                let direction = 0;
 
-                // Scroll down (or up on natural) to decrease
-                if (event.deltaY < 0 || event.deltaX > 0) {
-                    if (inverted) {
-                        this.player.decreaseVolume(step);
-                        direction = -1;
-                    } else {
-                        this.player.increaseVolume(step);
-                        direction = 1;
-                    }
-                }
+                // Get delta from event. Invert if `inverted` is true
+                const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
 
-                // Scroll up (or down on natural) to increase
-                if (event.deltaY > 0 || event.deltaX < 0) {
-                    if (inverted) {
-                        this.player.increaseVolume(step);
-                        direction = 1;
-                    } else {
-                        this.player.decreaseVolume(step);
-                        direction = -1;
-                    }
-                }
+                // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
+                const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
+
+                // Change the volume by 2%
+                this.player.increaseVolume(direction / 50);
 
                 // Don't break page scrolling at max and min
-                if (
-                    (direction === 1 && this.player.media.volume < 1) ||
-                    (direction === -1 && this.player.media.volume > 0)
-                ) {
+                const { volume } = this.player.media;
+                if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) {
                     event.preventDefault();
                 }
             },

src/js/plugins/ads.js

@@ -7,12 +7,12 @@
 /* global google */
 
 import i18n from '../i18n';
-import { createElement } from './../utils/elements';
-import { triggerEvent } from './../utils/events';
-import is from './../utils/is';
-import loadScript from './../utils/loadScript';
-import { formatTime } from './../utils/time';
-import { buildUrlParams } from './../utils/urls';
+import { createElement } from '../utils/elements';
+import { triggerEvent } from '../utils/events';
+import is from '../utils/is';
+import loadScript from '../utils/loadScript';
+import { formatTime } from '../utils/time';
+import { buildUrlParams } from '../utils/urls';
 
 class Ads {
     /**
@@ -49,7 +49,9 @@ class Ads {
     }
 
     get enabled() {
-        return this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
+        return (
+            this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId)
+        );
     }
 
     /**
@@ -98,7 +100,7 @@ class Ads {
         const params = {
             AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
             AV_CHANNELID: '5a0458dc28a06145e4519d21',
-            AV_URL: location.hostname,
+            AV_URL: window.location.hostname,
             cb: Date.now(),
             AV_WIDTH: 640,
             AV_HEIGHT: 480,

src/js/plugins/vimeo.js

@@ -2,16 +2,16 @@
 // Vimeo plugin
 // ==========================================================================
 
-import captions from './../captions';
-import controls from './../controls';
-import ui from './../ui';
-import { createElement, replaceElement, toggleClass } from './../utils/elements';
-import { triggerEvent } from './../utils/events';
-import fetch from './../utils/fetch';
-import is from './../utils/is';
-import loadScript from './../utils/loadScript';
-import { format, stripHTML } from './../utils/strings';
-import { buildUrlParams } from './../utils/urls';
+import captions from '../captions';
+import controls from '../controls';
+import ui from '../ui';
+import { createElement, replaceElement, toggleClass } from '../utils/elements';
+import { triggerEvent } from '../utils/events';
+import fetch from '../utils/fetch';
+import is from '../utils/is';
+import loadScript from '../utils/loadScript';
+import { format, stripHTML } from '../utils/strings';
+import { buildUrlParams } from '../utils/urls';
 
 // Parse Vimeo ID from URL
 function parseId(url) {

src/js/plugins/youtube.js

@@ -2,16 +2,16 @@
 // YouTube plugin
 // ==========================================================================
 
-import controls from './../controls';
-import ui from './../ui';
-import { dedupe } from './../utils/arrays';
-import { createElement, replaceElement, toggleClass } from './../utils/elements';
-import { triggerEvent } from './../utils/events';
-import fetch from './../utils/fetch';
-import is from './../utils/is';
-import loadImage from './../utils/loadImage';
-import loadScript from './../utils/loadScript';
-import { format, generateId } from './../utils/strings';
+import controls from '../controls';
+import ui from '../ui';
+import { dedupe } from '../utils/arrays';
+import { createElement, replaceElement, toggleClass } from '../utils/elements';
+import { triggerEvent } from '../utils/events';
+import fetch from '../utils/fetch';
+import is from '../utils/is';
+import loadImage from '../utils/loadImage';
+import loadScript from '../utils/loadScript';
+import { format, generateId } from '../utils/strings';
 
 // Parse YouTube ID from URL
 function parseId(url) {
@@ -270,8 +270,8 @@ const youtube = {
                             return Number(instance.getCurrentTime());
                         },
                         set(time) {
-                            // If paused, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
-                            if (player.paused) {
+                            // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
+                            if (player.paused && !player.embed.hasPlayed) {
                                 player.embed.mute();
                             }
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.16
+// plyr.js v3.3.22
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -310,18 +310,23 @@ class Plyr {
     get isHTML5() {
         return Boolean(this.provider === providers.html5);
     }
+
     get isEmbed() {
         return Boolean(this.isYouTube || this.isVimeo);
     }
+
     get isYouTube() {
         return Boolean(this.provider === providers.youtube);
     }
+
     get isVimeo() {
         return Boolean(this.provider === providers.vimeo);
     }
+
     get isVideo() {
         return Boolean(this.type === types.video);
     }
+
     get isAudio() {
         return Boolean(this.type === types.audio);
     }
@@ -489,8 +494,9 @@ class Plyr {
         // Faux duration set via config
         const fauxDuration = parseFloat(this.config.duration);
 
-        // Media duration can be NaN before the media has loaded
-        const duration = (this.media || {}).duration || 0;
+        // Media duration can be NaN or Infinity before the media has loaded
+        const realDuration = (this.media || {}).duration;
+        const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
 
         // If config duration is funky, use regular duration
         return fauxDuration || duration;
@@ -553,7 +559,7 @@ class Plyr {
      */
     increaseVolume(step) {
         const volume = this.media.muted ? 0 : this.volume;
-        this.volume = volume + (is.number(step) ? step : 1);
+        this.volume = volume + (is.number(step) ? step : 0);
     }
 
     /**
@@ -561,8 +567,7 @@ class Plyr {
      * @param {boolean} step - How much to decrease by (between 0 and 1)
      */
     decreaseVolume(step) {
-        const volume = this.media.muted ? 0 : this.volume;
-        this.volume = volume - (is.number(step) ? step : 1);
+        this.increaseVolume(-step);
     }
 
     /**
@@ -945,6 +950,7 @@ class Plyr {
     on(event, callback) {
         on.call(this, this.elements.container, event, callback);
     }
+
     /**
      * Add event listeners once
      * @param {string} event - Event type
@@ -953,6 +959,7 @@ class Plyr {
     once(event, callback) {
         once.call(this, this.elements.container, event, callback);
     }
+
     /**
      * Remove event listeners
      * @param {string} event - Event type

src/js/plyr.polyfilled.js

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

src/js/utils/is.js

@@ -3,65 +3,61 @@
 // ==========================================================================
 
 const getConstructor = input => (input !== null && typeof input !== 'undefined' ? input.constructor : null);
-
 const instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor);
+const isNullOrUndefined = input => input === null || typeof input === 'undefined';
+const isObject = input => getConstructor(input) === Object;
+const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);
+const isString = input => getConstructor(input) === String;
+const isBoolean = input => getConstructor(input) === Boolean;
+const isFunction = input => getConstructor(input) === Function;
+const isArray = input => Array.isArray(input);
+const isWeakMap = input => instanceOf(input, WeakMap);
+const isNodeList = input => instanceOf(input, NodeList);
+const isElement = input => instanceOf(input, Element);
+const isTextNode = input => getConstructor(input) === Text;
+const isEvent = input => instanceOf(input, Event);
+const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
 
-const is = {
-    object(input) {
-        return getConstructor(input) === Object;
-    },
-    number(input) {
-        return getConstructor(input) === Number && !Number.isNaN(input);
-    },
-    string(input) {
-        return getConstructor(input) === String;
-    },
-    boolean(input) {
-        return getConstructor(input) === Boolean;
-    },
-    function(input) {
-        return getConstructor(input) === Function;
-    },
-    array(input) {
-        return !is.nullOrUndefined(input) && Array.isArray(input);
-    },
-    weakMap(input) {
-        return instanceOf(input, WeakMap);
-    },
-    nodeList(input) {
-        return instanceOf(input, NodeList);
-    },
-    element(input) {
-        return instanceOf(input, Element);
-    },
-    textNode(input) {
-        return getConstructor(input) === Text;
-    },
-    event(input) {
-        return instanceOf(input, Event);
-    },
-    cue(input) {
-        return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-    },
-    track(input) {
-        return instanceOf(input, TextTrack) || (!is.nullOrUndefined(input) && is.string(input.kind));
-    },
-    url(input) {
-        return (
-            !is.nullOrUndefined(input) &&
-            /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input)
-        );
-    },
-    nullOrUndefined(input) {
-        return input === null || typeof input === 'undefined';
-    },
-    empty(input) {
-        return (
-            is.nullOrUndefined(input) ||
-            ((is.string(input) || is.array(input) || is.nodeList(input)) && !input.length) ||
-            (is.object(input) && !Object.keys(input).length)
-        );
-    },
+const isEmpty = input =>
+    isNullOrUndefined(input) ||
+    ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
+    (isObject(input) && !Object.keys(input).length);
+
+const isUrl = input => {
+    // Accept a URL object
+    if (instanceOf(input, window.URL)) {
+        return true;
+    }
+
+    // Add the protocol if required
+    let string = input;
+    if (!input.startsWith('http://') || !input.startsWith('https://')) {
+        string = `http://${input}`;
+    }
+
+    try {
+        return !isEmpty(new URL(string).hostname);
+    } catch (e) {
+        return false;
+    }
 };
 
-export default is;
+export default {
+    nullOrUndefined: isNullOrUndefined,
+    object: isObject,
+    number: isNumber,
+    string: isString,
+    boolean: isBoolean,
+    function: isFunction,
+    array: isArray,
+    weakMap: isWeakMap,
+    nodeList: isNodeList,
+    element: isElement,
+    textNode: isTextNode,
+    event: isEvent,
+    cue: isCue,
+    track: isTrack,
+    url: isUrl,
+    empty: isEmpty,
+};

src/js/utils/loadSprite.js

@@ -2,7 +2,7 @@
 // Sprite loader
 // ==========================================================================
 
-import Storage from './../storage';
+import Storage from '../storage';
 import fetch from './fetch';
 import is from './is';
 

src/sass/components/controls.scss

@@ -11,6 +11,7 @@
 .plyr__controls {
     align-items: center;
     display: flex;
+    justify-content: flex-end;
     text-align: center;
 
     // Spacing
@@ -23,6 +24,7 @@
         &:first-child,
         &:first-child + [data-plyr='pause'] {
             margin-left: 0;
+            margin-right: auto;
         }
     }
 
@@ -48,13 +50,17 @@
 
 // Video controls
 .plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+    background: linear-gradient(
+        rgba($plyr-video-controls-bg, 0),
+        rgba($plyr-video-controls-bg, 0.7)
+    );
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     bottom: 0;
     color: $plyr-video-control-color;
     left: 0;
-    padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing
+        $plyr-control-spacing;
     position: absolute;
     right: 0;
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;

src/sass/components/embed.scss

@@ -27,11 +27,6 @@ $embed-padding: ((100 / 16) * 9);
     $height: 240;
     $offset: to-percentage(($height - $embed-padding) / ($height / 50));
 
-    // To allow mouse events to be captured if full support
-    iframe {
-        pointer-events: none;
-    }
-
     // Only used for Vimeo
     > .plyr__video-embed__container {
         padding-bottom: to-percentage($height);

src/sass/components/poster.scss

@@ -15,9 +15,9 @@
     transition: opacity 0.3s ease;
     width: 100%;
     z-index: 1;
-    pointer-events: none;
 }
 
 .plyr--stopped.plyr__poster-enabled .plyr__poster {
     opacity: 1;
+    pointer-events: none;
 }