v3.0.3

Fix fast-forward control

changelog.md

@@ -1,3 +1,14 @@
+# 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

dist/plyr.js

@@ -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"]',
@@ -1010,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;
 
@@ -1018,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);
@@ -1035,7 +1044,7 @@ var utils = {
 
                 if (isCached) {
                     var data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -1052,7 +1061,7 @@ var utils = {
                     }));
                 }
 
-                updateSprite.call(container, result);
+                injectSprite.call(container, result);
             }).catch(function () {});
         }
     },
@@ -1318,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),
@@ -1942,6 +1951,7 @@ var Console = function () {
 
 // ==========================================================================
 // Fullscreen wrapper
+// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
 // ==========================================================================
 
 var browser = utils.getBrowser();
@@ -2000,6 +2010,7 @@ var Fullscreen = function () {
 
         // Get prefix
         this.prefix = Fullscreen.prefix;
+        this.name = Fullscreen.name;
 
         // Scroll position
         this.scrollPosition = { x: 0, y: 0 };
@@ -2063,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]();
             }
         }
 
@@ -2085,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]();
             }
         }
 
@@ -2125,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;
         }
@@ -2149,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;
             }
 
@@ -2158,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;
@@ -2171,6 +2180,11 @@ var Fullscreen = function () {
 
             return value;
         }
+    }, {
+        key: 'name',
+        get: function get$$1() {
+            return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
+        }
     }]);
     return Fullscreen;
 }();
@@ -3426,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];
         }
 
@@ -3646,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
@@ -4223,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);
             });
 
@@ -5643,6 +5657,8 @@ var youtube = {
                     // Reset timer
                     clearInterval(player.timers.playing);
 
+                    console.warn(event.data);
+
                     // Handle events
                     // -1   Unstarted
                     // 0    Ended
@@ -5651,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;
 
@@ -5750,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 + '%)';
@@ -5820,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
@@ -6632,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();
+            }
         }
 
         /**
@@ -7095,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');

dist/plyr.polyfilled.js

@@ -5268,7 +5268,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.2/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"]',
@@ -6191,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;
 
@@ -6199,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);
@@ -6216,7 +6225,7 @@ var utils = {
 
                 if (isCached) {
                     var data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -6233,7 +6242,7 @@ var utils = {
                     }));
                 }
 
-                updateSprite.call(container, result);
+                injectSprite.call(container, result);
             }).catch(function () {});
         }
     },
@@ -6499,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),
@@ -7123,6 +7132,7 @@ var Console = function () {
 
 // ==========================================================================
 // Fullscreen wrapper
+// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
 // ==========================================================================
 
 var browser = utils.getBrowser();
@@ -7181,6 +7191,7 @@ var Fullscreen = function () {
 
         // Get prefix
         this.prefix = Fullscreen.prefix;
+        this.name = Fullscreen.name;
 
         // Scroll position
         this.scrollPosition = { x: 0, y: 0 };
@@ -7244,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]();
             }
         }
 
@@ -7266,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]();
             }
         }
 
@@ -7306,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;
         }
@@ -7330,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;
             }
 
@@ -7339,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;
@@ -7352,6 +7361,11 @@ var Fullscreen = function () {
 
             return value;
         }
+    }, {
+        key: 'name',
+        get: function get() {
+            return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
+        }
     }]);
     return Fullscreen;
 }();
@@ -8607,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];
         }
 
@@ -8827,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
@@ -9404,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);
             });
 
@@ -10824,6 +10838,8 @@ var youtube = {
                     // Reset timer
                     clearInterval(player.timers.playing);
 
+                    console.warn(event.data);
+
                     // Handle events
                     // -1   Unstarted
                     // 0    Ended
@@ -10832,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;
 
@@ -10931,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 + '%)';
@@ -11001,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
@@ -11468,7 +11492,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.2
+// plyr.js v3.0.3
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -11813,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();
+            }
         }
 
         /**
@@ -12276,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');

package.json

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

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.2/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.2/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.2/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.2/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.2
+// 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`);

src/js/plyr.polyfilled.js

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

src/js/utils.js

@@ -143,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;
 
@@ -151,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);
@@ -168,7 +175,7 @@ const utils = {
 
                 if (isCached) {
                     const data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -190,7 +197,7 @@ const utils = {
                         );
                     }
 
-                    updateSprite.call(container, result);
+                    injectSprite.call(container, result);
                 })
                 .catch(() => {});
         }
@@ -440,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),

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;