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,20 @@
+# 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
+
 # v3.3.13
 
 You guessed it, a load of awesome changes from contributors:

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"

demo/src/js/demo.js

@@ -143,7 +143,11 @@ import Raven from 'raven-js';
             // Set a new source
             function newSource(type, init) {
                 // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+                if (
+                    !(type in types) ||
+                    (!init && type === currentType) ||
+                    (!currentType.length && type === types.video)
+                ) {
                     return;
                 }
 
@@ -215,10 +219,12 @@ import Raven from 'raven-js';
                     case types.youtube:
                         player.source = {
                             type: 'video',
-                            sources: [{
+                            sources: [
-                                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                                {
-                                provider: 'youtube',
+                                    src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
-                            }],
+                                    provider: 'youtube',
+                                },
+                            ],
                         };
 
                         break;
@@ -226,10 +232,12 @@ import Raven from 'raven-js';
                     case types.vimeo:
                         player.source = {
                             type: 'video',
-                            sources: [{
+                            sources: [
-                                src: 'https://vimeo.com/76979871',
+                                {
-                                provider: 'vimeo',
+                                    src: 'https://vimeo.com/76979871',
-                            }],
+                                    provider: 'vimeo',
+                                },
+                            ],
                         };
 
                         break;

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
@@ -1137,6 +1137,51 @@ typeof navigator === "object" && (function (global, factory) {
         return Storage;
     }();
 
+    // ==========================================================================
+    // Fetch wrapper
+    // Using XHR to avoid issues with older browsers
+    // ==========================================================================
+
+    function fetch(url) {
+        var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+
+        return new Promise(function (resolve, reject) {
+            try {
+                var request = new XMLHttpRequest();
+
+                // Check for CORS support
+                if (!('withCredentials' in request)) {
+                    return;
+                }
+
+                request.addEventListener('load', function () {
+                    if (responseType === 'text') {
+                        try {
+                            resolve(JSON.parse(request.responseText));
+                        } catch (e) {
+                            resolve(request.responseText);
+                        }
+                    } else {
+                        resolve(request.response);
+                    }
+                });
+
+                request.addEventListener('error', function () {
+                    throw new Error(request.status);
+                });
+
+                request.open('GET', url, true);
+
+                // Set the required response type
+                request.responseType = responseType;
+
+                request.send();
+            } catch (e) {
+                reject(e);
+            }
+        });
+    }
+
     // ==========================================================================
 
     // Load an external SVG sprite
@@ -2709,51 +2754,6 @@ typeof navigator === "object" && (function (global, factory) {
         }
     };
 
-    // ==========================================================================
-    // Fetch wrapper
-    // Using XHR to avoid issues with older browsers
-    // ==========================================================================
-
-    function fetch$1(url) {
-        var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
-
-        return new Promise(function (resolve, reject) {
-            try {
-                var request = new XMLHttpRequest();
-
-                // Check for CORS support
-                if (!('withCredentials' in request)) {
-                    return;
-                }
-
-                request.addEventListener('load', function () {
-                    if (responseType === 'text') {
-                        try {
-                            resolve(JSON.parse(request.responseText));
-                        } catch (e) {
-                            resolve(request.responseText);
-                        }
-                    } else {
-                        resolve(request.response);
-                    }
-                });
-
-                request.addEventListener('error', function () {
-                    throw new Error(request.statusText);
-                });
-
-                request.open('GET', url, true);
-
-                // Set the required response type
-                request.responseType = responseType;
-
-                request.send();
-            } catch (e) {
-                reject(e);
-            }
-        });
-    }
-
     // ==========================================================================
 
     /**
@@ -2833,7 +2833,7 @@ typeof navigator === "object" && (function (global, factory) {
                     var url = parseUrl(src);
 
                     if (url !== null && url.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(url.protocol)) {
-                        fetch$1(src, 'blob').then(function (blob) {
+                        fetch(src, 'blob').then(function (blob) {
                             track.setAttribute('src', window.URL.createObjectURL(blob));
                         }).catch(function () {
                             removeElement(track);
@@ -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;
             });
 
@@ -5253,7 +5251,7 @@ typeof navigator === "object" && (function (global, factory) {
             player.media = replaceElement(wrapper, player.media);
 
             // Get poster image
-            fetch$1(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
+            fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
                 if (is.empty(response)) {
                     return;
                 }
@@ -5668,7 +5666,7 @@ typeof navigator === "object" && (function (global, factory) {
             if (is.string(key) && !is.empty(key)) {
                 var url = format(this.config.urls.youtube.api, videoId, key);
 
-                fetch$1(url).then(function (result) {
+                fetch(url).then(function (result) {
                     if (is.object(result)) {
                         _this2.config.title = result.items[0].snippet.title;
                         ui.setTitle.call(_this2);
@@ -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

@@ -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
@@ -6523,6 +6523,51 @@ typeof navigator === "object" && (function (global, factory) {
 	    return Storage;
 	}();
 
+	// ==========================================================================
+	// Fetch wrapper
+	// Using XHR to avoid issues with older browsers
+	// ==========================================================================
+
+	function fetch(url) {
+	    var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+
+	    return new Promise(function (resolve, reject) {
+	        try {
+	            var request = new XMLHttpRequest();
+
+	            // Check for CORS support
+	            if (!('withCredentials' in request)) {
+	                return;
+	            }
+
+	            request.addEventListener('load', function () {
+	                if (responseType === 'text') {
+	                    try {
+	                        resolve(JSON.parse(request.responseText));
+	                    } catch (e) {
+	                        resolve(request.responseText);
+	                    }
+	                } else {
+	                    resolve(request.response);
+	                }
+	            });
+
+	            request.addEventListener('error', function () {
+	                throw new Error(request.status);
+	            });
+
+	            request.open('GET', url, true);
+
+	            // Set the required response type
+	            request.responseType = responseType;
+
+	            request.send();
+	        } catch (e) {
+	            reject(e);
+	        }
+	    });
+	}
+
 	// ==========================================================================
 
 	// Load an external SVG sprite
@@ -8095,51 +8140,6 @@ typeof navigator === "object" && (function (global, factory) {
 	    }
 	};
 
-	// ==========================================================================
-	// Fetch wrapper
-	// Using XHR to avoid issues with older browsers
-	// ==========================================================================
-
-	function fetch$1(url) {
-	    var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
-
-	    return new Promise(function (resolve, reject) {
-	        try {
-	            var request = new XMLHttpRequest();
-
-	            // Check for CORS support
-	            if (!('withCredentials' in request)) {
-	                return;
-	            }
-
-	            request.addEventListener('load', function () {
-	                if (responseType === 'text') {
-	                    try {
-	                        resolve(JSON.parse(request.responseText));
-	                    } catch (e) {
-	                        resolve(request.responseText);
-	                    }
-	                } else {
-	                    resolve(request.response);
-	                }
-	            });
-
-	            request.addEventListener('error', function () {
-	                throw new Error(request.statusText);
-	            });
-
-	            request.open('GET', url, true);
-
-	            // Set the required response type
-	            request.responseType = responseType;
-
-	            request.send();
-	        } catch (e) {
-	            reject(e);
-	        }
-	    });
-	}
-
 	// ==========================================================================
 
 	/**
@@ -8219,7 +8219,7 @@ typeof navigator === "object" && (function (global, factory) {
 	                var url = parseUrl(src);
 
 	                if (url !== null && url.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(url.protocol)) {
-	                    fetch$1(src, 'blob').then(function (blob) {
+	                    fetch(src, 'blob').then(function (blob) {
 	                        track.setAttribute('src', window.URL.createObjectURL(blob));
 	                    }).catch(function () {
 	                        removeElement(track);
@@ -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;
 	        });
 
@@ -10633,7 +10631,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        player.media = replaceElement(wrapper, player.media);
 
 	        // Get poster image
-	        fetch$1(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
+	        fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
 	            if (is$1.empty(response)) {
 	                return;
 	            }
@@ -11048,7 +11046,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        if (is$1.string(key) && !is$1.empty(key)) {
 	            var url = format(this.config.urls.youtube.api, videoId, key);
 
-	            fetch$1(url).then(function (result) {
+	            fetch(url).then(function (result) {
 	                if (is$1.object(result)) {
 	                    _this2.config.title = result.items[0].snippet.title;
 	                    ui.setTitle.call(_this2);
@@ -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.13",
+    "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.13/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.13/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.13/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.13/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.13
+// 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.13
+// 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;
         });
 

src/js/utils/fetch.js

@@ -26,7 +26,7 @@ export default function fetch(url, responseType = 'text') {
             });
 
             request.addEventListener('error', () => {
-                throw new Error(request.statusText);
+                throw new Error(request.status);
             });
 
             request.open('GET', url, true);

src/js/utils/loadSprite.js

@@ -3,6 +3,7 @@
 // ==========================================================================
 
 import Storage from './../storage';
+import fetch from './fetch';
 import is from './is';
 
 // Load an external SVG sprite