v3.3.17

-   Fix YouTube muting after seeking with the progress slider
-   Respect preload="none" when setting quality if the media hasn't been loaded some other way

changelog.md

@@ -1,3 +1,16 @@
+# v3.3.17
+
+-   Fix YouTube muting after seeking with the progress slider
+-   Respect preload="none" when setting quality if the media hasn't been loaded some other way
+
+# v3.3.16
+
+-   Fixed regression relating the play button status (fixes #1048)
+
+# v3.3.15
+
+-   Fix for error relating to play buttons when switching source
+
 # v3.3.14
 
 -   Fix sprite loading regression

demo/index.html

@@ -96,7 +96,7 @@
                 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
                 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
                 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">
+                <!-- <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440"> -->
 
                 <!-- Caption files -->
                 <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"

dist/plyr.js

@@ -769,22 +769,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 source = sources.find(function (source) {
-                    var _sources$filter = sources.filter(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 +794,30 @@ typeof navigator === "object" && (function (global, factory) {
                     }
 
                     // Get current state
-                    var currentTime = player.currentTime,
+                    var _player$media = player.media,
-                        playing = player.playing;
+                        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
+                    // Prevent loading if preload="none" and the current source isn't loaded (#1044)
-                    var onLoadedMetaData = function onLoadedMetaData() {
+                    if (preload !== 'none' || readyState) {
-                        player.currentTime = currentTime;
+                        // Restore time
-                    };
+                        player.once('loadedmetadata', function () {
-                    player.once('loadedmetadata', onLoadedMetaData);
+                            player.currentTime = currentTime;
 
-                    // Load new source
+                            // Resume playing
-                    player.media.load();
+                            if (!paused) {
+                                player.play();
+                            }
+                        });
 
-                    // Resume playing
+                        // Load new source
-                    if (playing) {
+                        player.media.load();
-                        player.play();
                     }
 
                     // Trigger change event
@@ -3997,11 +3997,9 @@ typeof navigator === "object" && (function (global, factory) {
             }
 
             // If there's a play button, set label
-            if (is.nodeList(this.elements.buttons.play)) {
+            Array.from(this.elements.buttons.play || []).forEach(function (button) {
-                Array.from(this.elements.buttons.play).forEach(function (button) {
+                button.setAttribute('aria-label', label);
-                    button.setAttribute('aria-label', label);
+            });
-                });
-            }
 
             // Set iframe title
             // https://github.com/sampotts/plyr/issues/124
@@ -4081,7 +4079,7 @@ typeof navigator === "object" && (function (global, factory) {
             toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
 
             // Set state
-            Array.from(this.elements.buttons.play).forEach(function (target) {
+            Array.from(this.elements.buttons.play || []).forEach(function (target) {
                 target.pressed = _this3.playing;
             });
 
@@ -5824,8 +5822,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 paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
-                                if (player.paused) {
+                                if (player.paused && !player.embed.hasPlayed) {
                                     player.embed.mute();
                                 }
 

dist/plyr.polyfilled.js

@@ -2979,7 +2979,7 @@ typeof navigator === "object" && (function (global, factory) {
 
 	var defineProperty = _objectDp.f;
 	var _wksDefine = function (name) {
-	  var $Symbol = _core.Symbol || (_core.Symbol = _library ? {} : _global.Symbol || {});
+	  var $Symbol = _core.Symbol || (_core.Symbol = _global.Symbol || {});
 	  if (name.charAt(0) != '_' && !(name in $Symbol)) defineProperty($Symbol, name, { value: _wksExt.f(name) });
 	};
 
@@ -6158,16 +6158,11 @@ typeof navigator === "object" && (function (global, factory) {
 	            get: function get() {
 	                // Get sources
 	                var sources = html5.getSources.call(player);
-
+	                var source = sources.find(function (source) {
-	                var _sources$filter = sources.filter(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 +6180,30 @@ typeof navigator === "object" && (function (global, factory) {
 	                }
 
 	                // Get current state
-	                var currentTime = player.currentTime,
+	                var _player$media = player.media,
-	                    playing = player.playing;
+	                    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
+	                // Prevent loading if preload="none" and the current source isn't loaded (#1044)
-	                var onLoadedMetaData = function onLoadedMetaData() {
+	                if (preload !== 'none' || readyState) {
-	                    player.currentTime = currentTime;
+	                    // Restore time
-	                };
+	                    player.once('loadedmetadata', function () {
-	                player.once('loadedmetadata', onLoadedMetaData);
+	                        player.currentTime = currentTime;
 
-	                // Load new source
+	                        // Resume playing
-	                player.media.load();
+	                        if (!paused) {
+	                            player.play();
+	                        }
+	                    });
 
-	                // Resume playing
+	                    // Load new source
-	                if (playing) {
+	                    player.media.load();
-	                    player.play();
 	                }
 
 	                // Trigger change event
@@ -9383,11 +9383,9 @@ typeof navigator === "object" && (function (global, factory) {
 	        }
 
 	        // If there's a play button, set label
-	        if (is$1.nodeList(this.elements.buttons.play)) {
+	        Array.from(this.elements.buttons.play || []).forEach(function (button) {
-	            Array.from(this.elements.buttons.play).forEach(function (button) {
+	            button.setAttribute('aria-label', label);
-	                button.setAttribute('aria-label', label);
+	        });
-	            });
-	        }
 
 	        // Set iframe title
 	        // https://github.com/sampotts/plyr/issues/124
@@ -9467,7 +9465,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
 
 	        // Set state
-	        Array.from(this.elements.buttons.play).forEach(function (target) {
+	        Array.from(this.elements.buttons.play || []).forEach(function (target) {
 	            target.pressed = _this3.playing;
 	        });
 
@@ -11204,8 +11202,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 paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
-	                            if (player.paused) {
+	                            if (player.paused && !player.embed.hasPlayed) {
 	                                player.embed.mute();
 	                            }
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.3.14",
+    "version": "3.3.17",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -49,7 +49,7 @@
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.1.2",
+        "stylelint-scss": "^3.1.3",
         "stylelint-selector-bem-pattern": "^2.0.0"
     },
     "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],

readme.md

@@ -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.14/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.3.17/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.3.14/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.3.17/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.14/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.3.17/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.14/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.17/plyr.svg`.
 
 ## Ads
 

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
+                // Prevent loading if preload="none" and the current source isn't loaded (#1044)
-                const onLoadedMetaData = () => {
+                if (preload !== 'none' || readyState) {
-                    player.currentTime = currentTime;
+                    // Restore time
-                };
+                    player.once('loadedmetadata', () => {
-                player.once('loadedmetadata', onLoadedMetaData);
+                        player.currentTime = currentTime;
 
-                // Load new source
+                        // Resume playing
-                player.media.load();
+                        if (!paused) {
+                            player.play();
+                        }
+                    });
 
-                // Resume playing
+                    // Load new source
-                if (playing) {
+                    player.media.load();
-                    player.play();
                 }
 
                 // Trigger change event

src/js/plugins/youtube.js

@@ -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 paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
-                            if (player.paused) {
+                            if (player.paused && !player.embed.hasPlayed) {
                                 player.embed.mute();
                             }
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.14
+// plyr.js v3.3.17
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/plyr.polyfilled.js

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

src/js/ui.js

@@ -135,11 +135,9 @@ const ui = {
         }
 
         // If there's a play button, set label
-        if (is.nodeList(this.elements.buttons.play)) {
+        Array.from(this.elements.buttons.play || []).forEach(button => {
-            Array.from(this.elements.buttons.play).forEach(button => {
+            button.setAttribute('aria-label', label);
-                button.setAttribute('aria-label', label);
+        });
-            });
-        }
 
         // Set iframe title
         // https://github.com/sampotts/plyr/issues/124
@@ -214,7 +212,7 @@ const ui = {
         toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
 
         // Set state
-        Array.from(this.elements.buttons.play).forEach(target => {
+        Array.from(this.elements.buttons.play || []).forEach(target => {
             target.pressed = this.playing;
         });