Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss

1 files changed, 51 insertions, 30 deletions

diff --git a/src/js/html5.js b/src/js/html5.js
index e538e922..6e8c6483 100644
--- a/src/js/html5.js
+++ b/src/js/html5.js
@@ -6,6 +6,7 @@ import support from './support';
 import { removeElement } from './utils/elements';
 import { triggerEvent } from './utils/events';
 import is from './utils/is';
+import { silencePromise } from './utils/promise';
 import { setAspectRatio } from './utils/style';
 
 const html5 = {
@@ -30,6 +31,11 @@ const html5 = {
 
     // Get quality levels
     getQualityOptions() {
+        // Whether we're forcing all options (e.g. for streaming)
+        if (this.config.quality.forced) {
+            return this.config.quality.options;
+        }
+
         // Get sizes from <source> elements
         return html5.getSources
             .call(this)
@@ -37,15 +43,20 @@ const html5 = {
             .filter(Boolean);
     },
 
-    extend() {
+    setup() {
         if (!this.isHTML5) {
             return;
         }
 
         const player = this;
 
-        // Set aspect ratio if set
-        setAspectRatio.call(player);
+        // Set speed options from config
+        player.options.speed = player.config.speed.options;
+
+        // Set aspect ratio if fixed
+        if (!is.empty(this.config.ratio)) {
+            setAspectRatio.call(player);
+        }
 
         // Quality
         Object.defineProperty(player.media, 'quality', {
@@ -58,36 +69,46 @@ const html5 = {
                 return source && Number(source.getAttribute('size'));
             },
             set(input) {
-                // Get sources
-                const sources = html5.getSources.call(player);
-                // Get first match for requested size
-                const source = sources.find(s => Number(s.getAttribute('size')) === input);
-
-                // No matching source found
-                if (!source) {
+                if (player.quality === input) {
                     return;
                 }
 
-                // Get current state
-                const { currentTime, paused, preload, readyState } = player.media;
-
-                // Set new source
-                player.media.src = source.getAttribute('src');
-
-                // Prevent loading if preload="none" and the current source isn't loaded (#1044)
-                if (preload !== 'none' || readyState) {
-                    // Restore time
-                    player.once('loadedmetadata', () => {
-                        player.currentTime = currentTime;
-
-                        // Resume playing
-                        if (!paused) {
-                            player.play();
-                        }
-                    });
-
-                    // Load new source
-                    player.media.load();
+                // If we're using an an external handler...
+                if (player.config.quality.forced && is.function(player.config.quality.onChange)) {
+                    player.config.quality.onChange(input);
+                } else {
+                    // Get sources
+                    const sources = html5.getSources.call(player);
+                    // Get first match for requested size
+                    const source = sources.find(s => Number(s.getAttribute('size')) === input);
+
+                    // No matching source found
+                    if (!source) {
+                        return;
+                    }
+
+                    // Get current state
+                    const { currentTime, paused, preload, readyState, playbackRate } = player.media;
+
+                    // Set new source
+                    player.media.src = source.getAttribute('src');
+
+                    // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+                    if (preload !== 'none' || readyState) {
+                        // Restore time
+                        player.once('loadedmetadata', () => {
+                            player.speed = playbackRate;
+                            player.currentTime = currentTime;
+
+                            // Resume playing
+                            if (!paused) {
+                                silencePromise(player.play());
+                            }
+                        });
+
+                        // Load new source
+                        player.media.load();
+                    }
                 }
 
                 // Trigger change event