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,8 @@
+# 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)

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
@@ -5822,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

@@ -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
@@ -11202,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.16",
+    "version": "3.3.17",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",

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.16/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.16/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.16/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.16/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.16
+// 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.16
+// plyr.js v3.3.17
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================