v3.0.3

Fix fast-forward control

changelog.md

@@ -1,3 +1,18 @@
+# v3.0.3
+
+*   Vimeo offset tweak (fixes #826)
+*   Fix for .stop() method (fixes #819)
+*   Check for array for speed options (fixes #252)
+*   Restore as float (fixes #828)
+*   Fix for Firefox fullscreen oddness (Fixes #821)
+*   Improve Sprite checking (fixes #827)
+*   Fix fast-forward control (thanks @saadshahd)
+*   Fix the options link in the readme (thanks @DanielRuf)
+
+# v3.0.2
+
+*   Fix for Safari not firing error events when trying to load blocked scripts
+
 # v3.0.1
 
 *   Fix for trying to accessing local storage when it's blocked

demo/index.html

@@ -169,16 +169,16 @@
     </aside>
 
     <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent" crossorigin="anonymous"></script>
 
     <!-- Plyr core script -->
-    <script src="../dist/plyr.js"></script>
+    <script src="../dist/plyr.js" crossorigin="anonymous"></script>
 
     <!-- Sharing libary (https://shr.one) -->
-    <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
+    <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
 
     <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
 
     <!-- Docs script -->
     <script src="dist/demo.js" crossorigin="anonymous"></script>

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -233,7 +233,7 @@ var defaults = {
             pause: '[data-plyr="pause"]',
             restart: '[data-plyr="restart"]',
             rewind: '[data-plyr="rewind"]',
-            forward: '[data-plyr="fast-forward"]',
+            fastForward: '[data-plyr="fast-forward"]',
             mute: '[data-plyr="mute"]',
             captions: '[data-plyr="captions"]',
             fullscreen: '[data-plyr="fullscreen"]',
@@ -330,6 +330,305 @@ var defaults = {
     }
 };
 
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+
+
+
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var loadjs_umd = createCommonjsModule(function (module, exports) {
+(function(root, factory) {
+  if (typeof undefined === 'function' && undefined.amd) {
+    undefined([], factory);
+  } else {
+    module.exports = factory();
+  }
+}(commonjsGlobal, function() {
+/**
+ * Global dependencies.
+ * @global {Object} document - DOM
+ */
+
+var devnull = function() {},
+    bundleIdCache = {},
+    bundleResultCache = {},
+    bundleCallbackQueue = {};
+
+
+/**
+ * Subscribe to bundle load event.
+ * @param {string[]} bundleIds - Bundle ids
+ * @param {Function} callbackFn - The callback function
+ */
+function subscribe(bundleIds, callbackFn) {
+  // listify
+  bundleIds = bundleIds.push ? bundleIds : [bundleIds];
+
+  var depsNotFound = [],
+      i = bundleIds.length,
+      numWaiting = i,
+      fn,
+      bundleId,
+      r,
+      q;
+
+  // define callback function
+  fn = function (bundleId, pathsNotFound) {
+    if (pathsNotFound.length) depsNotFound.push(bundleId);
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(depsNotFound);
+  };
+
+  // register callback
+  while (i--) {
+    bundleId = bundleIds[i];
+
+    // execute callback if in result cache
+    r = bundleResultCache[bundleId];
+    if (r) {
+      fn(bundleId, r);
+      continue;
+    }
+
+    // add to callback queue
+    q = bundleCallbackQueue[bundleId] = bundleCallbackQueue[bundleId] || [];
+    q.push(fn);
+  }
+}
+
+
+/**
+ * Publish bundle load event.
+ * @param {string} bundleId - Bundle id
+ * @param {string[]} pathsNotFound - List of files not found
+ */
+function publish(bundleId, pathsNotFound) {
+  // exit if id isn't defined
+  if (!bundleId) return;
+
+  var q = bundleCallbackQueue[bundleId];
+
+  // cache result
+  bundleResultCache[bundleId] = pathsNotFound;
+
+  // exit if queue is empty
+  if (!q) return;
+
+  // empty callback queue
+  while (q.length) {
+    q[0](bundleId, pathsNotFound);
+    q.splice(0, 1);
+  }
+}
+
+
+/**
+ * Execute callbacks.
+ * @param {Object or Function} args - The callback args
+ * @param {string[]} depsNotFound - List of dependencies not found
+ */
+function executeCallbacks(args, depsNotFound) {
+  // accept function as argument
+  if (args.call) args = {success: args};
+
+  // success and error callbacks
+  if (depsNotFound.length) (args.error || devnull)(depsNotFound);
+  else (args.success || devnull)(args);
+}
+
+
+/**
+ * Load individual file.
+ * @param {string} path - The file path
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFile(path, callbackFn, args, numTries) {
+  var doc = document,
+      async = args.async,
+      maxTries = (args.numRetries || 0) + 1,
+      beforeCallbackFn = args.before || devnull,
+      isCss,
+      e;
+
+  numTries = numTries || 0;
+
+  if (/(^css!|\.css$)/.test(path)) {
+    isCss = true;
+
+    // css
+    e = doc.createElement('link');
+    e.rel = 'stylesheet';
+    e.href = path.replace(/^css!/, '');  // remove "css!" prefix
+  } else {
+    // javascript
+    e = doc.createElement('script');
+    e.src = path;
+    e.async = async === undefined ? true : async;
+  }
+
+  e.onload = e.onerror = e.onbeforeload = function (ev) {
+    var result = ev.type[0];
+
+    // Note: The following code isolates IE using `hideFocus` and treats empty
+    // stylesheets as failures to get around lack of onerror support
+    if (isCss && 'hideFocus' in e) {
+      try {
+        if (!e.sheet.cssText.length) result = 'e';
+      } catch (x) {
+        // sheets objects created from load errors don't allow access to
+        // `cssText`
+        result = 'e';
+      }
+    }
+
+    // handle retries in case of load failure
+    if (result == 'e') {
+      // increment counter
+      numTries += 1;
+
+      // exit function and try again
+      if (numTries < maxTries) {
+        return loadFile(path, callbackFn, args, numTries);
+      }
+    }
+
+    // execute callback
+    callbackFn(path, result, ev.defaultPrevented);
+  };
+
+  // add to document (unless callback returns `false`)
+  if (beforeCallbackFn(path, e) !== false) doc.head.appendChild(e);
+}
+
+
+/**
+ * Load multiple files.
+ * @param {string[]} paths - The file paths
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFiles(paths, callbackFn, args) {
+  // listify paths
+  paths = paths.push ? paths : [paths];
+
+  var numWaiting = paths.length,
+      x = numWaiting,
+      pathsNotFound = [],
+      fn,
+      i;
+
+  // define callback function
+  fn = function(path, result, defaultPrevented) {
+    // handle error
+    if (result == 'e') pathsNotFound.push(path);
+
+    // handle beforeload event. If defaultPrevented then that means the load
+    // will be blocked (ex. Ghostery/ABP on Safari)
+    if (result == 'b') {
+      if (defaultPrevented) pathsNotFound.push(path);
+      else return;
+    }
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(pathsNotFound);
+  };
+
+  // load scripts
+  for (i=0; i < x; i++) loadFile(paths[i], fn, args);
+}
+
+
+/**
+ * Initiate script load and register bundle.
+ * @param {(string|string[])} paths - The file paths
+ * @param {(string|Function)} [arg1] - The bundleId or success callback
+ * @param {Function} [arg2] - The success or error callback
+ * @param {Function} [arg3] - The error callback
+ */
+function loadjs(paths, arg1, arg2) {
+  var bundleId,
+      args;
+
+  // bundleId (if string)
+  if (arg1 && arg1.trim) bundleId = arg1;
+
+  // args (default is {})
+  args = (bundleId ? arg2 : arg1) || {};
+
+  // throw error if bundle is already defined
+  if (bundleId) {
+    if (bundleId in bundleIdCache) {
+      throw "LoadJS";
+    } else {
+      bundleIdCache[bundleId] = true;
+    }
+  }
+
+  // load scripts
+  loadFiles(paths, function (pathsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, pathsNotFound);
+
+    // publish bundle load event
+    publish(bundleId, pathsNotFound);
+  }, args);
+}
+
+
+/**
+ * Execute callbacks when dependencies have been satisfied.
+ * @param {(string|string[])} deps - List of bundle ids
+ * @param {Object} args - success/error arguments
+ */
+loadjs.ready = function ready(deps, args) {
+  // subscribe to bundle load event
+  subscribe(deps, function (depsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, depsNotFound);
+  });
+
+  return loadjs;
+};
+
+
+/**
+ * Manually satisfy bundle dependencies.
+ * @param {string} bundleId - The bundle id
+ */
+loadjs.done = function done(bundleId) {
+  publish(bundleId, []);
+};
+
+
+/**
+ * Reset loadjs dependencies statuses
+ */
+loadjs.reset = function reset() {
+  bundleIdCache = {};
+  bundleResultCache = {};
+  bundleCallbackQueue = {};
+};
+
+
+/**
+ * Determine if bundle has already been defined
+ * @param String} bundleId - The bundle id
+ */
+loadjs.isDefined = function isDefined(bundleId) {
+  return bundleId in bundleIdCache;
+};
+
+
+// export
+return loadjs;
+
+}));
+});
+
 var asyncGenerator = function () {
   function AwaitValue(value) {
     this.value = value;
@@ -693,48 +992,10 @@ var utils = {
     // Load an external script
     loadScript: function loadScript(url) {
         return new Promise(function (resolve, reject) {
-            var current = document.querySelector('script[src="' + url + '"]');
-
-            // Check script is not already referenced, if so wait for load
-            if (current !== null) {
-                current.callbacks = current.callbacks || [];
-                current.callbacks.push(resolve);
-                return;
-            }
-
-            // Build the element
-            var element = document.createElement('script');
-
-            // Callback queue
-            element.callbacks = element.callbacks || [];
-            element.callbacks.push(resolve);
-
-            // Error queue
-            element.errors = element.errors || [];
-            element.errors.push(reject);
-
-            // Bind callback
-            element.addEventListener('load', function (event) {
-                element.callbacks.forEach(function (cb) {
-                    return cb.call(null, event);
-                });
-                element.callbacks = null;
-            }, false);
-
-            // Bind error handling
-            element.addEventListener('error', function (event) {
-                element.errors.forEach(function (err) {
-                    return err.call(null, event);
-                });
-                element.errors = null;
-            }, false);
-
-            // Set the URL after binding callback
-            element.src = url;
-
-            // Inject
-            var first = document.getElementsByTagName('script')[0];
-            first.parentNode.insertBefore(element, first);
+            loadjs_umd(url, {
+                success: resolve,
+                error: reject
+            });
         });
     },
 
@@ -749,7 +1010,16 @@ var utils = {
         var hasId = utils.is.string(id);
         var isCached = false;
 
-        function updateSprite(data) {
+        var exists = function exists() {
+            return document.querySelectorAll('#' + id).length;
+        };
+
+        function injectSprite(data) {
+            // Check again incase of race condition
+            if (hasId && exists()) {
+                return;
+            }
+
             // Inject content
             this.innerHTML = data;
 
@@ -757,8 +1027,8 @@ var utils = {
             document.body.insertBefore(this, document.body.childNodes[0]);
         }
 
-        // Only load once
-        if (!hasId || !document.querySelectorAll('#' + id).length) {
+        // Only load once if ID set
+        if (!hasId || !exists()) {
             // Create container
             var container = document.createElement('div');
             utils.toggleHidden(container, true);
@@ -774,7 +1044,7 @@ var utils = {
 
                 if (isCached) {
                     var data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -791,7 +1061,7 @@ var utils = {
                     }));
                 }
 
-                updateSprite.call(container, result);
+                injectSprite.call(container, result);
             }).catch(function () {});
         }
     },
@@ -1057,7 +1327,7 @@ var utils = {
                 pause: utils.getElement.call(this, this.config.selectors.buttons.pause),
                 restart: utils.getElement.call(this, this.config.selectors.buttons.restart),
                 rewind: utils.getElement.call(this, this.config.selectors.buttons.rewind),
-                forward: utils.getElement.call(this, this.config.selectors.buttons.forward),
+                fastForward: utils.getElement.call(this, this.config.selectors.buttons.fastForward),
                 mute: utils.getElement.call(this, this.config.selectors.buttons.mute),
                 pip: utils.getElement.call(this, this.config.selectors.buttons.pip),
                 airplay: utils.getElement.call(this, this.config.selectors.buttons.airplay),
@@ -1681,6 +1951,7 @@ var Console = function () {
 
 // ==========================================================================
 // Fullscreen wrapper
+// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
 // ==========================================================================
 
 var browser = utils.getBrowser();
@@ -1739,6 +2010,7 @@ var Fullscreen = function () {
 
         // Get prefix
         this.prefix = Fullscreen.prefix;
+        this.name = Fullscreen.name;
 
         // Scroll position
         this.scrollPosition = { x: 0, y: 0 };
@@ -1802,7 +2074,7 @@ var Fullscreen = function () {
             } else if (!this.prefix) {
                 this.target.requestFullScreen();
             } else if (!utils.is.empty(this.prefix)) {
-                this.target['' + this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
+                this.target[this.prefix + 'Request' + this.name]();
             }
         }
 
@@ -1824,7 +2096,8 @@ var Fullscreen = function () {
             } else if (!this.prefix) {
                 document.cancelFullScreen();
             } else if (!utils.is.empty(this.prefix)) {
-                document['' + this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
+                var action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
+                document['' + this.prefix + action + this.name]();
             }
         }
 
@@ -1864,7 +2137,7 @@ var Fullscreen = function () {
                 return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
             }
 
-            var element = !this.prefix ? document.fullscreenElement : document[this.prefix + 'FullscreenElement'];
+            var element = !this.prefix ? document.fullscreenElement : document['' + this.prefix + this.name + 'Element'];
 
             return element === this.target;
         }
@@ -1888,7 +2161,7 @@ var Fullscreen = function () {
         key: 'prefix',
         get: function get$$1() {
             // No prefix
-            if (utils.is.function(document.cancelFullScreen)) {
+            if (utils.is.function(document.exitFullscreen)) {
                 return false;
             }
 
@@ -1897,12 +2170,9 @@ var Fullscreen = function () {
             var prefixes = ['webkit', 'moz', 'ms'];
 
             prefixes.some(function (pre) {
-                if (utils.is.function(document[pre + 'CancelFullScreen'])) {
+                if (utils.is.function(document[pre + 'ExitFullscreen']) || utils.is.function(document[pre + 'CancelFullScreen'])) {
                     value = pre;
                     return true;
-                } else if (utils.is.function(document.msExitFullscreen)) {
-                    value = 'ms';
-                    return true;
                 }
 
                 return false;
@@ -1910,6 +2180,11 @@ var Fullscreen = function () {
 
             return value;
         }
+    }, {
+        key: 'name',
+        get: function get$$1() {
+            return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
+        }
     }]);
     return Fullscreen;
 }();
@@ -3165,7 +3440,7 @@ var controls = {
         var type = 'speed';
 
         // Set the default speeds
-        if (!utils.is.object(this.options.speed) || !Object.keys(this.options.speed).length) {
+        if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
             this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
         }
 
@@ -3385,7 +3660,7 @@ var controls = {
 
         // Fast forward button
         if (this.config.controls.includes('fast-forward')) {
-            container.appendChild(controls.createButton.call(this, 'fast-forward'));
+            container.appendChild(controls.createButton.call(this, 'fastForward'));
         }
 
         // Progress
@@ -3962,7 +4237,7 @@ var Listeners = function () {
             });
 
             // Handle native play/pause
-            utils.on(this.player.media, 'playing play pause ended', function (event) {
+            utils.on(this.player.media, 'playing play pause ended emptied', function (event) {
                 return ui.checkPlaying.call(_this3.player, event);
             });
 
@@ -5382,6 +5657,8 @@ var youtube = {
                     // Reset timer
                     clearInterval(player.timers.playing);
 
+                    console.warn(event.data);
+
                     // Handle events
                     // -1   Unstarted
                     // 0    Ended
@@ -5390,6 +5667,16 @@ var youtube = {
                     // 3    Buffering
                     // 5    Video cued
                     switch (event.data) {
+                        case -1:
+                            // Update scrubber
+                            utils.dispatchEvent.call(player, player.media, 'timeupdate');
+
+                            // Get loaded % from YouTube
+                            player.media.buffered = instance.getVideoLoadedFraction();
+                            utils.dispatchEvent.call(player, player.media, 'progress');
+
+                            break;
+
                         case 0:
                             player.media.paused = true;
 
@@ -5489,7 +5776,7 @@ var vimeo = {
     setAspectRatio: function setAspectRatio(input) {
         var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         var padding = 100 / ratio[0] * ratio[1];
-        var height = 200;
+        var height = 240;
         var offset = (height - padding) / (height / 50);
         this.elements.wrapper.style.paddingBottom = padding + '%';
         this.media.style.transform = 'translateY(-' + offset + '%)';
@@ -5559,10 +5846,8 @@ var vimeo = {
         };
 
         player.media.stop = function () {
-            player.embed.stop().then(function () {
-                player.media.paused = true;
-                player.currentTime = 0;
-            });
+            player.pause();
+            player.currentTime = 0;
         };
 
         // Seeking
@@ -6026,7 +6311,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.1
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -6371,8 +6656,11 @@ var Plyr = function () {
     }, {
         key: 'stop',
         value: function stop() {
-            this.restart();
-            this.pause();
+            if (this.isHTML5) {
+                this.media.load();
+            } else {
+                this.media.stop();
+            }
         }
 
         /**
@@ -6718,7 +7006,7 @@ var Plyr = function () {
                     clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
-                    if (this.embed !== null) {
+                    if (this.embed !== null && utils.is.function(this.embed.destroy)) {
                         this.embed.destroy();
                     }
 
@@ -6834,7 +7122,7 @@ var Plyr = function () {
             }
 
             // Set
-            this.media.currentTime = targetTime.toFixed(4);
+            this.media.currentTime = parseFloat(targetTime.toFixed(4));
 
             // Logging
             this.debug.log('Seeking to ' + this.currentTime + ' seconds');
@@ -6894,7 +7182,7 @@ var Plyr = function () {
             var fauxDuration = parseInt(this.config.duration, 10);
 
             // True duration
-            var realDuration = Number(this.media.duration);
+            var realDuration = this.media ? Number(this.media.duration) : 0;
 
             // If custom duration is funky, use regular duration
             return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;

dist/plyr.polyfilled.js

@@ -5268,7 +5268,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.3/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -5424,7 +5424,7 @@ var defaults = {
             pause: '[data-plyr="pause"]',
             restart: '[data-plyr="restart"]',
             rewind: '[data-plyr="rewind"]',
-            forward: '[data-plyr="fast-forward"]',
+            fastForward: '[data-plyr="fast-forward"]',
             mute: '[data-plyr="mute"]',
             captions: '[data-plyr="captions"]',
             fullscreen: '[data-plyr="fullscreen"]',
@@ -5521,6 +5521,295 @@ var defaults = {
     }
 };
 
+var loadjs_umd = createCommonjsModule(function (module, exports) {
+(function(root, factory) {
+  if (typeof undefined === 'function' && undefined.amd) {
+    undefined([], factory);
+  } else {
+    module.exports = factory();
+  }
+}(commonjsGlobal, function() {
+/**
+ * Global dependencies.
+ * @global {Object} document - DOM
+ */
+
+var devnull = function() {},
+    bundleIdCache = {},
+    bundleResultCache = {},
+    bundleCallbackQueue = {};
+
+
+/**
+ * Subscribe to bundle load event.
+ * @param {string[]} bundleIds - Bundle ids
+ * @param {Function} callbackFn - The callback function
+ */
+function subscribe(bundleIds, callbackFn) {
+  // listify
+  bundleIds = bundleIds.push ? bundleIds : [bundleIds];
+
+  var depsNotFound = [],
+      i = bundleIds.length,
+      numWaiting = i,
+      fn,
+      bundleId,
+      r,
+      q;
+
+  // define callback function
+  fn = function (bundleId, pathsNotFound) {
+    if (pathsNotFound.length) depsNotFound.push(bundleId);
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(depsNotFound);
+  };
+
+  // register callback
+  while (i--) {
+    bundleId = bundleIds[i];
+
+    // execute callback if in result cache
+    r = bundleResultCache[bundleId];
+    if (r) {
+      fn(bundleId, r);
+      continue;
+    }
+
+    // add to callback queue
+    q = bundleCallbackQueue[bundleId] = bundleCallbackQueue[bundleId] || [];
+    q.push(fn);
+  }
+}
+
+
+/**
+ * Publish bundle load event.
+ * @param {string} bundleId - Bundle id
+ * @param {string[]} pathsNotFound - List of files not found
+ */
+function publish(bundleId, pathsNotFound) {
+  // exit if id isn't defined
+  if (!bundleId) return;
+
+  var q = bundleCallbackQueue[bundleId];
+
+  // cache result
+  bundleResultCache[bundleId] = pathsNotFound;
+
+  // exit if queue is empty
+  if (!q) return;
+
+  // empty callback queue
+  while (q.length) {
+    q[0](bundleId, pathsNotFound);
+    q.splice(0, 1);
+  }
+}
+
+
+/**
+ * Execute callbacks.
+ * @param {Object or Function} args - The callback args
+ * @param {string[]} depsNotFound - List of dependencies not found
+ */
+function executeCallbacks(args, depsNotFound) {
+  // accept function as argument
+  if (args.call) args = {success: args};
+
+  // success and error callbacks
+  if (depsNotFound.length) (args.error || devnull)(depsNotFound);
+  else (args.success || devnull)(args);
+}
+
+
+/**
+ * Load individual file.
+ * @param {string} path - The file path
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFile(path, callbackFn, args, numTries) {
+  var doc = document,
+      async = args.async,
+      maxTries = (args.numRetries || 0) + 1,
+      beforeCallbackFn = args.before || devnull,
+      isCss,
+      e;
+
+  numTries = numTries || 0;
+
+  if (/(^css!|\.css$)/.test(path)) {
+    isCss = true;
+
+    // css
+    e = doc.createElement('link');
+    e.rel = 'stylesheet';
+    e.href = path.replace(/^css!/, '');  // remove "css!" prefix
+  } else {
+    // javascript
+    e = doc.createElement('script');
+    e.src = path;
+    e.async = async === undefined ? true : async;
+  }
+
+  e.onload = e.onerror = e.onbeforeload = function (ev) {
+    var result = ev.type[0];
+
+    // Note: The following code isolates IE using `hideFocus` and treats empty
+    // stylesheets as failures to get around lack of onerror support
+    if (isCss && 'hideFocus' in e) {
+      try {
+        if (!e.sheet.cssText.length) result = 'e';
+      } catch (x) {
+        // sheets objects created from load errors don't allow access to
+        // `cssText`
+        result = 'e';
+      }
+    }
+
+    // handle retries in case of load failure
+    if (result == 'e') {
+      // increment counter
+      numTries += 1;
+
+      // exit function and try again
+      if (numTries < maxTries) {
+        return loadFile(path, callbackFn, args, numTries);
+      }
+    }
+
+    // execute callback
+    callbackFn(path, result, ev.defaultPrevented);
+  };
+
+  // add to document (unless callback returns `false`)
+  if (beforeCallbackFn(path, e) !== false) doc.head.appendChild(e);
+}
+
+
+/**
+ * Load multiple files.
+ * @param {string[]} paths - The file paths
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFiles(paths, callbackFn, args) {
+  // listify paths
+  paths = paths.push ? paths : [paths];
+
+  var numWaiting = paths.length,
+      x = numWaiting,
+      pathsNotFound = [],
+      fn,
+      i;
+
+  // define callback function
+  fn = function(path, result, defaultPrevented) {
+    // handle error
+    if (result == 'e') pathsNotFound.push(path);
+
+    // handle beforeload event. If defaultPrevented then that means the load
+    // will be blocked (ex. Ghostery/ABP on Safari)
+    if (result == 'b') {
+      if (defaultPrevented) pathsNotFound.push(path);
+      else return;
+    }
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(pathsNotFound);
+  };
+
+  // load scripts
+  for (i=0; i < x; i++) loadFile(paths[i], fn, args);
+}
+
+
+/**
+ * Initiate script load and register bundle.
+ * @param {(string|string[])} paths - The file paths
+ * @param {(string|Function)} [arg1] - The bundleId or success callback
+ * @param {Function} [arg2] - The success or error callback
+ * @param {Function} [arg3] - The error callback
+ */
+function loadjs(paths, arg1, arg2) {
+  var bundleId,
+      args;
+
+  // bundleId (if string)
+  if (arg1 && arg1.trim) bundleId = arg1;
+
+  // args (default is {})
+  args = (bundleId ? arg2 : arg1) || {};
+
+  // throw error if bundle is already defined
+  if (bundleId) {
+    if (bundleId in bundleIdCache) {
+      throw "LoadJS";
+    } else {
+      bundleIdCache[bundleId] = true;
+    }
+  }
+
+  // load scripts
+  loadFiles(paths, function (pathsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, pathsNotFound);
+
+    // publish bundle load event
+    publish(bundleId, pathsNotFound);
+  }, args);
+}
+
+
+/**
+ * Execute callbacks when dependencies have been satisfied.
+ * @param {(string|string[])} deps - List of bundle ids
+ * @param {Object} args - success/error arguments
+ */
+loadjs.ready = function ready(deps, args) {
+  // subscribe to bundle load event
+  subscribe(deps, function (depsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, depsNotFound);
+  });
+
+  return loadjs;
+};
+
+
+/**
+ * Manually satisfy bundle dependencies.
+ * @param {string} bundleId - The bundle id
+ */
+loadjs.done = function done(bundleId) {
+  publish(bundleId, []);
+};
+
+
+/**
+ * Reset loadjs dependencies statuses
+ */
+loadjs.reset = function reset() {
+  bundleIdCache = {};
+  bundleResultCache = {};
+  bundleCallbackQueue = {};
+};
+
+
+/**
+ * Determine if bundle has already been defined
+ * @param String} bundleId - The bundle id
+ */
+loadjs.isDefined = function isDefined(bundleId) {
+  return bundleId in bundleIdCache;
+};
+
+
+// export
+return loadjs;
+
+}));
+});
+
 var asyncGenerator = function () {
   function AwaitValue(value) {
     this.value = value;
@@ -5884,48 +6173,10 @@ var utils = {
     // Load an external script
     loadScript: function loadScript(url) {
         return new Promise(function (resolve, reject) {
-            var current = document.querySelector('script[src="' + url + '"]');
-
-            // Check script is not already referenced, if so wait for load
-            if (current !== null) {
-                current.callbacks = current.callbacks || [];
-                current.callbacks.push(resolve);
-                return;
-            }
-
-            // Build the element
-            var element = document.createElement('script');
-
-            // Callback queue
-            element.callbacks = element.callbacks || [];
-            element.callbacks.push(resolve);
-
-            // Error queue
-            element.errors = element.errors || [];
-            element.errors.push(reject);
-
-            // Bind callback
-            element.addEventListener('load', function (event) {
-                element.callbacks.forEach(function (cb) {
-                    return cb.call(null, event);
-                });
-                element.callbacks = null;
-            }, false);
-
-            // Bind error handling
-            element.addEventListener('error', function (event) {
-                element.errors.forEach(function (err) {
-                    return err.call(null, event);
-                });
-                element.errors = null;
-            }, false);
-
-            // Set the URL after binding callback
-            element.src = url;
-
-            // Inject
-            var first = document.getElementsByTagName('script')[0];
-            first.parentNode.insertBefore(element, first);
+            loadjs_umd(url, {
+                success: resolve,
+                error: reject
+            });
         });
     },
 
@@ -5940,7 +6191,16 @@ var utils = {
         var hasId = utils.is.string(id);
         var isCached = false;
 
-        function updateSprite(data) {
+        var exists = function exists() {
+            return document.querySelectorAll('#' + id).length;
+        };
+
+        function injectSprite(data) {
+            // Check again incase of race condition
+            if (hasId && exists()) {
+                return;
+            }
+
             // Inject content
             this.innerHTML = data;
 
@@ -5948,8 +6208,8 @@ var utils = {
             document.body.insertBefore(this, document.body.childNodes[0]);
         }
 
-        // Only load once
-        if (!hasId || !document.querySelectorAll('#' + id).length) {
+        // Only load once if ID set
+        if (!hasId || !exists()) {
             // Create container
             var container = document.createElement('div');
             utils.toggleHidden(container, true);
@@ -5965,7 +6225,7 @@ var utils = {
 
                 if (isCached) {
                     var data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -5982,7 +6242,7 @@ var utils = {
                     }));
                 }
 
-                updateSprite.call(container, result);
+                injectSprite.call(container, result);
             }).catch(function () {});
         }
     },
@@ -6248,7 +6508,7 @@ var utils = {
                 pause: utils.getElement.call(this, this.config.selectors.buttons.pause),
                 restart: utils.getElement.call(this, this.config.selectors.buttons.restart),
                 rewind: utils.getElement.call(this, this.config.selectors.buttons.rewind),
-                forward: utils.getElement.call(this, this.config.selectors.buttons.forward),
+                fastForward: utils.getElement.call(this, this.config.selectors.buttons.fastForward),
                 mute: utils.getElement.call(this, this.config.selectors.buttons.mute),
                 pip: utils.getElement.call(this, this.config.selectors.buttons.pip),
                 airplay: utils.getElement.call(this, this.config.selectors.buttons.airplay),
@@ -6872,6 +7132,7 @@ var Console = function () {
 
 // ==========================================================================
 // Fullscreen wrapper
+// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
 // ==========================================================================
 
 var browser = utils.getBrowser();
@@ -6930,6 +7191,7 @@ var Fullscreen = function () {
 
         // Get prefix
         this.prefix = Fullscreen.prefix;
+        this.name = Fullscreen.name;
 
         // Scroll position
         this.scrollPosition = { x: 0, y: 0 };
@@ -6993,7 +7255,7 @@ var Fullscreen = function () {
             } else if (!this.prefix) {
                 this.target.requestFullScreen();
             } else if (!utils.is.empty(this.prefix)) {
-                this.target['' + this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
+                this.target[this.prefix + 'Request' + this.name]();
             }
         }
 
@@ -7015,7 +7277,8 @@ var Fullscreen = function () {
             } else if (!this.prefix) {
                 document.cancelFullScreen();
             } else if (!utils.is.empty(this.prefix)) {
-                document['' + this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
+                var action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
+                document['' + this.prefix + action + this.name]();
             }
         }
 
@@ -7055,7 +7318,7 @@ var Fullscreen = function () {
                 return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
             }
 
-            var element = !this.prefix ? document.fullscreenElement : document[this.prefix + 'FullscreenElement'];
+            var element = !this.prefix ? document.fullscreenElement : document['' + this.prefix + this.name + 'Element'];
 
             return element === this.target;
         }
@@ -7079,7 +7342,7 @@ var Fullscreen = function () {
         key: 'prefix',
         get: function get() {
             // No prefix
-            if (utils.is.function(document.cancelFullScreen)) {
+            if (utils.is.function(document.exitFullscreen)) {
                 return false;
             }
 
@@ -7088,12 +7351,9 @@ var Fullscreen = function () {
             var prefixes = ['webkit', 'moz', 'ms'];
 
             prefixes.some(function (pre) {
-                if (utils.is.function(document[pre + 'CancelFullScreen'])) {
+                if (utils.is.function(document[pre + 'ExitFullscreen']) || utils.is.function(document[pre + 'CancelFullScreen'])) {
                     value = pre;
                     return true;
-                } else if (utils.is.function(document.msExitFullscreen)) {
-                    value = 'ms';
-                    return true;
                 }
 
                 return false;
@@ -7101,6 +7361,11 @@ var Fullscreen = function () {
 
             return value;
         }
+    }, {
+        key: 'name',
+        get: function get() {
+            return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
+        }
     }]);
     return Fullscreen;
 }();
@@ -8356,7 +8621,7 @@ var controls = {
         var type = 'speed';
 
         // Set the default speeds
-        if (!utils.is.object(this.options.speed) || !Object.keys(this.options.speed).length) {
+        if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
             this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
         }
 
@@ -8576,7 +8841,7 @@ var controls = {
 
         // Fast forward button
         if (this.config.controls.includes('fast-forward')) {
-            container.appendChild(controls.createButton.call(this, 'fast-forward'));
+            container.appendChild(controls.createButton.call(this, 'fastForward'));
         }
 
         // Progress
@@ -9153,7 +9418,7 @@ var Listeners = function () {
             });
 
             // Handle native play/pause
-            utils.on(this.player.media, 'playing play pause ended', function (event) {
+            utils.on(this.player.media, 'playing play pause ended emptied', function (event) {
                 return ui.checkPlaying.call(_this3.player, event);
             });
 
@@ -10573,6 +10838,8 @@ var youtube = {
                     // Reset timer
                     clearInterval(player.timers.playing);
 
+                    console.warn(event.data);
+
                     // Handle events
                     // -1   Unstarted
                     // 0    Ended
@@ -10581,6 +10848,16 @@ var youtube = {
                     // 3    Buffering
                     // 5    Video cued
                     switch (event.data) {
+                        case -1:
+                            // Update scrubber
+                            utils.dispatchEvent.call(player, player.media, 'timeupdate');
+
+                            // Get loaded % from YouTube
+                            player.media.buffered = instance.getVideoLoadedFraction();
+                            utils.dispatchEvent.call(player, player.media, 'progress');
+
+                            break;
+
                         case 0:
                             player.media.paused = true;
 
@@ -10680,7 +10957,7 @@ var vimeo = {
     setAspectRatio: function setAspectRatio(input) {
         var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         var padding = 100 / ratio[0] * ratio[1];
-        var height = 200;
+        var height = 240;
         var offset = (height - padding) / (height / 50);
         this.elements.wrapper.style.paddingBottom = padding + '%';
         this.media.style.transform = 'translateY(-' + offset + '%)';
@@ -10750,10 +11027,8 @@ var vimeo = {
         };
 
         player.media.stop = function () {
-            player.embed.stop().then(function () {
-                player.media.paused = true;
-                player.currentTime = 0;
-            });
+            player.pause();
+            player.currentTime = 0;
         };
 
         // Seeking
@@ -11217,7 +11492,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.1
+// plyr.js v3.0.3
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -11562,8 +11837,11 @@ var Plyr$1 = function () {
     }, {
         key: 'stop',
         value: function stop() {
-            this.restart();
-            this.pause();
+            if (this.isHTML5) {
+                this.media.load();
+            } else {
+                this.media.stop();
+            }
         }
 
         /**
@@ -11909,7 +12187,7 @@ var Plyr$1 = function () {
                     clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
-                    if (this.embed !== null) {
+                    if (this.embed !== null && utils.is.function(this.embed.destroy)) {
                         this.embed.destroy();
                     }
 
@@ -12025,7 +12303,7 @@ var Plyr$1 = function () {
             }
 
             // Set
-            this.media.currentTime = targetTime.toFixed(4);
+            this.media.currentTime = parseFloat(targetTime.toFixed(4));
 
             // Logging
             this.debug.log('Seeking to ' + this.currentTime + ' seconds');
@@ -12085,7 +12363,7 @@ var Plyr$1 = function () {
             var fauxDuration = parseInt(this.config.duration, 10);
 
             // True duration
-            var realDuration = Number(this.media.duration);
+            var realDuration = this.media ? Number(this.media.duration) : 0;
 
             // If custom duration is funky, use regular duration
             return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;
@@ -12521,7 +12799,7 @@ var Plyr$1 = function () {
 
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.1
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.0.1",
+    "version": "3.0.3",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -35,6 +35,8 @@
         "gulp-svgstore": "^6.1.1",
         "gulp-uglify-es": "^1.0.1",
         "gulp-util": "^3.0.8",
+        "prettier-eslint": "^8.8.1",
+        "prettier-stylelint": "^0.4.2",
         "rollup-plugin-babel": "^3.0.3",
         "rollup-plugin-commonjs": "^8.4.1",
         "rollup-plugin-node-resolve": "^3.2.0",
@@ -66,6 +68,7 @@
     "dependencies": {
         "babel-polyfill": "^6.26.0",
         "custom-event-polyfill": "^0.3.0",
+        "loadjs": "^3.5.2",
         "raven-js": "^3.23.3"
     }
 }

readme.md

@@ -124,7 +124,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.0.1/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.3/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -140,13 +140,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.0.1/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.3/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.0.1/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.3/plyr.svg`.
 
 ## Ads
 
@@ -236,7 +236,7 @@ The NodeList, HTMLElement or string selector can be the target `<video>`, `<audi
 const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
 ```
 
-The second argument for the constructor is the [#options](options) object:
+The second argument for the constructor is the [options](#options) object:
 
 ```javascript
 const player = new Plyr('#player', {

src/js/controls.js

@@ -708,7 +708,7 @@ const controls = {
         const type = 'speed';
 
         // Set the default speeds
-        if (!utils.is.object(this.options.speed) || !Object.keys(this.options.speed).length) {
+        if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
             this.options.speed = [
                 0.5,
                 0.75,
@@ -927,7 +927,7 @@ const controls = {
 
         // Fast forward button
         if (this.config.controls.includes('fast-forward')) {
-            container.appendChild(controls.createButton.call(this, 'fast-forward'));
+            container.appendChild(controls.createButton.call(this, 'fastForward'));
         }
 
         // Progress

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.3/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -283,7 +283,7 @@ const defaults = {
             pause: '[data-plyr="pause"]',
             restart: '[data-plyr="restart"]',
             rewind: '[data-plyr="rewind"]',
-            forward: '[data-plyr="fast-forward"]',
+            fastForward: '[data-plyr="fast-forward"]',
             mute: '[data-plyr="mute"]',
             captions: '[data-plyr="captions"]',
             fullscreen: '[data-plyr="fullscreen"]',

src/js/fullscreen.js

@@ -1,5 +1,6 @@
 // ==========================================================================
 // Fullscreen wrapper
+// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
 // ==========================================================================
 
 import utils from './utils';
@@ -54,6 +55,7 @@ class Fullscreen {
 
         // Get prefix
         this.prefix = Fullscreen.prefix;
+        this.name = Fullscreen.name;
 
         // Scroll position
         this.scrollPosition = { x: 0, y: 0 };
@@ -85,7 +87,7 @@ class Fullscreen {
     // Get the prefix for handlers
     static get prefix() {
         // No prefix
-        if (utils.is.function(document.cancelFullScreen)) {
+        if (utils.is.function(document.exitFullscreen)) {
             return false;
         }
 
@@ -98,12 +100,9 @@ class Fullscreen {
         ];
 
         prefixes.some(pre => {
-            if (utils.is.function(document[`${pre}CancelFullScreen`])) {
+            if (utils.is.function(document[`${pre}ExitFullscreen`]) || utils.is.function(document[`${pre}CancelFullScreen`])) {
                 value = pre;
                 return true;
-            } else if (utils.is.function(document.msExitFullscreen)) {
-                value = 'ms';
-                return true;
             }
 
             return false;
@@ -112,6 +111,10 @@ class Fullscreen {
         return value;
     }
 
+    static get name() {
+        return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
+    }
+
     // Determine if fullscreen is enabled
     get enabled() {
         const fallback = this.player.config.fullscreen.fallback && !utils.inFrame();
@@ -130,7 +133,7 @@ class Fullscreen {
             return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
         }
 
-        const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}FullscreenElement`];
+        const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.name}Element`];
 
         return element === this.target;
     }
@@ -168,7 +171,7 @@ class Fullscreen {
         } else if (!this.prefix) {
             this.target.requestFullScreen();
         } else if (!utils.is.empty(this.prefix)) {
-            this.target[`${this.prefix}${this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen'}`]();
+            this.target[`${this.prefix}Request${this.name}`]();
         }
     }
 
@@ -187,7 +190,8 @@ class Fullscreen {
         } else if (!this.prefix) {
             document.cancelFullScreen();
         } else if (!utils.is.empty(this.prefix)) {
-            document[`${this.prefix}${this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen'}`]();
+            const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
+            document[`${this.prefix}${action}${this.name}`]();
         }
     }
 

src/js/listeners.js

@@ -267,7 +267,7 @@ class Listeners {
         utils.on(this.player.media, 'volumechange', event => ui.updateVolume.call(this.player, event));
 
         // Handle native play/pause
-        utils.on(this.player.media, 'playing play pause ended', event => ui.checkPlaying.call(this.player, event));
+        utils.on(this.player.media, 'playing play pause ended emptied', event => ui.checkPlaying.call(this.player, event));
 
         // Loading
         utils.on(this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event));

src/js/plugins/vimeo.js

@@ -34,7 +34,7 @@ const vimeo = {
     setAspectRatio(input) {
         const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         const padding = 100 / ratio[0] * ratio[1];
-        const height = 200;
+        const height = 240;
         const offset = (height - padding) / (height / 50);
         this.elements.wrapper.style.paddingBottom = `${padding}%`;
         this.media.style.transform = `translateY(-${offset}%)`;
@@ -101,10 +101,8 @@ const vimeo = {
         };
 
         player.media.stop = () => {
-            player.embed.stop().then(() => {
-                player.media.paused = true;
-                player.currentTime = 0;
-            });
+            player.pause();
+            player.currentTime = 0;
         };
 
         // Seeking

src/js/plugins/youtube.js

@@ -339,6 +339,8 @@ const youtube = {
                     // Reset timer
                     clearInterval(player.timers.playing);
 
+                    console.warn(event.data);
+
                     // Handle events
                     // -1   Unstarted
                     // 0    Ended
@@ -347,6 +349,16 @@ const youtube = {
                     // 3    Buffering
                     // 5    Video cued
                     switch (event.data) {
+                        case -1:
+                            // Update scrubber
+                            utils.dispatchEvent.call(player, player.media, 'timeupdate');
+
+                            // Get loaded % from YouTube
+                            player.media.buffered = instance.getVideoLoadedFraction();
+                            utils.dispatchEvent.call(player, player.media, 'progress');
+
+                            break;
+
                         case 0:
                             player.media.paused = true;
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.1
+// plyr.js v3.0.3
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -379,8 +379,11 @@ class Plyr {
      * Stop playback
      */
     stop() {
-        this.restart();
-        this.pause();
+        if (this.isHTML5) {
+            this.media.load();
+        } else {
+            this.media.stop();
+        }
     }
 
     /**
@@ -425,7 +428,7 @@ class Plyr {
         }
 
         // Set
-        this.media.currentTime = targetTime.toFixed(4);
+        this.media.currentTime = parseFloat(targetTime.toFixed(4));
 
         // Logging
         this.debug.log(`Seeking to ${this.currentTime} seconds`);
@@ -474,7 +477,7 @@ class Plyr {
         const fauxDuration = parseInt(this.config.duration, 10);
 
         // True duration
-        const realDuration = Number(this.media.duration);
+        const realDuration = this.media ? Number(this.media.duration) : 0;
 
         // If custom duration is funky, use regular duration
         return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;
@@ -1139,7 +1142,7 @@ class Plyr {
                 clearInterval(this.timers.playing);
 
                 // Destroy YouTube API
-                if (this.embed !== null) {
+                if (this.embed !== null && utils.is.function(this.embed.destroy)) {
                     this.embed.destroy();
                 }
 

src/js/plyr.polyfilled.js

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

src/js/utils.js

@@ -2,6 +2,8 @@
 // Plyr utils
 // ==========================================================================
 
+import loadjs from 'loadjs';
+
 import support from './support';
 import { providers } from './types';
 
@@ -97,11 +99,10 @@ const utils = {
                     if (responseType === 'text') {
                         try {
                             resolve(JSON.parse(request.responseText));
-                        } catch(e) {
+                        } catch (e) {
                             resolve(request.responseText);
                         }
-                    }
-                    else {
+                    } else {
                         resolve(request.response);
                     }
                 });
@@ -125,52 +126,10 @@ const utils = {
     // Load an external script
     loadScript(url) {
         return new Promise((resolve, reject) => {
-            const current = document.querySelector(`script[src="${url}"]`);
-
-            // Check script is not already referenced, if so wait for load
-            if (current !== null) {
-                current.callbacks = current.callbacks || [];
-                current.callbacks.push(resolve);
-                return;
-            }
-
-            // Build the element
-            const element = document.createElement('script');
-
-            // Callback queue
-            element.callbacks = element.callbacks || [];
-            element.callbacks.push(resolve);
-
-            // Error queue
-            element.errors = element.errors || [];
-            element.errors.push(reject);
-
-            // Bind callback
-            element.addEventListener(
-                'load',
-                event => {
-                    element.callbacks.forEach(cb => cb.call(null, event));
-                    element.callbacks = null;
-                },
-                false,
-            );
-
-            // Bind error handling
-            element.addEventListener(
-                'error',
-                event => {
-                    element.errors.forEach(err => err.call(null, event));
-                    element.errors = null;
-                },
-                false,
-            );
-
-            // Set the URL after binding callback
-            element.src = url;
-
-            // Inject
-            const first = document.getElementsByTagName('script')[0];
-            first.parentNode.insertBefore(element, first);
+            loadjs(url, {
+                success: resolve,
+                error: reject,
+            });
         });
     },
 
@@ -184,7 +143,14 @@ const utils = {
         const hasId = utils.is.string(id);
         let isCached = false;
 
-        function updateSprite(data) {
+        const exists = () => document.querySelectorAll(`#${id}`).length;
+
+        function injectSprite(data) {
+            // Check again incase of race condition
+            if (hasId && exists()) {
+                return;
+            }
+
             // Inject content
             this.innerHTML = data;
 
@@ -192,8 +158,8 @@ const utils = {
             document.body.insertBefore(this, document.body.childNodes[0]);
         }
 
-        // Only load once
-        if (!hasId || !document.querySelectorAll(`#${id}`).length) {
+        // Only load once if ID set
+        if (!hasId || !exists()) {
             // Create container
             const container = document.createElement('div');
             utils.toggleHidden(container, true);
@@ -209,7 +175,7 @@ const utils = {
 
                 if (isCached) {
                     const data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -231,7 +197,7 @@ const utils = {
                         );
                     }
 
-                    updateSprite.call(container, result);
+                    injectSprite.call(container, result);
                 })
                 .catch(() => {});
         }
@@ -481,7 +447,7 @@ const utils = {
                 pause: utils.getElement.call(this, this.config.selectors.buttons.pause),
                 restart: utils.getElement.call(this, this.config.selectors.buttons.restart),
                 rewind: utils.getElement.call(this, this.config.selectors.buttons.rewind),
-                forward: utils.getElement.call(this, this.config.selectors.buttons.forward),
+                fastForward: utils.getElement.call(this, this.config.selectors.buttons.fastForward),
                 mute: utils.getElement.call(this, this.config.selectors.buttons.mute),
                 pip: utils.getElement.call(this, this.config.selectors.buttons.pip),
                 airplay: utils.getElement.call(this, this.config.selectors.buttons.airplay),
@@ -576,7 +542,7 @@ const utils = {
     // Toggle event listener
     toggleListener(elements, event, callback, toggle, passive, capture) {
         // Bail if no elemetns, event, or callback
-        if (utils.is.empty(elements)  || utils.is.empty(event) || !utils.is.function(callback)) {
+        if (utils.is.empty(elements) || utils.is.empty(event) || !utils.is.function(callback)) {
             return;
         }
 

src/sass/components/embed.scss

@@ -6,7 +6,7 @@
 .plyr__video-embed {
     // Default to 16:9 ratio but this is set by JavaScript based on config
     $padding: ((100 / 16) * 9);
-    $height: 200;
+    $height: 240;
     $offset: to-percentage(($height - $padding) / ($height / 50));
 
     height: 0;