v3.2.4

v3.2.3
Fix for iOS 9 throwing error for name property in fullscreen API (fixes #908 )
2018-04-27 00:47:51 +10:00 · 2018-04-25 20:02:36 +10:00 · 2018-04-25 19:59:22 +10:00 · 2018-04-25 19:46:39 +10:00 · 2018-04-25 19:40:23 +10:00 · 2018-04-23 00:53:54 +10:00
50 changed files with 3808 additions and 1019 deletions
@@ -9,6 +9,7 @@
                "ignore": ["attribute", "class"]
            }
        ],
+        "string-no-newline": null,
        "indentation": 4,
        "string-quotes": "single",
        "max-nesting-depth": 2,
@@ -11,7 +11,7 @@
    "demo": {
        "sass": {
            "demo.css": "demo/src/sass/bundles/demo.scss",
-            "error.css": "demo/src/sass/bundles/error.csss"
+            "error.css": "demo/src/sass/bundles/error.scss"
        },
        "js": {
            "demo.js": "demo/src/js/demo.js"
@@ -1,3 +1,54 @@
+## v3.2.4
+
+*   Fix issue wher player never reports as ready if controls is empty array
+*   Fix issue where screen reader labels were removed from time displays
+*   Fix issue where custom controls placeholders were not populated
+*   Custom controls HTML example updated
+*   Fix for aria-label being set to the initial state on toggle buttons, overriding the inner labels
+*   Fix for hidden mute button on iOS (not functional for Vimeo due to API limitations) (fixes #656)
+
+## v3.2.3
+
+*   Fix for iOS 9 throwing error for `name` property in fullscreen API (fixes #908)
+
+## v3.2.2
+
+*   Fix for regression in 3.2.1 resulting in hidden buffer display (fixes #920)
+*   Cleaned up incorrect use of `aria-hidden` attribute
+
+## v3.2.1
+
+*   Accessibility improvements for the controls (part of #905 fixes)
+*   Fix for context menu showing on YouTube (thanks Anthony Recenello in Slack)
+*   Vimeo fix for their API not returning the right duration until playback begins (fixes #891)
+
+## v3.2.0
+
+*   Fullscreen fixes (thanks @friday)
+*   Menu fix for if speed not in config
+*   Menu z-index fix (thanks @danielsarin)
+*   i18n fix for missing "Normal" string (thanks @danielsarin)
+*   Safer check for active caption (thanks @Antonio-Laguna)
+*   Add custom property fallback (thanks @friday)
+*   Fixed bug for captions with no srclang and labels and improved logic (fixes #875)
+*   Fix for `playing` false positive (fixes #898)
+*   Fix for IE issue with navigator.language (thanks @nicolasthy) (fixes #893)
+*   Fix for Vimeo controls missing on iOS (thanks @verde-io) (fixes #807)
+*   Fix for double vimeo caption rendering (fixes #877)
+
+## v3.1.0
+
+*   Styling fixes
+
+## v3.1.0-beta.2
+
+*   YouTube playback speed fixes
+
+## v3.1.0-beta.1
+
+*   HTML5 quality selection
+*   Improvements to the YouTube quality selection
+
 ## v3.0.11

 *   Muted and autoplay fixes
@@ -59,6 +59,7 @@ i18n: {
    captions: 'Captions',
    settings: 'Settings',
    speed: 'Speed',
+    normal: 'Normal',
    quality: 'Quality',
    loop: 'Loop',
    start: 'Start',
@@ -120,7 +121,8 @@ const controls = `
        <progress class="plyr__progress--buffer" min="0" max="100" value="0">% buffered</progress>
        <span role="tooltip" class="plyr__tooltip">00:00</span>
    </div>
-    <div class="plyr__time">00:00</div>
+    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
+    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
    <button type="button" class="plyr__control" aria-pressed="false" aria-label="Mute" data-plyr="mute">
        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>
        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>
@@ -245,7 +245,13 @@ function objectFrozen(obj) {
 }

 function truncate(str, max) {
-  return !max || str.length <= max ? str : str.substr(0, max) + '\u2026';
+  if (typeof max !== 'number') {
+    throw new Error('2nd argument to `truncate` function should be a number');
+  }
+  if (typeof str !== 'string' || max === 0) {
+    return str;
+  }
+  return str.length <= max ? str : str.substr(0, max) + '\u2026';
 }

 /**
@@ -544,10 +550,9 @@ function jsonSize(value) {
 }

 function serializeValue(value) {
-  var maxLength = 40;
-
  if (typeof value === 'string') {
-    return value.length <= maxLength ? value : value.substr(0, maxLength - 1) + '\u2026';
+    var maxLength = 40;
+    return truncate(value, maxLength);
  } else if (
    typeof value === 'number' ||
    typeof value === 'boolean' ||
@@ -1777,7 +1782,7 @@ Raven.prototype = {
  // webpack (using a build step causes webpack #1617). Grunt verifies that
  // this value matches package.json during build.
  //   See: https://github.com/getsentry/raven-js/issues/465
-  VERSION: '3.24.0',
+  VERSION: '3.24.2',

  debug: false,

@@ -2066,7 +2071,11 @@ Raven.prototype = {
   */
  _promiseRejectionHandler: function(event) {
    this._logDebug('debug', 'Raven caught unhandled promise rejection:', event);
-    this.captureException(event.reason);
+    this.captureException(event.reason, {
+      extra: {
+        unhandledPromiseRejection: true
+      }
+    });
  },

  /**
@@ -2207,6 +2216,14 @@ Raven.prototype = {

    // stack[0] is `throw new Error(msg)` call itself, we are interested in the frame that was just before that, stack[1]
    var initialCall = isArray$1(stack.stack) && stack.stack[1];
+
+    // if stack[1] is `Raven.captureException`, it means that someone passed a string to it and we redirected that call
+    // to be handled by `captureMessage`, thus `initialCall` is the 3rd one, not 2nd
+    // initialCall => captureException(string) => captureMessage(string)
+    if (initialCall && initialCall.func === 'Raven.captureException') {
+      initialCall = stack.stack[2];
+    }
+
    var fileurl = (initialCall && initialCall.url) || '';

    if (
@@ -3004,17 +3021,30 @@ Raven.prototype = {
              status_code: null
            };

-            return origFetch.apply(this, args).then(function(response) {
-              fetchData.status_code = response.status;
+            return origFetch
+              .apply(this, args)
+              .then(function(response) {
+                fetchData.status_code = response.status;

-              self.captureBreadcrumb({
-                type: 'http',
-                category: 'fetch',
-                data: fetchData
+                self.captureBreadcrumb({
+                  type: 'http',
+                  category: 'fetch',
+                  data: fetchData
+                });
+
+                return response;
+              })
+              ['catch'](function(err) {
+                // if there is an error performing the request
+                self.captureBreadcrumb({
+                  type: 'http',
+                  category: 'fetch',
+                  data: fetchData,
+                  level: 'error'
+                });
+
+                throw err;
              });
-
-              return response;
-            });
          };
        },
        wrappedBuiltIns
@@ -3027,7 +3057,7 @@ Raven.prototype = {
      if (_document.addEventListener) {
        _document.addEventListener('click', self._breadcrumbEventHandler('click'), false);
        _document.addEventListener('keypress', self._keypressEventHandler(), false);
-      } else {
+      } else if (_document.attachEvent) {
        // IE8 Compatibility
        _document.attachEvent('onclick', self._breadcrumbEventHandler('click'));
        _document.attachEvent('onkeypress', self._keypressEventHandler());
@@ -3750,7 +3780,11 @@ Raven.prototype = {
  },

  _logDebug: function(level) {
-    if (this._originalConsoleMethods[level] && this.debug) {
+    // We allow `Raven.debug` and `Raven.config(DSN, { debug: true })` to not make backward incompatible API change
+    if (
+      this._originalConsoleMethods[level] &&
+      (this.debug || this._globalOptions.debug)
+    ) {
      // In IE<10 console methods do not have their own 'apply' method
      Function.prototype.apply.call(
        this._originalConsoleMethods[level],
@@ -3823,11 +3857,11 @@ var singleton = Raven$1;
 * const someAppReporter = new Raven.Client();
 * const someOtherAppReporter = new Raven.Client();
 *
- * someAppReporter('__DSN__', {
+ * someAppReporter.config('__DSN__', {
 *   ...config goes here
 * });
 *
- * someOtherAppReporter('__OTHER_DSN__', {
+ * someOtherAppReporter.config('__OTHER_DSN__', {
 *   ...config goes here
 * });
 *
@@ -3960,8 +3994,21 @@ singleton.Client = Client;
                            type: 'video',
                            title: 'View From A Blue Moon',
                            sources: [{
-                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
-                                type: 'video/mp4'
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+                                type: 'video/mp4',
+                                size: 576
+                            }, {
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+                                type: 'video/mp4',
+                                size: 720
+                            }, {
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+                                type: 'video/mp4',
+                                size: 1080
+                            }, {
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+                                type: 'video/mp4',
+                                size: 1440
                            }],
                            poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
                            tracks: [{
@@ -3998,7 +4045,6 @@ singleton.Client = Client;
                    case types.youtube:
                        player.source = {
                            type: 'video',
-                            title: 'View From A Blue Moon',
                            sources: [{
                                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
                                provider: 'youtube'
@@ -6,8 +6,14 @@
    <title>Doh. Looks like something went wrong.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

+    <!-- Icons -->
+    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
+
    <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/error.css">
+    <link rel="stylesheet" href="dist/error.css?v=2">

    <!-- Preload -->
    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
@@ -27,7 +27,7 @@
    <meta name="twitter:card" content="summary_large_image">

    <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/demo.css">
+    <link rel="stylesheet" href="dist/demo.css?v=2">

    <!-- Preload -->
    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
@@ -93,16 +93,18 @@
        <main>
            <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
                <!-- Video files -->
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
+                <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">

-                <!-- Text track file -->
+                <!-- 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"
                    default>
                <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">

                <!-- Fallback for browsers that don't support the <video> element -->
-                <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
+                <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
            </video>

            <ul>
@@ -112,7 +114,7 @@
                            <title>HTML5</title>
                            <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
                        </svg>
-                        <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
+                        <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
                    </small>
                </li>
                <li class="plyr__cite plyr__cite--audio" hidden>
@@ -139,7 +141,7 @@
                </li>
                <li class="plyr__cite plyr__cite--vimeo" hidden>
                    <small>
-                        <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
+                        <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
                        <span class="color--vimeo">
                            <svg class="icon" role="presentation">
                                <title>Vimeo</title>
@@ -169,7 +171,7 @@
    </aside>

    <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries"
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values"
        crossorigin="anonymous"></script>

    <!-- Plyr core script -->
@@ -119,10 +119,28 @@ import Raven from 'raven-js';
                        player.source = {
                            type: 'video',
                            title: 'View From A Blue Moon',
-                            sources: [{
-                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
-                                type: 'video/mp4',
-                            }],
+                            sources: [
+                                {
+                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+                                    type: 'video/mp4',
+                                    size: 576,
+                                },
+                                {
+                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+                                    type: 'video/mp4',
+                                    size: 720,
+                                },
+                                {
+                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+                                    type: 'video/mp4',
+                                    size: 1080,
+                                },
+                                {
+                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+                                    type: 'video/mp4',
+                                    size: 1440,
+                                },
+                            ],
                            poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
                            tracks: [
                                {
@@ -164,7 +182,6 @@ import Raven from 'raven-js';
                    case types.youtube:
                        player.source = {
                            type: 'video',
-                            title: 'View From A Blue Moon',
                            sources: [{
                                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
                                provider: 'youtube',
@@ -3,12 +3,6 @@
 // ==========================================================================
@charset 'UTF-8';

-// Libs
-@import '../lib/fontface';
-@import '../lib/mixins';
-@import '../lib/normalize';
-@import '../lib/reset';
-
 // Settings
@import '../settings/colors';
@import '../settings/cosmetic';
@@ -17,6 +11,12 @@
@import '../settings/spacing';
@import '../settings/type';

+// Libs
+@import '../lib/fontface';
+@import '../lib/mixins';
+@import '../lib/normalize';
+@import '../lib/reset';
+
 // Layout
@import '../layout/error';

@@ -16,3 +16,4 @@ $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
 $plyr-font-size-captions-medium: 18px;
 $plyr-font-size-captions-large: 21px;
+$plyr-font-size-menu: $plyr-font-size-base;
@@ -6,5 +6,6 @@ h1 {
    @include font-size($font-size-h1);
    font-weight: $font-weight-bold;
    letter-spacing: $letter-spacing-headings;
-    margin: 0 0 ($spacing-base / 2);
+    line-height: 1.2;
+    margin: 0 0 $spacing-base;
 }
@@ -1,6 +1,6 @@
 {
    "name": "plyr",
-    "version": "3.0.11",
+    "version": "3.2.4",
    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
    "homepage": "https://plyr.io",
    "main": "./dist/plyr.js",
@@ -9,14 +9,14 @@
    "style": "./dist/plyr.css",
    "devDependencies": {
        "babel-core": "^6.26.0",
-        "babel-eslint": "^8.2.2",
+        "babel-eslint": "^8.2.3",
        "babel-plugin-external-helpers": "^6.22.0",
        "babel-preset-env": "^1.6.1",
        "del": "^3.0.0",
        "eslint": "^4.19.1",
        "eslint-config-airbnb-base": "^12.1.0",
        "eslint-config-prettier": "^2.9.0",
-        "eslint-plugin-import": "^2.9.0",
+        "eslint-plugin-import": "^2.11.0",
        "git-branch": "^2.0.1",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^5.0.0",
@@ -28,7 +28,7 @@
        "gulp-rename": "^1.2.2",
        "gulp-replace": "^0.6.1",
        "gulp-s3": "^0.11.0",
-        "gulp-sass": "^3.2.1",
+        "gulp-sass": "^4.0.1",
        "gulp-size": "^3.0.0",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-svgmin": "^1.2.4",
@@ -37,16 +37,16 @@
        "gulp-util": "^3.0.8",
        "prettier-eslint": "^8.8.1",
        "prettier-stylelint": "^0.4.2",
-        "rollup-plugin-babel": "^3.0.3",
+        "rollup-plugin-babel": "^3.0.4",
        "rollup-plugin-commonjs": "^9.1.0",
        "rollup-plugin-node-resolve": "^3.3.0",
        "run-sequence": "^2.2.1",
-        "stylelint": "^9.1.3",
-        "stylelint-config-prettier": "^3.0.4",
+        "stylelint": "^9.2.0",
+        "stylelint-config-prettier": "^3.2.0",
        "stylelint-config-recommended": "^2.1.0",
        "stylelint-config-sass-guidelines": "^5.0.0",
        "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^2.5.0",
+        "stylelint-scss": "^3.0.1",
        "stylelint-selector-bem-pattern": "^2.0.0"
    },
    "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
@@ -69,6 +69,7 @@
        "babel-polyfill": "^6.26.0",
        "custom-event-polyfill": "^0.3.0",
        "loadjs": "^3.5.4",
-        "raven-js": "^3.24.0"
+        "npm": "^6.0.0",
+        "raven-js": "^3.24.2"
    }
 }
@@ -128,7 +128,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.11/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.2.4/plyr.js"></script>
 ```

 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,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.11/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.2.4/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.11/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.2.4/plyr.svg`.

 ## Ads

@@ -6,6 +6,7 @@
 import support from './support';
 import utils from './utils';
 import controls from './controls';
+import i18n from './i18n';

 const captions = {
    // Setup captions
@@ -46,6 +47,7 @@ const captions = {

            return;
        }
+
        // Inject the container
        if (!utils.is.element(this.elements.captions)) {
            this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -148,7 +150,49 @@ const captions = {

    // Get the current track for the current language
    getCurrentTrack() {
-        return captions.getTracks.call(this).find(track => track.language.toLowerCase() === this.language);
+        const tracks = captions.getTracks.call(this);
+
+        if (!tracks.length) {
+            return null;
+        }
+
+        // Get track based on current language
+        let track = tracks.find(track => track.language.toLowerCase() === this.language);
+
+        // Get the <track> with default attribute
+        if (!track) {
+            track = utils.getElement.call(this, 'track[default]');
+        }
+
+        // Get the first track
+        if (!track) {
+            [track] = tracks;
+        }
+
+        return track;
+    },
+
+    // Get UI label for track
+    getLabel(track) {
+        let currentTrack = track;
+
+        if (!utils.is.track(currentTrack) && support.textTracks && this.captions.active) {
+            currentTrack = captions.getCurrentTrack.call(this);
+        }
+
+        if (utils.is.track(currentTrack)) {
+            if (!utils.is.empty(currentTrack.label)) {
+                return currentTrack.label;
+            }
+
+            if (!utils.is.empty(currentTrack.language)) {
+                return track.language.toUpperCase();
+            }
+
+            return i18n.get('enabled', this.config);
+        }
+
+        return i18n.get('disabled', this.config);
    },

    // Display active caption if it contains text
@@ -206,11 +250,6 @@ const captions = {

    // Display captions container and button (for initialization)
    show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
-
        // Try to load the value from storage
        let active = this.storage.get('captions');

@@ -7,6 +7,7 @@ import utils from './utils';
 import ui from './ui';
 import i18n from './i18n';
 import captions from './captions';
+import html5 from './html5';

 // Sniff out the browser
 const browser = utils.getBrowser();
@@ -14,11 +15,6 @@ const browser = utils.getBrowser();
 const controls = {
    // Webkit polyfill for lower fill range
    updateRangeFill(target) {
-        // WebKit only
-        if (!browser.isWebkit) {
-            return;
-        }
-
        // Get range from event if event passed
        const range = utils.is.event(target) ? target.target : target;

@@ -27,6 +23,14 @@ const controls = {
            return;
        }

+        // Set aria value for https://github.com/sampotts/plyr/issues/905
+        range.setAttribute('aria-valuenow', range.value);
+
+        // WebKit only
+        if (!browser.isWebkit) {
+            return;
+        }
+
        // Set CSS custom property
        range.style.setProperty('--value', `${range.value / range.max * 100}%`);
    },
@@ -51,6 +55,7 @@ const controls = {
            icon,
            utils.extend(attributes, {
                role: 'presentation',
+                focusable: 'false',
            }),
        );

@@ -205,7 +210,6 @@ const controls = {

            // Add aria attributes
            attributes['aria-pressed'] = false;
-            attributes['aria-label'] = i18n.get(label, this.config);
        } else {
            button.appendChild(controls.createIcon.call(this, icon));
            button.appendChild(controls.createLabel.call(this, label));
@@ -237,6 +241,7 @@ const controls = {
            'label',
            {
                for: attributes.id,
+                id: `${attributes.id}-label`,
                class: this.config.classNames.hidden,
            },
            i18n.get(type, this.config),
@@ -254,6 +259,12 @@ const controls = {
                    step: 0.01,
                    value: 0,
                    autocomplete: 'off',
+                    // A11y fixes for https://github.com/sampotts/plyr/issues/905
+                    role: 'slider',
+                    'aria-labelledby': `${attributes.id}-label`,
+                    'aria-valuemin': 0,
+                    'aria-valuemax': 100,
+                    'aria-valuenow': 0,
                },
                attributes,
            ),
@@ -280,6 +291,8 @@ const controls = {
                    min: 0,
                    max: 100,
                    value: 0,
+                    role: 'presentation',
+                    'aria-hidden': true,
                },
                attributes,
            ),
@@ -313,22 +326,14 @@ const controls = {

    // Create time display
    createTime(type) {
-        const container = utils.createElement('div', {
-            class: 'plyr__time',
-        });
+        const attributes = utils.getAttributesFromSelector(this.config.selectors.display[type]);

-        container.appendChild(
-            utils.createElement(
-                'span',
-                {
-                    class: this.config.classNames.hidden,
-                },
-                i18n.get(type, this.config),
-            ),
-        );
-
-        container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00'));
+        const container = utils.createElement('div', utils.extend(attributes, {
+            class: `plyr__time ${attributes.class}`,
+            'aria-label': i18n.get(type, this.config),
+        }), '0:00');

+        // Reference for updates
        this.elements.display[type] = container;

        return container;
@@ -353,7 +358,7 @@ const controls = {
            }),
        );

-        const faux = utils.createElement('span', { 'aria-hidden': true });
+        const faux = utils.createElement('span', { hidden: '' });

        label.appendChild(radio);
        label.appendChild(faux);
@@ -428,15 +433,11 @@ const controls = {

    // Hide/show a tab
    toggleTab(setting, toggle) {
-        const tab = this.elements.settings.tabs[setting];
-        const pane = this.elements.settings.panes[setting];
-
-        utils.toggleHidden(tab, !toggle);
-        utils.toggleHidden(pane, !toggle);
+        utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
    },

-    // Set the YouTube quality menu
-    // TODO: Support for HTML5
+    // Set the quality menu
+    // TODO: Vimeo support
    setQualityMenu(options) {
        // Menu required
        if (!utils.is.element(this.elements.settings.panes.quality)) {
@@ -449,14 +450,15 @@ const controls = {
        // Set options if passed and filter based on config
        if (utils.is.array(options)) {
            this.options.quality = options.filter(quality => this.config.quality.options.includes(quality));
-        } else {
-            this.options.quality = this.config.quality.options;
        }

        // Toggle the pane and tab
-        const toggle = !utils.is.empty(this.options.quality) && this.isYouTube;
+        const toggle = !utils.is.empty(this.options.quality) && this.options.quality.length > 1;
        controls.toggleTab.call(this, type, toggle);

+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
        // If we're hiding, nothing more to do
        if (!toggle) {
            return;
@@ -470,20 +472,18 @@ const controls = {
            let label = '';

            switch (quality) {
-                case 'hd2160':
+                case 2160:
                    label = '4K';
                    break;

-                case 'hd1440':
-                    label = 'WQHD';
-                    break;
-
-                case 'hd1080':
+                case 1440:
+                case 1080:
+                case 720:
                    label = 'HD';
                    break;

-                case 'hd720':
-                    label = 'HD';
+                case 576:
+                    label = 'SD';
                    break;

                default:
@@ -497,9 +497,16 @@ const controls = {
            return controls.createBadge.call(this, label);
        };

-        this.options.quality.forEach(quality =>
-            controls.createMenuItem.call(this, quality, list, type, controls.getLabel.call(this, 'quality', quality), getBadge(quality)),
-        );
+        // Sort options by the config and then render options
+        this.options.quality
+            .sort((a, b) => {
+                const sorting = this.config.quality.options;
+                return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
+            })
+            .forEach(quality => {
+                const label = controls.getLabel.call(this, 'quality', quality);
+                controls.createMenuItem.call(this, quality, list, type, label, getBadge(quality));
+            });

        controls.updateSetting.call(this, type, list);
    },
@@ -509,34 +516,17 @@ const controls = {
    getLabel(setting, value) {
        switch (setting) {
            case 'speed':
-                return value === 1 ? 'Normal' : `${value}&times;`;
+                return value === 1 ? i18n.get('normal', this.config) : `${value}&times;`;

            case 'quality':
-                switch (value) {
-                    case 'hd2160':
-                        return '2160P';
-                    case 'hd1440':
-                        return '1440P';
-                    case 'hd1080':
-                        return '1080P';
-                    case 'hd720':
-                        return '720P';
-                    case 'large':
-                        return '480P';
-                    case 'medium':
-                        return '360P';
-                    case 'small':
-                        return '240P';
-                    case 'tiny':
-                        return 'Tiny';
-                    case 'default':
-                        return 'Auto';
-                    default:
-                        return value;
+                if (utils.is.number(value)) {
+                    return `${value}p`;
                }

+                return utils.toTitleCase(value);
+
            case 'captions':
-                return controls.getLanguage.call(this);
+                return captions.getLabel.call(this);

            default:
                return null;
@@ -544,18 +534,27 @@ const controls = {
    },

    // Update the selected setting
-    updateSetting(setting, container) {
+    updateSetting(setting, container, input) {
        const pane = this.elements.settings.panes[setting];
        let value = null;
        let list = container;

        switch (setting) {
            case 'captions':
-                value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config);
+                if (this.captions.active) {
+                    if (this.options.captions.length > 2 || !this.options.captions.some(lang => lang === 'enabled')) {
+                        value = this.captions.language;
+                    } else {
+                        value = 'enabled';
+                    }
+                } else {
+                    value = '';
+                }
+
                break;

            default:
-                value = this[setting];
+                value = !utils.is.empty(input) ? input : this[setting];

                // Get default
                if (utils.is.empty(value)) {
@@ -563,7 +562,7 @@ const controls = {
                }

                // Unsupported value
-                if (!this.options[setting].includes(value)) {
+                if (!utils.is.empty(this.options[setting]) && !this.options[setting].includes(value)) {
                    this.debug.warn(`Unsupported value of '${value}' for ${setting}`);
                    return;
                }
@@ -582,17 +581,19 @@ const controls = {
            list = pane && pane.querySelector('ul');
        }

-        // Update the label
-        if (!utils.is.empty(value)) {
-            const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
-            label.innerHTML = controls.getLabel.call(this, setting, value);
+        // If there's no list it means it's not been rendered...
+        if (!utils.is.element(list)) {
+            return;
        }

-        // Find the radio option
+        // Update the label
+        const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
+        label.innerHTML = controls.getLabel.call(this, setting, value);
+
+        // Find the radio option and check it
        const target = list && list.querySelector(`input[value="${value}"]`);

        if (utils.is.element(target)) {
-            // Check it
            target.checked = true;
        }
    },
@@ -643,21 +644,6 @@ const controls = {

    // Get current selected caption language
    // TODO: rework this to user the getter in the API?
-    getLanguage() {
-        if (!this.supported.ui) {
-            return null;
-        }
-
-        if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) {
-            const currentTrack = captions.getCurrentTrack.call(this);
-
-            if (utils.is.track(currentTrack)) {
-                return currentTrack.label;
-            }
-        }
-
-        return i18n.get('disabled', this.config);
-    },

    // Set a list of available captions languages
    setCaptionsMenu() {
@@ -666,21 +652,24 @@ const controls = {
        const list = this.elements.settings.panes.captions.querySelector('ul');

        // Toggle the pane and tab
-        const hasTracks = captions.getTracks.call(this).length;
-        controls.toggleTab.call(this, type, hasTracks);
+        const toggle = captions.getTracks.call(this).length;
+        controls.toggleTab.call(this, type, toggle);

        // Empty the menu
        utils.emptyElement(list);

+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
        // If there's no captions, bail
-        if (!hasTracks) {
+        if (!toggle) {
            return;
        }

        // Re-map the tracks into just the data we need
        const tracks = captions.getTracks.call(this).map(track => ({
-            language: track.language,
-            label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase(),
+            language: !utils.is.empty(track.language) ? track.language : 'enabled',
+            label: captions.getLabel.call(this, track),
        }));

        // Add the "Disabled" option to turn off captions
@@ -696,12 +685,15 @@ const controls = {
                track.language,
                list,
                'language',
-                track.label || track.language,
-                controls.createBadge.call(this, track.language.toUpperCase()),
+                track.label,
+                track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null,
                track.language.toLowerCase() === this.captions.language.toLowerCase(),
            );
        });

+        // Store reference
+        this.options.captions = tracks.map(track => track.language);
+
        controls.updateSetting.call(this, type, list);
    },

@@ -720,7 +712,9 @@ const controls = {
        const type = 'speed';

        // Set the speed options
-        if (!utils.is.array(options)) {
+        if (utils.is.array(options)) {
+            this.options.speed = options;
+        } else if (this.isHTML5 || this.isVimeo) {
            this.options.speed = [
                0.5,
                0.75,
@@ -730,15 +724,13 @@ const controls = {
                1.75,
                2,
            ];
-        } else {
-            this.options.speed = options;
        }

        // Set options if passed and filter based on config
        this.options.speed = this.options.speed.filter(speed => this.config.speed.options.includes(speed));

        // Toggle the pane and tab
-        const toggle = !utils.is.empty(this.options.speed);
+        const toggle = !utils.is.empty(this.options.speed) && this.options.speed.length > 1;
        controls.toggleTab.call(this, type, toggle);

        // Check if we need to toggle the parent
@@ -752,25 +744,24 @@ const controls = {
        // Get the list to populate
        const list = this.elements.settings.panes.speed.querySelector('ul');

-        // Show the pane and tab
-        utils.toggleHidden(this.elements.settings.tabs.speed, false);
-        utils.toggleHidden(this.elements.settings.panes.speed, false);
-
        // Empty the menu
        utils.emptyElement(list);

        // Create items
-        this.options.speed.forEach(speed => controls.createMenuItem.call(this, speed, list, type, controls.getLabel.call(this, 'speed', speed)));
+        this.options.speed.forEach(speed => {
+            const label = controls.getLabel.call(this, 'speed', speed);
+            controls.createMenuItem.call(this, speed, list, type, label);
+        });

        controls.updateSetting.call(this, type, list);
    },

    // Check if we need to hide/show the settings menu
    checkMenu() {
-        const speedHidden = this.elements.settings.tabs.speed.getAttribute('hidden') !== null;
-        const languageHidden = this.elements.settings.tabs.captions.getAttribute('hidden') !== null;
+        const { tabs } = this.elements.settings;
+        const visible = !utils.is.empty(tabs) && Object.values(tabs).some(tab => !tab.hidden);

-        utils.toggleHidden(this.elements.settings.menu, speedHidden && languageHidden);
+        utils.toggleHidden(this.elements.settings.menu, !visible);
    },

    // Show/hide menu
@@ -783,7 +774,7 @@ const controls = {
            return;
        }

-        const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
+        const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');

        if (utils.is.event(event)) {
            const isMenuItem = utils.is.element(form) && form.contains(event.target);
@@ -808,7 +799,7 @@ const controls = {
        }

        if (utils.is.element(form)) {
-            form.setAttribute('aria-hidden', !show);
+            utils.toggleHidden(form, !show);
            utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show);

            if (show) {
@@ -824,7 +815,7 @@ const controls = {
        const clone = tab.cloneNode(true);
        clone.style.position = 'absolute';
        clone.style.opacity = 0;
-        clone.setAttribute('aria-hidden', false);
+        clone.removeAttribute('hidden');

        // Prevent input's being unchecked due to the name being identical
        Array.from(clone.querySelectorAll('input[name]')).forEach(input => {
@@ -868,7 +859,7 @@ const controls = {

        // Hide all other tabs
        // Get other tabs
-        const current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+        const current = menu.querySelector('[role="tabpanel"]:not([hidden])');
        const container = current.parentNode;

        // Set other toggles to be expanded false
@@ -912,11 +903,11 @@ const controls = {
        }

        // Set attributes on current tab
-        current.setAttribute('aria-hidden', true);
+        utils.toggleHidden(current, true);
        current.setAttribute('tabindex', -1);

        // Set attributes on target
-        pane.setAttribute('aria-hidden', !show);
+        utils.toggleHidden(pane, !show);
        tab.setAttribute('aria-expanded', show);
        pane.removeAttribute('tabindex');

@@ -1043,6 +1034,7 @@ const controls = {
        if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
            const menu = utils.createElement('div', {
                class: 'plyr__menu',
+                hidden: '',
            });

            menu.appendChild(
@@ -1057,7 +1049,7 @@ const controls = {
            const form = utils.createElement('form', {
                class: 'plyr__menu__container',
                id: `plyr-settings-${data.id}`,
-                'aria-hidden': true,
+                hidden: '',
                'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
                role: 'tablist',
                tabindex: -1,
@@ -1067,7 +1059,6 @@ const controls = {

            const home = utils.createElement('div', {
                id: `plyr-settings-${data.id}-home`,
-                'aria-hidden': false,
                'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
                role: 'tabpanel',
            });
@@ -1118,11 +1109,10 @@ const controls = {
            this.config.settings.forEach(type => {
                const pane = utils.createElement('div', {
                    id: `plyr-settings-${data.id}-${type}`,
-                    'aria-hidden': true,
+                    hidden: '',
                    'aria-labelled-by': `plyr-settings-${data.id}-${type}-tab`,
                    role: 'tabpanel',
                    tabindex: -1,
-                    hidden: '',
                });

                const back = utils.createElement(
@@ -1177,6 +1167,10 @@ const controls = {

        this.elements.controls = container;

+        if (this.isHTML5) {
+            controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
+        }
+
        controls.setSpeedMenu.call(this);

        return container;
@@ -1201,17 +1195,21 @@ const controls = {
        let container = null;
        this.elements.controls = null;

-        // HTML or Element passed as the option
+        // Set template properties
+        const props = {
+            id: this.id,
+            seektime: this.config.seekTime,
+            title: this.config.title,
+        };
+        let update = true;
+
        if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) {
+            // String or HTMLElement passed as the option
            container = this.config.controls;
        } else if (utils.is.function(this.config.controls)) {
            // A custom function to build controls
            // The function can return a HTMLElement or String
-            container = this.config.controls({
-                id: this.id,
-                seektime: this.config.seekTime,
-                title: this.config.title,
-            });
+            container = this.config.controls.call(this, props);
        } else {
            // Create controls
            container = controls.create.call(this, {
@@ -1219,10 +1217,34 @@ const controls = {
                seektime: this.config.seekTime,
                speed: this.speed,
                quality: this.quality,
-                captions: controls.getLanguage.call(this),
+                captions: captions.getLabel.call(this),
                // TODO: Looping
                // loop: 'None',
            });
+            update = false;
+        }
+
+        // Replace props with their value
+        const replace = input => {
+            let result = input;
+
+            Object.entries(props).forEach(([
+                key,
+                value,
+            ]) => {
+                result = utils.replaceAll(result, `{${key}}`, value);
+            });
+
+            return result;
+        };
+
+        // Update markup
+        if (update) {
+            if (utils.is.string(this.config.controls)) {
+                container = replace(container);
+            } else if (utils.is.element(container)) {
+                container.innerHTML = replace(container.innerHTML);
+            }
        }

        // Controls container
@@ -1241,7 +1263,7 @@ const controls = {
        // Inject controls HTML
        if (utils.is.element(container)) {
            target.appendChild(container);
-        } else {
+        } else if (container) {
            target.insertAdjacentHTML('beforeend', container);
        }

@@ -56,24 +56,26 @@ const defaults = {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.11/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.4/plyr.svg',

    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

    // Quality default
    quality: {
-        default: 'default',
+        default: 576,
        options: [
-            'hd2160',
-            'hd1440',
-            'hd1080',
-            'hd720',
-            'large',
-            'medium',
-            'small',
-            'tiny',
-            'default',
+            4320,
+            2880,
+            2160,
+            1440,
+            1080,
+            720,
+            576,
+            480,
+            360,
+            240,
+            'default', // YouTube's "auto"
        ],
    },

@@ -113,7 +115,7 @@ const defaults = {
    // Captions settings
    captions: {
        active: false,
-        language: window.navigator.language.split('-')[0],
+        language: (navigator.language || navigator.userLanguage).split('-')[0],
    },

    // Fullscreen settings
@@ -175,6 +177,7 @@ const defaults = {
        captions: 'Captions',
        settings: 'Settings',
        speed: 'Speed',
+        normal: 'Normal',
        quality: 'Quality',
        loop: 'Loop',
        start: 'Start',
@@ -182,6 +185,7 @@ const defaults = {
        all: 'All',
        reset: 'Reset',
        disabled: 'Disabled',
+        enabled: 'Enabled',
        advertisement: 'Ad',
    },

@@ -55,7 +55,7 @@ class Fullscreen {

        // Get prefix
        this.prefix = Fullscreen.prefix;
-        this.name = Fullscreen.name;
+        this.property = Fullscreen.property;

        // Scroll position
        this.scrollPosition = { x: 0, y: 0 };
@@ -68,13 +68,15 @@ class Fullscreen {
        });

        // Fullscreen toggle on double click
-        utils.on(this.player.elements.container, 'dblclick', () => {
+        utils.on(this.player.elements.container, 'dblclick', event => {
+            // Ignore double click in controls
+            if (utils.is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) {
+                return;
+            }
+
            this.toggle();
        });

-        // Prevent double click on controls bubbling up
-        utils.on(this.player.elements.controls, 'dblclick', event => event.stopPropagation());
-
        // Update the UI
        this.update();
    }
@@ -88,7 +90,7 @@ class Fullscreen {
    static get prefix() {
        // No prefix
        if (utils.is.function(document.exitFullscreen)) {
-            return false;
+            return '';
        }

        // Check for fullscreen support by vendor prefix
@@ -111,7 +113,7 @@ class Fullscreen {
        return value;
    }

-    static get name() {
+    static get property() {
        return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
    }

@@ -136,7 +138,7 @@ class Fullscreen {
            return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
        }

-        const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.name}Element`];
+        const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];

        return element === this.target;
    }
@@ -174,7 +176,7 @@ class Fullscreen {
        } else if (!this.prefix) {
            this.target.requestFullscreen();
        } else if (!utils.is.empty(this.prefix)) {
-            this.target[`${this.prefix}Request${this.name}`]();
+            this.target[`${this.prefix}Request${this.property}`]();
        }
    }

@@ -191,10 +193,10 @@ class Fullscreen {
        } else if (!Fullscreen.native) {
            toggleFallback.call(this, false);
        } else if (!this.prefix) {
-            document.cancelFullScreen();
+            (document.cancelFullScreen || document.exitFullscreen).call(document);
        } else if (!utils.is.empty(this.prefix)) {
            const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
-            document[`${this.prefix}${action}${this.name}`]();
+            document[`${this.prefix}${action}${this.property}`]();
        }
    }

@@ -0,0 +1,146 @@
+// ==========================================================================
+// Plyr HTML5 helpers
+// ==========================================================================
+
+import support from './support';
+import utils from './utils';
+
+const html5 = {
+    getSources() {
+        if (!this.isHTML5) {
+            return null;
+        }
+
+        return this.media.querySelectorAll('source');
+    },
+
+    // Get quality levels
+    getQualityOptions() {
+        if (!this.isHTML5) {
+            return null;
+        }
+
+        // Get sources
+        const sources = html5.getSources.call(this);
+
+        if (utils.is.empty(sources)) {
+            return null;
+        }
+
+        // Get <source> with size attribute
+        const sizes = Array.from(sources).filter(source => !utils.is.empty(source.getAttribute('size')));
+
+        // If none, bail
+        if (utils.is.empty(sizes)) {
+            return null;
+        }
+
+        // Reduce to unique list
+        return utils.dedupe(sizes.map(source => Number(source.getAttribute('size'))));
+    },
+
+    extend() {
+        if (!this.isHTML5) {
+            return;
+        }
+
+        const player = this;
+
+        // Quality
+        Object.defineProperty(player.media, 'quality', {
+            get() {
+                // Get sources
+                const sources = html5.getSources.call(player);
+
+                if (utils.is.empty(sources)) {
+                    return null;
+                }
+
+                const matches = Array.from(sources).filter(source => source.getAttribute('src') === player.source);
+
+                if (utils.is.empty(matches)) {
+                    return null;
+                }
+
+                return Number(matches[0].getAttribute('size'));
+            },
+            set(input) {
+                // Get sources
+                const sources = html5.getSources.call(player);
+
+                if (utils.is.empty(sources)) {
+                    return;
+                }
+
+                // Get matches for requested size
+                const matches = Array.from(sources).filter(source => Number(source.getAttribute('size')) === input);
+
+                // No matches for requested size
+                if (utils.is.empty(matches)) {
+                    return;
+                }
+
+                // Get supported sources
+                const supported = matches.filter(source => support.mime.call(player, source.getAttribute('type')));
+
+                // No supported sources
+                if (utils.is.empty(supported)) {
+                    return;
+                }
+
+                // Trigger change event
+                utils.dispatchEvent.call(player, player.media, 'qualityrequested', false, {
+                    quality: input,
+                });
+
+                // Get current state
+                const { currentTime, playing } = player;
+
+                // Set new source
+                player.media.src = supported[0].getAttribute('src');
+
+                // Load new source
+                player.media.load();
+
+                // Resume playing
+                if (playing) {
+                    player.play();
+                }
+
+                // Restore time
+                player.currentTime = currentTime;
+
+                // Trigger change event
+                utils.dispatchEvent.call(player, player.media, 'qualitychange', false, {
+                    quality: input,
+                });
+            },
+        });
+    },
+
+    // Cancel current network requests
+    // See https://github.com/sampotts/plyr/issues/174
+    cancelRequests() {
+        if (!this.isHTML5) {
+            return;
+        }
+
+        // Remove child sources
+        utils.removeElement(html5.getSources());
+
+        // Set blank video src attribute
+        // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
+        // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
+        this.media.setAttribute('src', this.config.blankVideo);
+
+        // Load the new empty source
+        // This will cancel existing requests
+        // See https://github.com/sampotts/plyr/issues/174
+        this.media.load();
+
+        // Debugging
+        this.debug.log('Cancelled network requests');
+    },
+};
+
+export default html5;
@@ -2,7 +2,6 @@
 // Plyr Event Listeners
 // ==========================================================================

-import support from './support';
 import utils from './utils';
 import controls from './controls';
 import ui from './ui';
@@ -254,7 +253,7 @@ class Listeners {
        utils.on(this.player.media, 'timeupdate seeking', event => ui.timeUpdate.call(this.player, event));

        // Display duration
-        utils.on(this.player.media, 'durationchange loadedmetadata', event => ui.durationUpdate.call(this.player, event));
+        utils.on(this.player.media, 'durationchange loadeddata loadedmetadata', event => ui.durationUpdate.call(this.player, event));

        // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
@@ -293,6 +292,10 @@ class Listeners {
        // If autoplay, then load advertisement if required
        // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
        utils.on(this.player.media, 'playing', () => {
+            if (!this.player.ads) {
+                return;
+            }
+
            // If ads are enabled, wait for them first
            if (this.player.ads.enabled && !this.player.ads.initialized) {
                // Wait for manager response
@@ -331,7 +334,7 @@ class Listeners {
        // Disable right click
        if (this.player.supported.ui && this.player.config.disableContextMenu) {
            utils.on(
-                this.player.media,
+                this.player.elements.wrapper,
                'contextmenu',
                event => {
                    event.preventDefault();
@@ -355,13 +358,16 @@ class Listeners {
            this.player.storage.set({ speed: this.player.speed });
        });

-        // Quality change
-        utils.on(this.player.media, 'qualitychange', () => {
-            // Update UI
-            controls.updateSetting.call(this.player, 'quality');
-
+        // Quality request
+        utils.on(this.player.media, 'qualityrequested', event => {
            // Save to storage
-            this.player.storage.set({ quality: this.player.quality });
+            this.player.storage.set({ quality: event.detail.quality });
+        });
+
+        // Quality change
+        utils.on(this.player.media, 'qualitychange', event => {
+            // Update UI
+            controls.updateSetting.call(this.player, 'quality', null, event.detail.quality);
        });

        // Caption language change
@@ -6,6 +6,7 @@ import support from './support';
 import utils from './utils';
 import youtube from './plugins/youtube';
 import vimeo from './plugins/vimeo';
+import html5 from './html5';
 import ui from './ui';

 // Sniff out the browser
@@ -75,32 +76,10 @@ const media = {
            }
        } else if (this.isHTML5) {
            ui.setTitle.call(this);
+
+            html5.extend.call(this);
        }
    },
-
-    // Cancel current network requests
-    // See https://github.com/sampotts/plyr/issues/174
-    cancelRequests() {
-        if (!this.isHTML5) {
-            return;
-        }
-
-        // Remove child sources
-        utils.removeElement(this.media.querySelectorAll('source'));
-
-        // Set blank video src attribute
-        // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
-        // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
-        this.media.setAttribute('src', this.config.blankVideo);
-
-        // Load the new empty source
-        // This will cancel existing requests
-        // See https://github.com/sampotts/plyr/issues/174
-        this.media.load();
-
-        // Debugging
-        this.debug.log('Cancelled network requests');
-    },
 };

 export default media;
@@ -35,10 +35,14 @@ 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 = 240;
-        const offset = (height - padding) / (height / 50);
        this.elements.wrapper.style.paddingBottom = `${padding}%`;
-        this.media.style.transform = `translateY(-${offset}%)`;
+
+        if (this.supported.ui) {
+            const height = 240;
+            const offset = (height - padding) / (height / 50);
+
+            this.media.style.transform = `translateY(-${offset}%)`;
+        }
    },

    // API Ready
@@ -55,6 +59,7 @@ const vimeo = {
            speed: true,
            transparent: 0,
            gesture: 'media',
+            playsinline: !this.config.fullscreen.iosNative,
        };
        const params = utils.buildUrlParams(options);

@@ -88,6 +93,11 @@ const vimeo = {
        player.media.paused = true;
        player.media.currentTime = 0;

+        // Disable native text track rendering
+        if (player.supported.ui) {
+            player.embed.disableTextTrack();
+        }
+
        // Create a faux HTML5 API using the Vimeo API
        player.media.play = () => {
            player.embed.play().then(() => {
@@ -124,7 +134,9 @@ const vimeo = {
                utils.dispatchEvent.call(player, player.media, 'seeking');

                // Seek after events
-                player.embed.setCurrentTime(time);
+                player.embed.setCurrentTime(time).catch(() => {
+                    // Do nothing
+                });

                // Restore pause state
                if (paused) {
@@ -310,6 +322,15 @@ const vimeo = {
            if (parseInt(data.percent, 10) === 1) {
                utils.dispatchEvent.call(player, player.media, 'canplaythrough');
            }
+
+            // Get duration as if we do it before load, it gives an incorrect value
+            // https://github.com/sampotts/plyr/issues/891
+            player.embed.getDuration().then(value => {
+                if (value !== player.media.duration) {
+                    player.media.duration = value;
+                    utils.dispatchEvent.call(player, player.media, 'durationchange');
+                }
+            });
        });

        player.embed.on('seeked', () => {
@@ -6,6 +6,64 @@ import utils from './../utils';
 import controls from './../controls';
 import ui from './../ui';

+// Standardise YouTube quality unit
+function mapQualityUnit(input) {
+    switch (input) {
+        case 'hd2160':
+            return 2160;
+
+        case 2160:
+            return 'hd2160';
+
+        case 'hd1440':
+            return 1440;
+
+        case 1440:
+            return 'hd1440';
+
+        case 'hd1080':
+            return 1080;
+
+        case 1080:
+            return 'hd1080';
+
+        case 'hd720':
+            return 720;
+
+        case 720:
+            return 'hd720';
+
+        case 'large':
+            return 480;
+
+        case 480:
+            return 'large';
+
+        case 'medium':
+            return 360;
+
+        case 360:
+            return 'medium';
+
+        case 'small':
+            return 240;
+
+        case 240:
+            return 'small';
+
+        default:
+            return 'default';
+    }
+}
+
+function mapQualityUnits(levels) {
+    if (utils.is.empty(levels)) {
+        return levels;
+    }
+
+    return utils.dedupe(levels.map(level => mapQualityUnit(level)));
+}
+
 const youtube = {
    setup() {
        // Add embed class for responsive
@@ -168,14 +226,10 @@ const youtube = {

                    utils.dispatchEvent.call(player, player.media, 'error');
                },
-                onPlaybackQualityChange(event) {
-                    // Get the instance
-                    const instance = event.target;
-
-                    // Get current quality
-                    player.media.quality = instance.getPlaybackQuality();
-
-                    utils.dispatchEvent.call(player, player.media, 'qualitychange');
+                onPlaybackQualityChange() {
+                    utils.dispatchEvent.call(player, player.media, 'qualitychange', false, {
+                        quality: player.media.quality,
+                    });
                },
                onPlaybackRateChange(event) {
                    // Get the instance
@@ -216,6 +270,9 @@ const youtube = {
                            return Number(instance.getCurrentTime());
                        },
                        set(time) {
+                            // Vimeo will automatically play on seek
+                            const { paused } = player.media;
+
                            // Set seeking flag
                            player.media.seeking = true;

@@ -224,6 +281,11 @@ const youtube = {

                            // Seek after events sent
                            instance.seekTo(time);
+
+                            // Restore pause state
+                            if (paused) {
+                                player.pause();
+                            }
                        },
                    });

@@ -240,15 +302,18 @@ const youtube = {
                    // Quality
                    Object.defineProperty(player.media, 'quality', {
                        get() {
-                            return instance.getPlaybackQuality();
+                            return mapQualityUnit(instance.getPlaybackQuality());
                        },
                        set(input) {
+                            const quality = input;
+
+                            // Set via API
+                            instance.setPlaybackQuality(mapQualityUnit(quality));
+
                            // Trigger request event
                            utils.dispatchEvent.call(player, player.media, 'qualityrequested', false, {
-                                quality: input,
+                                quality,
                            });
-
-                            instance.setPlaybackQuality(input);
                        },
                    });

@@ -294,8 +359,7 @@ const youtube = {
                    });

                    // Get available speeds
-                    const options = instance.getAvailablePlaybackRates();
-                    controls.setSpeedMenu.call(player, options);
+                    player.options.speed = instance.getAvailablePlaybackRates();

                    // Set the tabindex to avoid focus entering iframe
                    if (player.supported.ui) {
@@ -401,7 +465,7 @@ const youtube = {
                            }

                            // Get quality
-                            controls.setQualityMenu.call(player, instance.getAvailableQualityLevels());
+                            controls.setQualityMenu.call(player, mapQualityUnits(instance.getAvailableQualityLevels()));

                            break;

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.11
+// plyr.js v3.2.4
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -57,7 +57,7 @@ class Plyr {
        this.config = utils.extend(
            {},
            defaults,
-            options,
+            options || {},
            (() => {
                try {
                    return JSON.parse(this.media.getAttribute('data-plyr-config'));
@@ -97,6 +97,7 @@ class Plyr {
        this.options = {
            speed: [],
            quality: [],
+            captions: [],
        };

        // Debugging
@@ -184,12 +185,17 @@ class Plyr {
                        if (truthy.includes(params.autoplay)) {
                            this.config.autoplay = true;
                        }
-                        if (truthy.includes(params.playsinline)) {
-                            this.config.inline = true;
-                        }
                        if (truthy.includes(params.loop)) {
                            this.config.loop.active = true;
                        }
+
+                        // TODO: replace fullscreen.iosNative with this playsinline config option
+                        // YouTube requires the playsinline in the URL
+                        if (this.isYouTube) {
+                            this.config.playsinline = truthy.includes(params.playsinline);
+                        } else {
+                            this.config.playsinline = true;
+                        }
                    }
                } else {
                    // <div> with attributes
@@ -223,7 +229,7 @@ class Plyr {
                    this.config.autoplay = true;
                }
                if (this.media.hasAttribute('playsinline')) {
-                    this.config.inline = true;
+                    this.config.playsinline = true;
                }
                if (this.media.hasAttribute('muted')) {
                    this.config.muted = true;
@@ -240,7 +246,7 @@ class Plyr {
        }

        // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.inline);
+        this.supported = support.check(this.type, this.provider, this.config.playsinline);

        // If no support for even API, bail
        if (!this.supported.api) {
@@ -368,7 +374,7 @@ class Plyr {
     * Get playing state
     */
    get playing() {
-        return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
+        return Boolean(this.ready && !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
    }

    /**
@@ -446,7 +452,7 @@ class Plyr {
        }

        // Set
-        this.media.currentTime = parseFloat(targetTime.toFixed(4));
+        this.media.currentTime = targetTime;

        // Logging
        this.debug.log(`Seeking to ${this.currentTime} seconds`);
@@ -492,7 +498,7 @@ class Plyr {
     */
    get duration() {
        // Faux duration set via config
-        const fauxDuration = parseInt(this.config.duration, 10);
+        const fauxDuration = parseFloat(this.config.duration);

        // True duration
        const realDuration = this.media ? Number(this.media.duration) : 0;
@@ -670,29 +676,38 @@ class Plyr {

    /**
     * Set playback quality
-     * Currently YouTube only
-     * @param {string} input - Quality level
+     * Currently HTML5 & YouTube only
+     * @param {number} input - Quality level
     */
    set quality(input) {
        let quality = null;

-        if (utils.is.string(input)) {
-            quality = input;
+        if (!utils.is.empty(input)) {
+            quality = Number(input);
        }

-        if (!utils.is.string(quality)) {
+        if (!utils.is.number(quality) || quality === 0) {
            quality = this.storage.get('quality');
        }

-        if (!utils.is.string(quality)) {
+        if (!utils.is.number(quality)) {
            quality = this.config.quality.selected;
        }

-        if (!this.options.quality.includes(quality)) {
-            this.debug.warn(`Unsupported quality option (${quality})`);
+        if (!utils.is.number(quality)) {
+            quality = this.config.quality.default;
+        }
+
+        if (!this.options.quality.length) {
            return;
        }

+        if (!this.options.quality.includes(quality)) {
+            const closest = utils.closest(this.options.quality, quality);
+            this.debug.warn(`Unsupported quality option: ${quality}, using ${closest} instead`);
+            quality = closest;
+        }
+
        // Update config
        this.config.quality.selected = quality;

@@ -830,13 +845,13 @@ class Plyr {
     * @param {boolean} input - Whether to enable captions
     */
    toggleCaptions(input) {
-        // If there's no full support, or there's no caption toggle
-        if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+        // If there's no full support
+        if (!this.supported.ui) {
            return;
        }

        // If the method is called without parameter, toggle based on current value
-        const show = utils.is.boolean(input) ? input : this.elements.container.className.indexOf(this.config.classNames.captions.active) === -1;
+        const show = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active);

        // Nothing to change...
        if (this.captions.active === show) {
@@ -866,17 +881,29 @@ class Plyr {
            return;
        }

-        // Toggle captions based on input
-        this.toggleCaptions(!utils.is.empty(input));
-
        // If empty string is passed, assume disable captions
        if (utils.is.empty(input)) {
+            this.toggleCaptions(false);
            return;
        }

        // Normalize
        const language = input.toLowerCase();

+        // Check for support
+        if (!this.options.captions.includes(language)) {
+            this.debug.warn(`Unsupported language option: ${language}`);
+            return;
+        }
+
+        // Ensure captions are enabled
+        this.toggleCaptions(true);
+
+        // Enabled only
+        if (language === 'enabled') {
+            return;
+        }
+
        // If nothing to change, bail
        if (this.language === language) {
            return;
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.11
+// plyr.js v3.2.4
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -4,6 +4,7 @@

 import { providers } from './types';
 import utils from './utils';
+import html5 from './html5';
 import media from './media';
 import ui from './ui';
 import support from './support';
@@ -31,13 +32,14 @@ const source = {
        }

        // Cancel current network requests
-        media.cancelRequests.call(this);
+        html5.cancelRequests.call(this);

        // Destroy instance and re-setup
        this.destroy.call(
            this,
            () => {
-                // TODO: Reset menus here
+                // Reset quality options
+                this.options.quality = [];

                // Remove elements
                utils.removeElement(this.media);
@@ -53,7 +55,7 @@ const source = {
                this.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;

                // Check for support
-                this.supported = support.check(this.type, this.provider, this.config.inline);
+                this.supported = support.check(this.type, this.provider, this.config.playsinline);

                // Create new markup
                switch (`${this.provider}:${this.type}`) {
@@ -101,7 +103,7 @@ const source = {
                    if (this.config.muted) {
                        this.media.setAttribute('muted', '');
                    }
-                    if (this.config.inline) {
+                    if (this.config.playsinline) {
                        this.media.setAttribute('playsinline', '');
                    }
                }
@@ -12,16 +12,16 @@ const support = {

    // Check for support
    // Basic functionality vs full UI
-    check(type, provider, inline) {
+    check(type, provider, playsinline) {
        let api = false;
        let ui = false;
        const browser = utils.getBrowser();
-        const playsInline = browser.isIPhone && inline && support.inline;
+        const canPlayInline = browser.isIPhone && playsinline && support.playsinline;

        switch (`${provider}:${type}`) {
            case 'html5:video':
                api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
                break;

            case 'html5:audio':
@@ -32,7 +32,7 @@ const support = {
            case 'youtube:video':
            case 'vimeo:video':
                api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
                break;

            default:
@@ -59,7 +59,7 @@ const support = {

    // Inline playback support
    // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    inline: 'playsInline' in document.createElement('video'),
+    playsinline: 'playsInline' in document.createElement('video'),

    // Check for mime type support against a player instance
    // Credits: http://diveintohtml5.info/everything.html
@@ -73,6 +73,11 @@ const support = {
                return false;
            }

+            // Check directly if codecs specified
+            if (type.includes('codecs=')) {
+                return media.canPlayType(type).replace(/no/, '');
+            }
+
            // Type specific checks
            if (this.isVideo) {
                switch (type) {
@@ -48,11 +48,6 @@ const ui = {
            this.listeners.controls();
        }

-        // If there's no controls, bail
-        if (!utils.is.element(this.elements.controls)) {
-            return;
-        }
-
        // Remove native controls
        ui.toggleNativeControls.call(this);

@@ -71,8 +66,8 @@ const ui = {
        // Reset loop state
        this.loop = null;

-        // Reset quality options
-        this.options.quality = [];
+        // Reset quality setting
+        this.quality = null;

        // Reset volume display
        ui.updateVolume.call(this);
@@ -277,10 +272,10 @@ const ui = {
        }

        // Always display hours if duration is over an hour
-        const displayHours = utils.getHours(this.duration) > 0;
+        const forceHours = utils.getHours(this.duration) > 0;

        // eslint-disable-next-line no-param-reassign
-        target.textContent = utils.formatTime(time, displayHours, inverted);
+        target.textContent = utils.formatTime(time, forceHours, inverted);
    },

    // Handle time change event
@@ -375,6 +375,25 @@ const utils = {
        return attributes;
    },

+    // Toggle hidden
+    toggleHidden(element, hidden) {
+        if (!utils.is.element(element)) {
+            return;
+        }
+
+        let hide = hidden;
+
+        if (!utils.is.boolean(hide)) {
+            hide = !element.hasAttribute('hidden');
+        }
+
+        if (hide) {
+            element.setAttribute('hidden', '');
+        } else {
+            element.removeAttribute('hidden');
+        }
+    },
+
    // Toggle class on an element
    toggleClass(element, className, toggle) {
        if (utils.is.element(element)) {
@@ -393,19 +412,6 @@ const utils = {
        return utils.is.element(element) && element.classList.contains(className);
    },

-    // Toggle hidden attribute on an element
-    toggleHidden(element, toggle) {
-        if (!utils.is.element(element)) {
-            return;
-        }
-
-        if (toggle) {
-            element.setAttribute('hidden', '');
-        } else {
-            element.removeAttribute('hidden');
-        }
-    },
-
    // Element matches selector
    matches(element, selector) {
        const prototype = { Element };
@@ -462,8 +468,8 @@ const utils = {
            // Display
            this.elements.display = {
                buffer: utils.getElement.call(this, this.config.selectors.display.buffer),
-                duration: utils.getElement.call(this, this.config.selectors.display.duration),
                currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime),
+                duration: utils.getElement.call(this, this.config.selectors.display.duration),
            };

            // Seek tooltip
@@ -586,15 +592,15 @@ const utils = {
    },

    // Trigger event
-    dispatchEvent(element, type, bubbles, detail) {
+    dispatchEvent(element, type = '', bubbles = false, detail = {}) {
        // Bail if no element
-        if (!utils.is.element(element) || !utils.is.string(type)) {
+        if (!utils.is.element(element) || utils.is.empty(type)) {
            return;
        }

        // Create and dispatch the event
        const event = new CustomEvent(type, {
-            bubbles: utils.is.boolean(bubbles) ? bubbles : false,
+            bubbles,
            detail: Object.assign({}, detail, {
                plyr: utils.is.plyr(this) ? this : null,
            }),
@@ -737,6 +743,24 @@ const utils = {
        return utils.extend(target, ...sources);
    },

+    // Remove duplicates in an array
+    dedupe(array) {
+        if (!utils.is.array(array)) {
+            return array;
+        }
+
+        return array.filter((item, index) => array.indexOf(item) === index);
+    },
+
+    // Get the closest value in an array
+    closest(array, value) {
+        if (!utils.is.array(array) || !array.length) {
+            return null;
+        }
+
+        return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
+    },
+
    // Get the provider for a given URL
    getProviderByUrl(url) {
        // YouTube
@@ -26,6 +26,11 @@
        width: 100%;
    }

+    button {
+        font: inherit;
+        line-height: inherit;
+    }
+
    // Ignore focus
    &:focus {
        outline: 0;
@@ -3,14 +3,12 @@
 // YouTube, Vimeo, etc
 // --------------------------------------------------------------

-.plyr__video-embed {
-    // Default to 16:9 ratio but this is set by JavaScript based on config
-    $padding: ((100 / 16) * 9);
-    $height: 240;
-    $offset: to-percentage(($height - $padding) / ($height / 50));
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);

+.plyr__video-embed {
    height: 0;
-    padding-bottom: to-percentage($padding);
+    padding-bottom: to-percentage($embed-padding);
    position: relative;

    iframe {
@@ -22,6 +20,17 @@
        user-select: none;
        width: 100%;
    }
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // To allow mouse events to be captured if full support
+    iframe {
+        pointer-events: none;
+    }

    // Vimeo hack
    > div {
@@ -30,7 +39,3 @@
        transform: translateY(-$offset);
    }
 }
-// To allow mouse events to be captured if full support
-.plyr--full-ui .plyr__video-embed iframe {
-    pointer-events: none;
-}
@@ -35,7 +35,7 @@
        right: -3px;
        text-align: left;
        white-space: nowrap;
-        z-index: 1;
+        z-index: 3;

        > div {
            overflow: hidden;
@@ -74,6 +74,7 @@
            align-items: center;
            color: $plyr-menu-color;
            display: flex;
+            font-size: $plyr-font-size-menu;
            padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2);
            user-select: none;
            width: 100%;
@@ -19,7 +19,7 @@

    &::-webkit-slider-runnable-track {
        @include plyr-range-track();
-        background-image: linear-gradient(to right, currentColor var(--value), transparent var(--value));
+        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
    }

    &::-webkit-slider-thumb {
@@ -23,7 +23,12 @@
 // Hide sound controls on iOS
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
+.plyr--is-ios .plyr__volume {
+    display: none !important;
+}
+
+// Vimeo has no toggle mute method so hide mute button
+// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183
+.plyr--is-ios.plyr--vimeo [data-plyr='mute'] {
    display: none !important;
 }
@@ -8,8 +8,9 @@ $plyr-font-size-small: 14px !default;
 $plyr-font-size-large: 18px !default;
 $plyr-font-size-xlarge: 21px !default;

-$plyr-font-size-time: 14px !default;
+$plyr-font-size-time: $plyr-font-size-small !default;
 $plyr-font-size-badge: 9px !default;
+$plyr-font-size-menu: $plyr-font-size-small !default;

 $plyr-font-weight-regular: 500 !default;
 $plyr-font-weight-bold: 600 !default;
@@ -2,15 +2,6 @@
 // Hiding content nicely
 // --------------------------------------------------------------

-// Attributes
-.plyr--full-ui [hidden] {
-    display: none;
-}
-
-.plyr--full-ui [aria-hidden='true'] {
-    display: none;
-}
-
 // Screen reader only elements
 .plyr__sr-only {
    clip: rect(1px, 1px, 1px, 1px);
Author	SHA1	Message	Date
Sam Potts	a812650fea	v3.2.4	2018-04-27 00:47:51 +10:00
Sam Potts	fec7a77d6f	v3.2.3	2018-04-25 20:02:36 +10:00
Sam Potts	971e261067	Fix for iOS 9 throwing error for `name` property in fullscreen API (fixes #908 )	2018-04-25 19:59:22 +10:00
Sam Potts	27407ba021	v3.2.2	2018-04-25 19:46:39 +10:00
Sam Potts	ef8e58ede4	Fix for hidden buffer and incorrect use of aria-hidden	2018-04-25 19:40:23 +10:00
Sam Potts	f1b275aedc	v3.2.1	2018-04-23 00:53:54 +10:00
Sam Potts	b647af256c	More a11y stuff and context menu fix	2018-04-23 00:01:19 +10:00
Sam Potts	d2e9ed3467	Merge	2018-04-18 18:34:59 +10:00
Sam Potts	5b39986835	Merge branch 'master' of github.com:sampotts/plyr	2018-04-18 18:29:50 +10:00
Sam Potts	a97b08e8ea	ARIA and Vimeo fixes	2018-04-18 18:29:43 +10:00
Sam Potts	56d1be9447	Merge pull request #903 from friday/901 Show captions even if toggle button is omitted from controls	2018-04-18 08:49:05 +10:00
Sam Potts	a241cb5215	Merge pull request #904 from friday/881 Fullscreen aria-pressed event listened fix for Chrome	2018-04-18 08:48:08 +10:00
Albin Larsson	042b1a8294	Fullscreen aria-pressed event listened fix for Chrome	2018-04-17 20:28:47 +02:00
Albin Larsson	6d79b8cd4c	Don't require captions toggle button to be enabled in order to show captions	2018-04-17 18:59:19 +02:00
Sam Potts	88d766aeae	v3.2.0	2018-04-17 23:54:38 +10:00
Sam Potts	119b471b84	More bug fixes	2018-04-17 23:51:23 +10:00
Sam Potts	7f079e0ec3	Fix for `playing` false positive (fixes #898 )	2018-04-17 22:52:46 +10:00
Sam Potts	46fe3eecff	Fixed bug for captions with no srclang and labels and improved logic (fixes #875 )	2018-04-17 22:49:28 +10:00
Sam Potts	3061a701d5	PR merge	2018-04-14 14:58:09 +10:00
Sam Potts	e45109e1d7	Merge branch 'master' of github.com:sampotts/plyr	2018-04-14 14:48:20 +10:00
Sam Potts	e138e6d51e	Merge pull request #895 from nicolasthy/patch-1 Fix IE10 split error	2018-04-14 14:47:57 +10:00
Nicolas Thiry	aef1363b04	Fix IE10 with default captions.language	2018-04-13 14:44:05 +02:00
Nicolas Thiry	766dd03d81	Fix IE10 split error On IE10, Plyr throws the error `Unable to get property 'split' of undefined or null reference`. This fixes the case when `window.navigator.language` is null and can't use the `split()` function.	2018-04-12 22:12:12 +02:00
Sam Potts	ab393651ec	Merge branch 'master' of github.com:sampotts/plyr	2018-04-11 23:44:44 +10:00
Sam Potts	ffd265d0ae	Merge pull request #888 from Antonio-Laguna/master Safer check for active caption	2018-04-11 23:42:40 +10:00
Antonio Laguna	72155472dd	Safer check for active caption	2018-04-11 15:39:12 +02:00
Sam Potts	9b7170834e	Merge pull request #887 from danielsarin/use-i18n-for-normal-speed Add i18n support for "Normal" value in speed options	2018-04-11 22:43:47 +10:00
Daniel Sarin	3e57a87bf7	Add i18n support for "Normal" value in speed options	2018-04-11 15:39:23 +03:00
Sam Potts	a15d1c9f1c	Merge pull request #886 from danielsarin/increate-menu-z-index Increase menu container z-index to be higher than controls	2018-04-11 22:23:46 +10:00
Daniel Sarin	a095a64f90	Increase menu container z-index to be higher than controls	2018-04-11 15:13:34 +03:00
Sam Potts	2374d6b1c4	Merge branch 'master' of github.com:sampotts/plyr	2018-04-11 21:52:36 +10:00
Sam Potts	5ed3ff9084	Restore paused state after seek	2018-04-11 21:52:31 +10:00
Sam Potts	385be55510	Merge pull request #874 from friday/873 Fixes issue leaving fullscreen in Chrome using button	2018-04-10 17:21:15 +10:00
Albin Larsson	3082d0d128	Fixes #873 Can't leave fullscreen in Chrome (using button)	2018-04-05 20:29:01 +02:00
Sam Potts	f7e242f054	Merge pull request #871 from friday/867 Fix #867: Add custom property fallback	2018-04-05 09:19:46 +10:00
Sam Potts	2874505004	Merge pull request #868 from friday/null-no-controls Fix string "null" being appended after the video if controls argument is empty.	2018-04-05 09:19:05 +10:00
Albin Larsson	ed9e0c13d7	Fix #867 : Add custom property fallback	2018-04-05 00:33:09 +02:00
Albin Larsson	10be94fa99	Fix 'null' being appended after the video if controls is empty array	2018-04-04 21:33:14 +02:00
Sam Potts	ee79c46145	Merge branch 'master' of github.com:sampotts/plyr	2018-04-04 16:50:06 +10:00
Sam Potts	384010a2c0	Style fixes	2018-04-04 16:50:00 +10:00
Sam Potts	1e47019122	Merge pull request #863 from friday/data-plyr-config-no-options Fix loading data-plyr-config when initiating Plyr without any options	2018-04-04 11:33:30 +10:00
Albin Larsson	536c65e82c	Fix loading data-plyr-config when initiating Plyr without any options	2018-04-04 03:16:25 +02:00
Sam Potts	cdf14932ec	Changelog	2018-04-03 23:03:16 +10:00
Sam Potts	3b20dbd9fd	v3.1.0	2018-04-03 22:57:34 +10:00
Sam Potts	e4d975af00	Styling fixes	2018-04-03 22:56:19 +10:00
Sam Potts	2782a00e7c	v3.1.0-beta.2	2018-04-03 22:31:55 +10:00
Sam Potts	91d192dd7c	YouTube speed menu fix	2018-04-03 22:30:29 +10:00
Sam Potts	b1e3abc795	v3.1.0-beta.1	2018-04-02 22:52:02 +10:00
Sam Potts	3395e8df90	HTML5 quality selection	2018-04-02 22:40:03 +10:00