v3.4.8

- Calling customized controls function with proper arguments (thanks @a60814billy)
Merge pull request #1254 from a60814billy/fix/custom-controls-calling-argument
2019-01-17 11:37:19 +11:00 · 2018-11-12 21:32:31 +11:00 · 2018-11-12 15:37:46 +08:00 · 2018-11-08 23:34:10 +11:00 · 2018-11-08 23:29:54 +11:00 · 2018-11-08 23:19:57 +11:00
35 changed files with 3881 additions and 1824 deletions
@@ -4325,30 +4325,21 @@ typeof navigator === "object" && (function () {
 	  } // Google analytics
 	  // For demo site (https://plyr.io) only
 	  /* eslint-disable */
 	  if (env.prod) {
-	    (function (i, s, o, g, r, a, m) {
+	    window.dataLayer = window.dataLayer || [];
 	      i.GoogleAnalyticsObject = r;
-	      i[r] = i[r] || function () {
+	    var gtag = function gtag() {
-	        (i[r].q = i[r].q || []).push(arguments);
+	      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-	      };
+	        args[_key] = arguments[_key];
 	      }
-	      i[r].l = 1 * new Date();
+	      window.dataLayer.push(args);
-	      a = s.createElement(o);
+	    };
 	      m = s.getElementsByTagName(o)[0];
 	      a.async = 1;
 	      a.src = g;
 	      m.parentNode.insertBefore(a, m);
 	    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-	    window.ga('create', 'UA-40881672-11', 'auto');
+	    gtag('js', new Date());
-	    window.ga('send', 'pageview');
+	    gtag('config', 'UA-132699580-1');
 	  }
 	  /* eslint-enable */
 	})();
 }());
@@ -1,191 +1,290 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
        <meta
            name="description"
            property="og:description"
            content="A simple HTML5 media player with custom controls and WebVTT captions."
        />
        <meta name="author" content="Sam Potts" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
-<head>
+        <!-- Icons -->
-    <meta charset="utf-8" />
+        <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico" />
-    <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
+        <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32" />
-    <meta name="description" property="og:description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+        <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16" />
-    <meta name="author" content="Sam Potts">
+        <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- Icons -->
+        <!-- Opengraph -->
-    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
+        <meta
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
+            property="og:title"
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
+            content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player"
-    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
+        />
        <meta property="og:site_name" content="Plyr" />
        <meta property="og:url" content="https://plyr.io" />
        <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />
-    <!-- Opengraph -->
+        <!-- Twitter -->
-    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player">
+        <meta name="twitter:card" content="summary" />
-    <meta property="og:site_name" content="Plyr">
+        <meta name="twitter:site" content="@sam_potts" />
-    <meta property="og:url" content="https://plyr.io">
+        <meta name="twitter:creator" content="@sam_potts" />
-    <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png">
+        <meta name="twitter:card" content="summary_large_image" />
-    <!-- Twitter -->
+        <!-- Docs styles -->
-    <meta name="twitter:card" content="summary">
+        <link rel="stylesheet" href="dist/demo.css?v=2" />
    <meta name="twitter:site" content="@sam_potts">
    <meta name="twitter:creator" content="@sam_potts">
    <meta name="twitter:card" content="summary_large_image">
-    <!-- Docs styles -->
+        <!-- Preload -->
-    <link rel="stylesheet" href="dist/demo.css?v=2">
+        <link
            rel="preload"
            as="font"
            crossorigin
            type="font/woff2"
            href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"
        />
        <link
            rel="preload"
            as="font"
            crossorigin
            type="font/woff2"
            href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"
        />
    </head>
-    <!-- Preload -->
+    <body>
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
+        <div class="grid">
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
+            <header>
-</head>
+                <h1>Plyr</h1>
-
+                <p>
-<body>
+                    A simple, accessible and customisable media player for
-    <div class="grid">
+                    <button type="button" class="faux-link" data-source="video">
-        <header>
+                        <svg class="icon">
-            <h1>Plyr</h1>
+                            <title>HTML5</title>
-            <p>A simple, accessible and customisable media player for
+                            <path
-                <button type="button" class="faux-link" data-source="video">
+                                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"
-                    <svg class="icon">
+                            ></path></svg
-                        <title>HTML5</title>
+                        >Video</button
-                        <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>Video</button>,
+                    <button type="button" class="faux-link" data-source="audio">
-                <button type="button" class="faux-link" data-source="audio">
+                        <svg class="icon">
-                    <svg class="icon">
+                            <title>HTML5</title>
-                        <title>HTML5</title>
+                            <path
-                        <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>
+                                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"
-                    </svg>Audio</button>,
+                            ></path></svg
-                <button type="button" class="faux-link" data-source="youtube">
+                        >Audio</button
-                    <svg class="icon" role="presentation">
+                    >,
-                        <title>YouTube</title>
+                    <button type="button" class="faux-link" data-source="youtube">
                        <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
                    M6,11V5l5,3L6,11z"></path>
                    </svg>YouTube</button> and
                <button type="button" class="faux-link" data-source="vimeo">
                    <svg class="icon" role="presentation">
                        <title>Vimeo</title>
                        <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
                    </svg>Vimeo</button>
            </p>
            <p>Premium video monitization from
                <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border">
                    <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi">
                    <span class="sr-only">ai.vi</span>
                </a>
            </p>
            <div class="call-to-action">
                <span class="button--with-count">
                    <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
                        <svg class="icon" role="presentation">
-                            <title>GitHub</title>
+                            <title>YouTube</title>
-                            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+                            <path
                                d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
                    M6,11V5l5,3L6,11z"
                            ></path></svg
                        >YouTube
                    </button>
                    and
                    <button type="button" class="faux-link" data-source="vimeo">
                        <svg class="icon" role="presentation">
                            <title>Vimeo</title>
                            <path
                                d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
                            ></path></svg
                        >Vimeo
                    </button>
                </p>
                <p>
                    Premium video monitization from
                    <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border">
                        <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi" />
                        <span class="sr-only">ai.vi</span>
                    </a>
                </p>
                <div class="call-to-action">
                    <span class="button--with-count">
                        <a
                            href="https://github.com/sampotts/plyr"
                            target="_blank"
                            class="button"
                            data-shr-network="github"
                        >
                            <svg class="icon" role="presentation">
                                <title>GitHub</title>
                                <path
                                    d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
               C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
               c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
               c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
               c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
-               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
+               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"
-                        </svg>
+                                ></path>
-                        Download on GitHub
+                            </svg>
-                    </a>
+                            Download on GitHub
-                </span>
+                        </a>
-            </div>
+                    </span>
-        </header>
+                </div>
            </header>
-        <main>
+            <main>
-            <div id="container">
+                <div id="container">
-                <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
+                    <video
-                    <!-- Video files -->
+                        controls
-                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
+                        crossorigin
-                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
+                        playsinline
-                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
+                        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-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"
                        />
-                    <!-- Caption files -->
+                        <!-- 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"
+                        <track
-                        default>
+                            kind="captions"
-                    <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
+                            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 -->
+                        <!-- Fallback for browsers that don't support the <video> element -->
-                    <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
+                        <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download
-                </video>
+                            >Download</a
-            </div>
+                        >
                    </video>
                </div>
-            <ul>
+                <ul>
-                <li class="plyr__cite plyr__cite--video" hidden>
+                    <li class="plyr__cite plyr__cite--video" hidden>
-                    <small>
+                        <small>
-                        <svg class="icon">
+                            <svg class="icon">
-                            <title>HTML5</title>
+                                <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>
+                                <path
-                        </svg>
+                                    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"
-                        <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
+                                ></path>
-                    </small>
+                            </svg>
-                </li>
+                            <a
-                <li class="plyr__cite plyr__cite--audio" hidden>
+                                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
-                    <small>
+                                target="_blank"
-                        <svg class="icon" title="HTML5">
+                                >View From A Blue Moon</a
-                            <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>
+                            &copy; Brainfarm
-                        </svg>
+                        </small>
-                        <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
+                    </li>
-                    </small>
+                    <li class="plyr__cite plyr__cite--audio" hidden>
-                </li>
+                        <small>
-                <li class="plyr__cite plyr__cite--youtube" hidden>
+                            <svg class="icon" title="HTML5">
-                    <small>
+                                <title>HTML5</title>
-                        <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on&nbsp;
+                                <path
-                        <span class="color--youtube">
+                                    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"
-                            <svg class="icon" role="presentation">
+                                ></path>
-                                <title>YouTube</title>
+                            </svg>
-                                <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
+                            <a href="http://www.kishibashi.com/" target="_blank"
                                >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a
                            >
                            &copy; Kishi Bashi
                        </small>
                    </li>
                    <li class="plyr__cite plyr__cite--youtube" hidden>
                        <small>
                            <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank"
                                >View From A Blue Moon</a
                            >
                            on&nbsp;
                            <span class="color--youtube">
                                <svg class="icon" role="presentation">
                                    <title>YouTube</title>
                                    <path
                                        d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
-                                    M6,11V5l5,3L6,11z"></path>
+                                    M6,11V5l5,3L6,11z"
-                            </svg>YouTube
+                                    ></path></svg
-                        </span>
+                                >YouTube
-                    </small>
+                            </span>
-                </li>
+                        </small>
-                <li class="plyr__cite plyr__cite--vimeo" hidden>
+                    </li>
-                    <small>
+                    <li class="plyr__cite plyr__cite--vimeo" hidden>
-                        <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
+                        <small>
-                        <span class="color--vimeo">
+                            <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
-                            <svg class="icon" role="presentation">
+                            <span class="color--vimeo">
-                                <title>Vimeo</title>
+                                <svg class="icon" role="presentation">
-                                <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
+                                    <title>Vimeo</title>
                                    <path
                                        d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                               C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
-                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
+                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
-                            </svg>Vimeo
+                                    ></path></svg
-                        </span>
+                                >Vimeo
-                    </small>
+                            </span>
-                </li>
+                        </small>
-            </ul>
+                    </li>
-        </main>
+                </ul>
-    </div>
+            </main>
        </div>
-    <aside>
+        <aside>
-        <svg class="icon">
+            <svg class="icon">
-            <title>Twitter</title>
+                <title>Twitter</title>
-            <path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
+                <path
                    d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
       C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
       c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
-       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
+       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"
-        </svg>
+                ></path>
-        <p>If you think Plyr's good,
+            </svg>
-            <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
+            <p>
-                target="_blank" data-shr-network="twitter">tweet it</a> 👍
+                If you think Plyr's good,
-        </p>
+                <a
-    </aside>
+                    href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
                    target="_blank"
                    data-shr-network="twitter"
                    >tweet it</a
                >
                👍
            </p>
        </aside>
-    <!-- Polyfills -->
+        <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"
+        <script
-        crossorigin="anonymous"></script>
+            src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"
            crossorigin="anonymous"
        ></script>
-    <!-- Plyr core script -->
+        <!-- Plyr core script -->
-    <script src="../dist/plyr.js" crossorigin="anonymous"></script>
+        <script src="../dist/plyr.js" crossorigin="anonymous"></script>
-    <!-- Sharing libary (https://shr.one) -->
+        <!-- Sharing libary (https://shr.one) -->
-    <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
+        <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
-    <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
+        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
+        <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
-    <!-- Docs script -->
+        <!-- Docs script -->
-    <script src="dist/demo.js" crossorigin="anonymous"></script>
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132699580-1"></script>
-</body>
+        <script src="dist/demo.js" crossorigin="anonymous"></script>
-
+    </body>
-</html>
+</html>
@@ -279,24 +279,12 @@ import Raven from 'raven-js';
    // Google analytics
    // For demo site (https://plyr.io) only
    /* eslint-disable */
    if (env.prod) {
-        ((i, s, o, g, r, a, m) => {
+        window.dataLayer = window.dataLayer || [];
-            i.GoogleAnalyticsObject = r;
+        const gtag = (...args) => {
-            i[r] =
+            window.dataLayer.push(args);
-                i[r] ||
+        };
-                function() {
+        gtag('js', new Date());
-                    (i[r].q = i[r].q || []).push(arguments);
+        gtag('config', 'UA-132699580-1');
                };
            i[r].l = 1 * new Date();
            a = s.createElement(o);
            m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m);
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
        window.ga('create', 'UA-40881672-11', 'auto');
        window.ga('send', 'pageview');
    }
    /* eslint-enable */
 })();
@@ -7,7 +7,8 @@
    font-family: 'Gordita';
    font-style: normal;
    font-weight: $font-weight-light;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
        url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
 }
@font-face {
@@ -33,7 +34,8 @@
    font-family: 'Gordita';
    font-style: normal;
    font-weight: $font-weight-bold;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
        url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
 }
@font-face {
@@ -41,5 +43,6 @@
    font-family: 'Gordita';
    font-style: normal;
    font-weight: $font-weight-black;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
        url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
 }
@@ -11,6 +11,9 @@ $plyr-font-size-small: 12px;
 $plyr-font-size-time: 11px;
 $plyr-font-size-badges: 9px;
 // Other
 $plyr-font-smoothing: true;
 // Captions
 $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
@@ -570,15 +570,12 @@ typeof navigator === "object" && (function (global, factory) {
  } // Element matches selector
  function matches(element, selector) {
    var prototype = {
      Element: Element
    };
    function match() {
      return Array.from(document.querySelectorAll(selector)).includes(this);
    }
-    var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
+    var matches = match;
    return matches.call(element, selector);
  } // Find all elements
@@ -634,7 +631,9 @@ typeof navigator === "object" && (function (global, factory) {
    } // Set regular focus
-    element.focus(); // If we want to mimic keyboard focus via tab
+    element.focus({
      preventScroll: true
    }); // If we want to mimic keyboard focus via tab
    if (tabFocus) {
      toggleClass(element, this.config.classNames.tabFocus);
@@ -739,26 +738,20 @@ typeof navigator === "object" && (function (global, factory) {
          _inputType$split2 = _slicedToArray(_inputType$split, 1),
          mediaType = _inputType$split2[0];
      var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
      if (!this.isHTML5 || mediaType !== this.type) {
        return false;
-      }
+      } // Add codec if required
      var type;
-      if (inputType && inputType.includes('codecs=')) {
+      if (Object.keys(defaultCodecs).includes(type)) {
-        // Use input directly
+        type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
        type = inputType;
      } else if (inputType === 'audio/mpeg') {
        // Skip codec
        type = 'audio/mpeg;';
      } else if (inputType in defaultCodecs) {
        // Use codec
        type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
      }
      try {
        return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-      } catch (err) {
+      } catch (e) {
        return false;
      }
    },
@@ -2629,7 +2622,7 @@ typeof navigator === "object" && (function (global, factory) {
      var update = true; // If function, run it and use output
      if (is.function(this.config.controls)) {
-        this.config.controls = this.config.controls.call(this.props);
+        this.config.controls = this.config.controls.call(this, props);
      } // Convert falsy controls to empty array (primarily for empty strings)
@@ -3192,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
    // Quality default
@@ -4315,7 +4308,7 @@ typeof navigator === "object" && (function (global, factory) {
        }); // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-        on.call(player, player.media, 'canplay', function () {
+        on.call(player, player.media, 'canplay loadeddata', function () {
          toggleHidden(elements.volume, !player.hasAudio);
          toggleHidden(elements.buttons.mute, !player.hasAudio);
        }); // Handle the media finishing
@@ -4710,9 +4703,7 @@ typeof navigator === "object" && (function (global, factory) {
  var loadjs_umd = createCommonjsModule(function (module, exports) {
  (function(root, factory) {
-    if (typeof undefined === 'function' && undefined.amd) {
+    {
      undefined([], factory);
    } else {
      module.exports = factory();
    }
  }(commonjsGlobal, function() {
@@ -4854,8 +4845,8 @@ typeof navigator === "object" && (function (global, factory) {
          if (!e.sheet.cssText.length) result = 'e';
        } catch (x) {
          // sheets objects created from load errors don't allow access to
-          // `cssText`
+          // `cssText` (unless error is Code:18 SecurityError)
-          result = 'e';
+          if (x.code != 18) result = 'e';
        }
      }
@@ -5069,12 +5060,13 @@ typeof navigator === "object" && (function (global, factory) {
    // Set aspect ratio
    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
    setAspectRatio: function setAspectRatio(input) {
-      var _split = (is.string(input) ? input : this.config.ratio).split(':'),
+      var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number),
-          _split2 = _slicedToArray(_split, 2),
+          _split$map2 = _slicedToArray(_split$map, 2),
-          x = _split2[0],
+          x = _split$map2[0],
-          y = _split2[1];
+          y = _split$map2[1];
      var padding = 100 / x * y;
      vimeo.padding = padding;
      this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
      if (this.supported.ui) {
@@ -5278,8 +5270,8 @@ typeof navigator === "object" && (function (global, factory) {
      }); // Set aspect ratio based on video size
      Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
-        var ratio = getAspectRatio(dimensions[0], dimensions[1]);
+        vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
-        vimeo.setAspectRatio.call(_this2, ratio);
+        vimeo.setAspectRatio.call(_this2, vimeo.ratio);
      }); // Set autopause
      player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -5370,6 +5362,24 @@ typeof navigator === "object" && (function (global, factory) {
      player.embed.on('error', function (detail) {
        player.media.error = detail;
        triggerEvent.call(player, player.media, 'error');
      }); // Set height/width on fullscreen
      player.on('enterfullscreen exitfullscreen', function (event) {
        var target = player.fullscreen.target; // Ignore for iOS native
        if (target !== player.elements.container) {
          return;
        }
        var toggle = event.type === 'enterfullscreen';
        var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
            _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
            x = _vimeo$ratio$split$ma2[0],
            y = _vimeo$ratio$split$ma2[1];
        var dimension = x > y ? 'width' : 'height';
        target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
      }); // Rebuild UI
      setTimeout(function () {
@@ -6547,18 +6557,20 @@ typeof navigator === "object" && (function (global, factory) {
        if (_this2.isHTML5) {
          // Setup captions
-          if ('tracks' in input) {
+          if (Object.keys(input).includes('tracks')) {
            source.insertElements.call(_this2, 'track', input.tracks);
-          } // Load HTML5 sources
+          }
          _this2.media.load();
        } // If HTML5 or embed but not fully supported, setupInterface and call ready now
        if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
          // Setup interface
          ui.build.call(_this2);
        }
        if (_this2.isHTML5) {
          // Load HTML5 sources
          _this2.media.load();
        } // Update the fullscreen support
@@ -117,8 +117,9 @@ typeof navigator === "object" && (function (global, factory) {
      var URLSearchParams = function(searchString) {
        Object.defineProperty(this, '_entries', { writable: true, value: {} });
        var typeofSearchString = typeof searchString;
-        if (typeof searchString === 'string') {
+        if (typeofSearchString === 'undefined') ; else if (typeofSearchString === 'string') {
          if (searchString !== '') {
            this._fromString(searchString);
          }
@@ -127,6 +128,25 @@ typeof navigator === "object" && (function (global, factory) {
          searchString.forEach(function(value, name) {
            _this.append(name, value);
          });
        } else if ((searchString !== null) && (typeofSearchString === 'object')) {
          if (Object.prototype.toString.call(searchString) === '[object Array]') {
            for (var i = 0; i < searchString.length; i++) {
              var entry = searchString[i];
              if ((Object.prototype.toString.call(entry) === '[object Array]') || (entry.length !== 2)) {
                this.append(entry[0], entry[1]);
              } else {
                throw new TypeError('Expected [string, any] as entry at index ' + i + ' of URLSearchParams\'s input');
              }
            }
          } else {
            for (var key in searchString) {
              if (searchString.hasOwnProperty(key)) {
                this.append(key, searchString[key]);
              }
            }
          }
        } else {
          throw new TypeError('Unsupported input\'s type for URLSearchParams');
        }
      };
@@ -134,9 +154,9 @@ typeof navigator === "object" && (function (global, factory) {
      proto.append = function(name, value) {
        if (name in this._entries) {
-          this._entries[name].push(value.toString());
+          this._entries[name].push(String(value));
        } else {
-          this._entries[name] = [value.toString()];
+          this._entries[name] = [String(value)];
        }
      };
@@ -157,7 +177,7 @@ typeof navigator === "object" && (function (global, factory) {
      };
      proto.set = function(name, value) {
-        this._entries[name] = [value.toString()];
+        this._entries[name] = [String(value)];
      };
      proto.forEach = function(callback, thisArg) {
@@ -208,24 +228,6 @@ typeof navigator === "object" && (function (global, factory) {
        return searchArray.join('&');
      };
      Object.defineProperty(proto, '_fromString', {
        enumerable: false,
        configurable: false,
        writable: false,
        value: function(searchString) {
          this._entries = {};
          searchString = searchString.replace(/^\?/, '');
          var attributes = searchString.split('&');
          var attribute;
          for (var i = 0; i < attributes.length; i++) {
            attribute = attributes[i].split('=');
            this.append(
              deserializeParam(attribute[0]),
              (attribute.length > 1) ? deserializeParam(attribute[1]) : ''
            );
          }
        }
      });
      global.URLSearchParams = URLSearchParams;
    };
@@ -234,8 +236,10 @@ typeof navigator === "object" && (function (global, factory) {
      polyfillURLSearchParams();
    }
-    if (typeof URLSearchParams.prototype.sort !== 'function') {
+    var proto = URLSearchParams.prototype;
-      URLSearchParams.prototype.sort = function() {
+
    if (typeof proto.sort !== 'function') {
      proto.sort = function() {
        var _this = this;
        var items = [];
        this.forEach(function(value, name) {
@@ -262,6 +266,38 @@ typeof navigator === "object" && (function (global, factory) {
      };
    }
    if (typeof proto._fromString !== 'function') {
      Object.defineProperty(proto, '_fromString', {
        enumerable: false,
        configurable: false,
        writable: false,
        value: function(searchString) {
          if (this._entries) {
            this._entries = {};
          } else {
            var keys = [];
            this.forEach(function(value, name) {
              keys.push(name);
            });
            for (var i = 0; i < keys.length; i++) {
              this.delete(keys[i]);
            }
          }
          searchString = searchString.replace(/^\?/, '');
          var attributes = searchString.split('&');
          var attribute;
          for (var i = 0; i < attributes.length; i++) {
            attribute = attributes[i].split('=');
            this.append(
              deserializeParam(attribute[0]),
              (attribute.length > 1) ? deserializeParam(attribute[1]) : ''
            );
          }
        }
      });
    }
    // HTMLAnchorElement
  })(
@@ -538,7 +574,7 @@ typeof navigator === "object" && (function (global, factory) {
  });
  var _core = createCommonjsModule(function (module) {
-  var core = module.exports = { version: '2.5.7' };
+  var core = module.exports = { version: '2.6.2' };
  if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
  });
  var _core_1 = _core.version;
@@ -742,7 +778,7 @@ typeof navigator === "object" && (function (global, factory) {
  })('versions', []).push({
    version: _core.version,
    mode: 'global',
-    copyright: '© 2018 Denis Pushkarev (zloirock.ru)'
+    copyright: '© 2019 Denis Pushkarev (zloirock.ru)'
  });
  });
@@ -1339,37 +1375,30 @@ typeof navigator === "object" && (function (global, factory) {
  _addToUnscopables('includes');
-  var _fixReWks = function (KEY, length, exec) {
+  // 7.2.9 SameValue(x, y)
-    var SYMBOL = _wks(KEY);
+  var _sameValue = Object.is || function is(x, y) {
-    var fns = exec(_defined, SYMBOL, ''[KEY]);
+    // eslint-disable-next-line no-self-compare
-    var strfn = fns[0];
+    return x === y ? x !== 0 || 1 / x === 1 / y : x != x && y != y;
    var rxfn = fns[1];
    if (_fails(function () {
      var O = {};
      O[SYMBOL] = function () { return 7; };
      return ''[KEY](O) != 7;
    })) {
      _redefine(String.prototype, KEY, strfn);
      _hide(RegExp.prototype, SYMBOL, length == 2
        // 21.2.5.8 RegExp.prototype[@@replace](string, replaceValue)
        // 21.2.5.11 RegExp.prototype[@@split](string, limit)
        ? function (string, arg) { return rxfn.call(string, this, arg); }
        // 21.2.5.6 RegExp.prototype[@@match](string)
        // 21.2.5.9 RegExp.prototype[@@search](string)
        : function (string) { return rxfn.call(string, this); }
      );
    }
  };
-  // @@search logic
+  var builtinExec = RegExp.prototype.exec;
-  _fixReWks('search', 1, function (defined, SEARCH, $search) {
+
-    // 21.1.3.15 String.prototype.search(regexp)
+   // `RegExpExec` abstract operation
-    return [function search(regexp) {
+  // https://tc39.github.io/ecma262/#sec-regexpexec
-      var O = defined(this);
+  var _regexpExecAbstract = function (R, S) {
-      var fn = regexp == undefined ? undefined : regexp[SEARCH];
+    var exec = R.exec;
-      return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[SEARCH](String(O));
+    if (typeof exec === 'function') {
-    }, $search];
+      var result = exec.call(R, S);
-  });
+      if (typeof result !== 'object') {
        throw new TypeError('RegExp exec method returned something other than an Object or null');
      }
      return result;
    }
    if (_classof(R) !== 'RegExp') {
      throw new TypeError('RegExp#exec called on incompatible receiver');
    }
    return builtinExec.call(R, S);
  };
  // 21.2.5.3 get RegExp.prototype.flags
@@ -1384,6 +1413,183 @@ typeof navigator === "object" && (function (global, factory) {
    return result;
  };
  var nativeExec = RegExp.prototype.exec;
  // This always refers to the native implementation, because the
  // String#replace polyfill uses ./fix-regexp-well-known-symbol-logic.js,
  // which loads this file before patching the method.
  var nativeReplace = String.prototype.replace;
  var patchedExec = nativeExec;
  var LAST_INDEX = 'lastIndex';
  var UPDATES_LAST_INDEX_WRONG = (function () {
    var re1 = /a/,
        re2 = /b*/g;
    nativeExec.call(re1, 'a');
    nativeExec.call(re2, 'a');
    return re1[LAST_INDEX] !== 0 || re2[LAST_INDEX] !== 0;
  })();
  // nonparticipating capturing group, copied from es5-shim's String#split patch.
  var NPCG_INCLUDED = /()??/.exec('')[1] !== undefined;
  var PATCH = UPDATES_LAST_INDEX_WRONG || NPCG_INCLUDED;
  if (PATCH) {
    patchedExec = function exec(str) {
      var re = this;
      var lastIndex, reCopy, match, i;
      if (NPCG_INCLUDED) {
        reCopy = new RegExp('^' + re.source + '$(?!\\s)', _flags.call(re));
      }
      if (UPDATES_LAST_INDEX_WRONG) lastIndex = re[LAST_INDEX];
      match = nativeExec.call(re, str);
      if (UPDATES_LAST_INDEX_WRONG && match) {
        re[LAST_INDEX] = re.global ? match.index + match[0].length : lastIndex;
      }
      if (NPCG_INCLUDED && match && match.length > 1) {
        // Fix browsers whose `exec` methods don't consistently return `undefined`
        // for NPCG, like IE8. NOTE: This doesn' work for /(.?)?/
        // eslint-disable-next-line no-loop-func
        nativeReplace.call(match[0], reCopy, function () {
          for (i = 1; i < arguments.length - 2; i++) {
            if (arguments[i] === undefined) match[i] = undefined;
          }
        });
      }
      return match;
    };
  }
  var _regexpExec = patchedExec;
  _export({
    target: 'RegExp',
    proto: true,
    forced: _regexpExec !== /./.exec
  }, {
    exec: _regexpExec
  });
  var SPECIES$1 = _wks('species');
  var REPLACE_SUPPORTS_NAMED_GROUPS = !_fails(function () {
    // #replace needs built-in support for named groups.
    // #match works fine because it just return the exec results, even if it has
    // a "grops" property.
    var re = /./;
    re.exec = function () {
      var result = [];
      result.groups = { a: '7' };
      return result;
    };
    return ''.replace(re, '$<a>') !== '7';
  });
  var SPLIT_WORKS_WITH_OVERWRITTEN_EXEC = (function () {
    // Chrome 51 has a buggy "split" implementation when RegExp#exec !== nativeExec
    var re = /(?:)/;
    var originalExec = re.exec;
    re.exec = function () { return originalExec.apply(this, arguments); };
    var result = 'ab'.split(re);
    return result.length === 2 && result[0] === 'a' && result[1] === 'b';
  })();
  var _fixReWks = function (KEY, length, exec) {
    var SYMBOL = _wks(KEY);
    var DELEGATES_TO_SYMBOL = !_fails(function () {
      // String methods call symbol-named RegEp methods
      var O = {};
      O[SYMBOL] = function () { return 7; };
      return ''[KEY](O) != 7;
    });
    var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL ? !_fails(function () {
      // Symbol-named RegExp methods call .exec
      var execCalled = false;
      var re = /a/;
      re.exec = function () { execCalled = true; return null; };
      if (KEY === 'split') {
        // RegExp[@@split] doesn't call the regex's exec method, but first creates
        // a new one. We need to return the patched regex when creating the new one.
        re.constructor = {};
        re.constructor[SPECIES$1] = function () { return re; };
      }
      re[SYMBOL]('');
      return !execCalled;
    }) : undefined;
    if (
      !DELEGATES_TO_SYMBOL ||
      !DELEGATES_TO_EXEC ||
      (KEY === 'replace' && !REPLACE_SUPPORTS_NAMED_GROUPS) ||
      (KEY === 'split' && !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC)
    ) {
      var nativeRegExpMethod = /./[SYMBOL];
      var fns = exec(
        _defined,
        SYMBOL,
        ''[KEY],
        function maybeCallNative(nativeMethod, regexp, str, arg2, forceStringMethod) {
          if (regexp.exec === _regexpExec) {
            if (DELEGATES_TO_SYMBOL && !forceStringMethod) {
              // The native String method already delegates to @@method (this
              // polyfilled function), leasing to infinite recursion.
              // We avoid it by directly calling the native @@method method.
              return { done: true, value: nativeRegExpMethod.call(regexp, str, arg2) };
            }
            return { done: true, value: nativeMethod.call(str, regexp, arg2) };
          }
          return { done: false };
        }
      );
      var strfn = fns[0];
      var rxfn = fns[1];
      _redefine(String.prototype, KEY, strfn);
      _hide(RegExp.prototype, SYMBOL, length == 2
        // 21.2.5.8 RegExp.prototype[@@replace](string, replaceValue)
        // 21.2.5.11 RegExp.prototype[@@split](string, limit)
        ? function (string, arg) { return rxfn.call(string, this, arg); }
        // 21.2.5.6 RegExp.prototype[@@match](string)
        // 21.2.5.9 RegExp.prototype[@@search](string)
        : function (string) { return rxfn.call(string, this); }
      );
    }
  };
  // @@search logic
  _fixReWks('search', 1, function (defined, SEARCH, $search, maybeCallNative) {
    return [
      // `String.prototype.search` method
      // https://tc39.github.io/ecma262/#sec-string.prototype.search
      function search(regexp) {
        var O = defined(this);
        var fn = regexp == undefined ? undefined : regexp[SEARCH];
        return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[SEARCH](String(O));
      },
      // `RegExp.prototype[@@search]` method
      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@search
      function (regexp) {
        var res = maybeCallNative($search, regexp, this);
        if (res.done) return res.value;
        var rx = _anObject(regexp);
        var S = String(this);
        var previousLastIndex = rx.lastIndex;
        if (!_sameValue(previousLastIndex, 0)) rx.lastIndex = 0;
        var result = _regexpExecAbstract(rx, S);
        if (!_sameValue(rx.lastIndex, previousLastIndex)) rx.lastIndex = previousLastIndex;
        return result === null ? -1 : result.index;
      }
    ];
  });
  // 21.2.5.3 get RegExp.prototype.flags()
  if (_descriptors && /./g.flags != 'g') _objectDp.f(RegExp.prototype, 'flags', {
    configurable: true,
@@ -1480,7 +1686,7 @@ typeof navigator === "object" && (function (global, factory) {
        // Set @@toStringTag to native iterators
        _setToStringTag(IteratorPrototype, TAG, true);
        // fix for some old engines
-        if (typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
+        if (!_library && typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
      }
    }
    // fix Array#{values, @@iterator}.name in V8 / FF
@@ -1489,7 +1695,7 @@ typeof navigator === "object" && (function (global, factory) {
      $default = function values() { return $native.call(this); };
    }
    // Define iterator
-    if (BUGGY || VALUES_BUG || !proto[ITERATOR$3]) {
+    if ((!_library || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR$3])) {
      _hide(proto, ITERATOR$3, $default);
    }
    // Plug for library
@@ -2073,19 +2279,67 @@ typeof navigator === "object" && (function (global, factory) {
    throw new TypeError("Invalid attempt to destructure non-iterable instance");
  }
  var _strictMethod = function (method, arg) {
    return !!method && _fails(function () {
      // eslint-disable-next-line no-useless-call
      arg ? method.call(null, function () { /* empty */ }, 1) : method.call(null);
    });
  };
  var $sort = [].sort;
  var test = [1, 2, 3];
  _export(_export.P + _export.F * (_fails(function () {
    // IE8-
    test.sort(undefined);
  }) || !_fails(function () {
    // V8 bug
    test.sort(null);
    // Old WebKit
  }) || !_strictMethod($sort)), 'Array', {
    // 22.1.3.25 Array.prototype.sort(comparefn)
    sort: function sort(comparefn) {
      return comparefn === undefined
        ? $sort.call(_toObject(this))
        : $sort.call(_toObject(this), _aFunction(comparefn));
    }
  });
  // 19.1.3.1 Object.assign(target, source)
  _export(_export.S + _export.F, 'Object', { assign: _objectAssign });
  // 7.3.20 SpeciesConstructor(O, defaultConstructor)
  var SPECIES$2 = _wks('species');
  var _speciesConstructor = function (O, D) {
    var C = _anObject(O).constructor;
    var S;
    return C === undefined || (S = _anObject(C)[SPECIES$2]) == undefined ? D : _aFunction(S);
  };
  var at = _stringAt(true);
   // `AdvanceStringIndex` abstract operation
  // https://tc39.github.io/ecma262/#sec-advancestringindex
  var _advanceStringIndex = function (S, index, unicode) {
    return index + (unicode ? at(S, index).length : 1);
  };
  var $min = Math.min;
  var $push = [].push;
  var $SPLIT = 'split';
  var LENGTH = 'length';
  var LAST_INDEX$1 = 'lastIndex';
  // eslint-disable-next-line no-empty
  var SUPPORTS_Y = !!(function () { try { return new RegExp('x', 'y'); } catch (e) {} })();
  // @@split logic
-  _fixReWks('split', 2, function (defined, SPLIT, $split) {
+  _fixReWks('split', 2, function (defined, SPLIT, $split, maybeCallNative) {
-    var isRegExp = _isRegexp;
+    var internalSplit;
    var _split = $split;
    var $push = [].push;
    var $SPLIT = 'split';
    var LENGTH = 'length';
    var LAST_INDEX = 'lastIndex';
    if (
      'abbc'[$SPLIT](/(b)*/)[1] == 'c' ||
      'test'[$SPLIT](/(?:)/, -1)[LENGTH] != 4 ||
@@ -2094,13 +2348,12 @@ typeof navigator === "object" && (function (global, factory) {
      '.'[$SPLIT](/()()/)[LENGTH] > 1 ||
      ''[$SPLIT](/.?/)[LENGTH]
    ) {
      var NPCG = /()??/.exec('')[1] === undefined; // nonparticipating capturing group
      // based on es5-shim implementation, need to rework it
-      $split = function (separator, limit) {
+      internalSplit = function (separator, limit) {
        var string = String(this);
        if (separator === undefined && limit === 0) return [];
        // If `separator` is not a regex, use native split
-        if (!isRegExp(separator)) return _split.call(string, separator, limit);
+        if (!_isRegexp(separator)) return $split.call(string, separator, limit);
        var output = [];
        var flags = (separator.ignoreCase ? 'i' : '') +
                    (separator.multiline ? 'm' : '') +
@@ -2110,25 +2363,17 @@ typeof navigator === "object" && (function (global, factory) {
        var splitLimit = limit === undefined ? 4294967295 : limit >>> 0;
        // Make `global` and avoid `lastIndex` issues by working with a copy
        var separatorCopy = new RegExp(separator.source, flags + 'g');
-        var separator2, match, lastIndex, lastLength, i;
+        var match, lastIndex, lastLength;
-        // Doesn't need flags gy, but they don't hurt
+        while (match = _regexpExec.call(separatorCopy, string)) {
-        if (!NPCG) separator2 = new RegExp('^' + separatorCopy.source + '$(?!\\s)', flags);
+          lastIndex = separatorCopy[LAST_INDEX$1];
        while (match = separatorCopy.exec(string)) {
          // `separatorCopy.lastIndex` is not reliable cross-browser
          lastIndex = match.index + match[0][LENGTH];
          if (lastIndex > lastLastIndex) {
            output.push(string.slice(lastLastIndex, match.index));
            // Fix browsers whose `exec` methods don't consistently return `undefined` for NPCG
            // eslint-disable-next-line no-loop-func
            if (!NPCG && match[LENGTH] > 1) match[0].replace(separator2, function () {
              for (i = 1; i < arguments[LENGTH] - 2; i++) if (arguments[i] === undefined) match[i] = undefined;
            });
            if (match[LENGTH] > 1 && match.index < string[LENGTH]) $push.apply(output, match.slice(1));
            lastLength = match[0][LENGTH];
            lastLastIndex = lastIndex;
            if (output[LENGTH] >= splitLimit) break;
          }
-          if (separatorCopy[LAST_INDEX] === match.index) separatorCopy[LAST_INDEX]++; // Avoid an infinite loop
+          if (separatorCopy[LAST_INDEX$1] === match.index) separatorCopy[LAST_INDEX$1]++; // Avoid an infinite loop
        }
        if (lastLastIndex === string[LENGTH]) {
          if (lastLength || !separatorCopy.test('')) output.push('');
@@ -2137,16 +2382,74 @@ typeof navigator === "object" && (function (global, factory) {
      };
    // Chakra, V8
    } else if ('0'[$SPLIT](undefined, 0)[LENGTH]) {
-      $split = function (separator, limit) {
+      internalSplit = function (separator, limit) {
-        return separator === undefined && limit === 0 ? [] : _split.call(this, separator, limit);
+        return separator === undefined && limit === 0 ? [] : $split.call(this, separator, limit);
      };
    } else {
      internalSplit = $split;
    }
-    // 21.1.3.17 String.prototype.split(separator, limit)
+
-    return [function split(separator, limit) {
+    return [
-      var O = defined(this);
+      // `String.prototype.split` method
-      var fn = separator == undefined ? undefined : separator[SPLIT];
+      // https://tc39.github.io/ecma262/#sec-string.prototype.split
-      return fn !== undefined ? fn.call(separator, O, limit) : $split.call(String(O), separator, limit);
+      function split(separator, limit) {
-    }, $split];
+        var O = defined(this);
        var splitter = separator == undefined ? undefined : separator[SPLIT];
        return splitter !== undefined
          ? splitter.call(separator, O, limit)
          : internalSplit.call(String(O), separator, limit);
      },
      // `RegExp.prototype[@@split]` method
      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@split
      //
      // NOTE: This cannot be properly polyfilled in engines that don't support
      // the 'y' flag.
      function (regexp, limit) {
        var res = maybeCallNative(internalSplit, regexp, this, limit, internalSplit !== $split);
        if (res.done) return res.value;
        var rx = _anObject(regexp);
        var S = String(this);
        var C = _speciesConstructor(rx, RegExp);
        var unicodeMatching = rx.unicode;
        var flags = (rx.ignoreCase ? 'i' : '') +
                      (rx.multiline ? 'm' : '') +
                      (rx.unicode ? 'u' : '') +
                      (SUPPORTS_Y ? 'y' : 'g');
        // ^(? + rx + ) is needed, in combination with some S slicing, to
        // simulate the 'y' flag.
        var splitter = new C(SUPPORTS_Y ? rx : '^(?:' + rx.source + ')', flags);
        var lim = limit === undefined ? 0xffffffff : limit >>> 0;
        if (lim === 0) return [];
        if (S.length === 0) return _regexpExecAbstract(splitter, S) === null ? [S] : [];
        var p = 0;
        var q = 0;
        var A = [];
        while (q < S.length) {
          splitter.lastIndex = SUPPORTS_Y ? q : 0;
          var z = _regexpExecAbstract(splitter, SUPPORTS_Y ? S : S.slice(q));
          var e;
          if (
            z === null ||
            (e = $min(_toLength(splitter.lastIndex + (SUPPORTS_Y ? 0 : q)), S.length)) === p
          ) {
            q = _advanceStringIndex(S, q, unicodeMatching);
          } else {
            A.push(S.slice(p, q));
            if (A.length === lim) return A;
            for (var i = 1; i <= z.length - 1; i++) {
              A.push(z[i]);
              if (A.length === lim) return A;
            }
            q = p = e;
          }
        }
        A.push(S.slice(p));
        return A;
      }
    ];
  });
  var isEnum = _objectPie.f;
@@ -2184,28 +2487,117 @@ typeof navigator === "object" && (function (global, factory) {
    }
  });
-  // @@replace logic
+  var max$1 = Math.max;
-  _fixReWks('replace', 2, function (defined, REPLACE, $replace) {
+  var min$2 = Math.min;
-    // 21.1.3.14 String.prototype.replace(searchValue, replaceValue)
+  var floor$1 = Math.floor;
-    return [function replace(searchValue, replaceValue) {
+  var SUBSTITUTION_SYMBOLS = /\$([$&`']|\d\d?|<[^>]*>)/g;
-      var O = defined(this);
+  var SUBSTITUTION_SYMBOLS_NO_NAMED = /\$([$&`']|\d\d?)/g;
      var fn = searchValue == undefined ? undefined : searchValue[REPLACE];
      return fn !== undefined
        ? fn.call(searchValue, O, replaceValue)
        : $replace.call(String(O), searchValue, replaceValue);
    }, $replace];
  });
-  // 7.3.20 SpeciesConstructor(O, defaultConstructor)
+  var maybeToString = function (it) {
-
+    return it === undefined ? it : String(it);
  var SPECIES$1 = _wks('species');
  var _speciesConstructor = function (O, D) {
    var C = _anObject(O).constructor;
    var S;
    return C === undefined || (S = _anObject(C)[SPECIES$1]) == undefined ? D : _aFunction(S);
  };
  // @@replace logic
  _fixReWks('replace', 2, function (defined, REPLACE, $replace, maybeCallNative) {
    return [
      // `String.prototype.replace` method
      // https://tc39.github.io/ecma262/#sec-string.prototype.replace
      function replace(searchValue, replaceValue) {
        var O = defined(this);
        var fn = searchValue == undefined ? undefined : searchValue[REPLACE];
        return fn !== undefined
          ? fn.call(searchValue, O, replaceValue)
          : $replace.call(String(O), searchValue, replaceValue);
      },
      // `RegExp.prototype[@@replace]` method
      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@replace
      function (regexp, replaceValue) {
        var res = maybeCallNative($replace, regexp, this, replaceValue);
        if (res.done) return res.value;
        var rx = _anObject(regexp);
        var S = String(this);
        var functionalReplace = typeof replaceValue === 'function';
        if (!functionalReplace) replaceValue = String(replaceValue);
        var global = rx.global;
        if (global) {
          var fullUnicode = rx.unicode;
          rx.lastIndex = 0;
        }
        var results = [];
        while (true) {
          var result = _regexpExecAbstract(rx, S);
          if (result === null) break;
          results.push(result);
          if (!global) break;
          var matchStr = String(result[0]);
          if (matchStr === '') rx.lastIndex = _advanceStringIndex(S, _toLength(rx.lastIndex), fullUnicode);
        }
        var accumulatedResult = '';
        var nextSourcePosition = 0;
        for (var i = 0; i < results.length; i++) {
          result = results[i];
          var matched = String(result[0]);
          var position = max$1(min$2(_toInteger(result.index), S.length), 0);
          var captures = [];
          // NOTE: This is equivalent to
          //   captures = result.slice(1).map(maybeToString)
          // but for some reason `nativeSlice.call(result, 1, result.length)` (called in
          // the slice polyfill when slicing native arrays) "doesn't work" in safari 9 and
          // causes a crash (https://pastebin.com/N21QzeQA) when trying to debug it.
          for (var j = 1; j < result.length; j++) captures.push(maybeToString(result[j]));
          var namedCaptures = result.groups;
          if (functionalReplace) {
            var replacerArgs = [matched].concat(captures, position, S);
            if (namedCaptures !== undefined) replacerArgs.push(namedCaptures);
            var replacement = String(replaceValue.apply(undefined, replacerArgs));
          } else {
            replacement = getSubstitution(matched, S, position, captures, namedCaptures, replaceValue);
          }
          if (position >= nextSourcePosition) {
            accumulatedResult += S.slice(nextSourcePosition, position) + replacement;
            nextSourcePosition = position + matched.length;
          }
        }
        return accumulatedResult + S.slice(nextSourcePosition);
      }
    ];
      // https://tc39.github.io/ecma262/#sec-getsubstitution
    function getSubstitution(matched, str, position, captures, namedCaptures, replacement) {
      var tailPos = position + matched.length;
      var m = captures.length;
      var symbols = SUBSTITUTION_SYMBOLS_NO_NAMED;
      if (namedCaptures !== undefined) {
        namedCaptures = _toObject(namedCaptures);
        symbols = SUBSTITUTION_SYMBOLS;
      }
      return $replace.call(replacement, symbols, function (match, ch) {
        var capture;
        switch (ch.charAt(0)) {
          case '$': return '$';
          case '&': return matched;
          case '`': return str.slice(0, position);
          case "'": return str.slice(tailPos);
          case '<':
            capture = namedCaptures[ch.slice(1, -1)];
            break;
          default: // \d\d?
            var n = +ch;
            if (n === 0) return match;
            if (n > m) {
              var f = floor$1(n / 10);
              if (f === 0) return match;
              if (f <= m) return captures[f - 1] === undefined ? ch.charAt(1) : captures[f - 1] + ch.charAt(1);
              return match;
            }
            capture = captures[n - 1];
        }
        return capture === undefined ? '' : capture;
      });
    }
  });
  // fast apply, http://jsperf.lnkit.com/fast-apply/5
  var _invoke = function (fn, args, that) {
    var un = that === undefined;
@@ -2415,11 +2807,11 @@ typeof navigator === "object" && (function (global, factory) {
    return promiseCapability.promise;
  };
-  var SPECIES$2 = _wks('species');
+  var SPECIES$3 = _wks('species');
  var _setSpecies = function (KEY) {
    var C = _global[KEY];
-    if (_descriptors && C && !C[SPECIES$2]) _objectDp.f(C, SPECIES$2, {
+    if (_descriptors && C && !C[SPECIES$3]) _objectDp.f(C, SPECIES$3, {
      configurable: true,
      get: function () { return this; }
    });
@@ -2650,7 +3042,7 @@ typeof navigator === "object" && (function (global, factory) {
      return capability.promise;
    }
  });
-  _export(_export.S + _export.F * (!USE_NATIVE), PROMISE, {
+  _export(_export.S + _export.F * (_library || !USE_NATIVE), PROMISE, {
    // 25.4.4.6 Promise.resolve(x)
    resolve: function resolve(x) {
      return _promiseResolve(_library && this === Wrapper ? $Promise : this, x);
@@ -3195,15 +3587,12 @@ typeof navigator === "object" && (function (global, factory) {
  } // Element matches selector
  function matches(element, selector) {
    var prototype = {
      Element: Element
    };
    function match() {
      return Array.from(document.querySelectorAll(selector)).includes(this);
    }
-    var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
+    var matches = match;
    return matches.call(element, selector);
  } // Find all elements
@@ -3259,7 +3648,9 @@ typeof navigator === "object" && (function (global, factory) {
    } // Set regular focus
-    element.focus(); // If we want to mimic keyboard focus via tab
+    element.focus({
      preventScroll: true
    }); // If we want to mimic keyboard focus via tab
    if (tabFocus) {
      toggleClass(element, this.config.classNames.tabFocus);
@@ -3363,26 +3754,20 @@ typeof navigator === "object" && (function (global, factory) {
          _inputType$split2 = _slicedToArray(_inputType$split, 1),
          mediaType = _inputType$split2[0];
      var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
      if (!this.isHTML5 || mediaType !== this.type) {
        return false;
-      }
+      } // Add codec if required
      var type;
-      if (inputType && inputType.includes('codecs=')) {
+      if (Object.keys(defaultCodecs).includes(type)) {
-        // Use input directly
+        type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
        type = inputType;
      } else if (inputType === 'audio/mpeg') {
        // Skip codec
        type = 'audio/mpeg;';
      } else if (inputType in defaultCodecs) {
        // Use codec
        type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
      }
      try {
        return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-      } catch (err) {
+      } catch (e) {
        return false;
      }
    },
@@ -5292,7 +5677,7 @@ typeof navigator === "object" && (function (global, factory) {
      var update = true; // If function, run it and use output
      if (is$1.function(this.config.controls)) {
-        this.config.controls = this.config.controls.call(this.props);
+        this.config.controls = this.config.controls.call(this, props);
      } // Convert falsy controls to empty array (primarily for empty strings)
@@ -5855,7 +6240,7 @@ typeof navigator === "object" && (function (global, factory) {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
    // Quality default
@@ -6988,7 +7373,7 @@ typeof navigator === "object" && (function (global, factory) {
        }); // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-        on.call(player, player.media, 'canplay', function () {
+        on.call(player, player.media, 'canplay loadeddata', function () {
          toggleHidden(elements.volume, !player.hasAudio);
          toggleHidden(elements.buttons.mute, !player.hasAudio);
        }); // Handle the media finishing
@@ -7393,20 +7778,42 @@ typeof navigator === "object" && (function (global, factory) {
  });
  // @@match logic
-  _fixReWks('match', 1, function (defined, MATCH, $match) {
+  _fixReWks('match', 1, function (defined, MATCH, $match, maybeCallNative) {
-    // 21.1.3.11 String.prototype.match(regexp)
+    return [
-    return [function match(regexp) {
+      // `String.prototype.match` method
-      var O = defined(this);
+      // https://tc39.github.io/ecma262/#sec-string.prototype.match
-      var fn = regexp == undefined ? undefined : regexp[MATCH];
+      function match(regexp) {
-      return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[MATCH](String(O));
+        var O = defined(this);
-    }, $match];
+        var fn = regexp == undefined ? undefined : regexp[MATCH];
        return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[MATCH](String(O));
      },
      // `RegExp.prototype[@@match]` method
      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@match
      function (regexp) {
        var res = maybeCallNative($match, regexp, this);
        if (res.done) return res.value;
        var rx = _anObject(regexp);
        var S = String(this);
        if (!rx.global) return _regexpExecAbstract(rx, S);
        var fullUnicode = rx.unicode;
        rx.lastIndex = 0;
        var A = [];
        var n = 0;
        var result;
        while ((result = _regexpExecAbstract(rx, S)) !== null) {
          var matchStr = String(result[0]);
          A[n] = matchStr;
          if (matchStr === '') rx.lastIndex = _advanceStringIndex(S, _toLength(rx.lastIndex), fullUnicode);
          n++;
        }
        return n === 0 ? null : A;
      }
    ];
  });
  var loadjs_umd = createCommonjsModule(function (module, exports) {
  (function(root, factory) {
-    if (typeof undefined === 'function' && undefined.amd) {
+    {
      undefined([], factory);
    } else {
      module.exports = factory();
    }
  }(commonjsGlobal, function() {
@@ -7548,8 +7955,8 @@ typeof navigator === "object" && (function (global, factory) {
          if (!e.sheet.cssText.length) result = 'e';
        } catch (x) {
          // sheets objects created from load errors don't allow access to
-          // `cssText`
+          // `cssText` (unless error is Code:18 SecurityError)
-          result = 'e';
+          if (x.code != 18) result = 'e';
        }
      }
@@ -7762,12 +8169,13 @@ typeof navigator === "object" && (function (global, factory) {
    // Set aspect ratio
    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
    setAspectRatio: function setAspectRatio(input) {
-      var _split = (is$1.string(input) ? input : this.config.ratio).split(':'),
+      var _split$map = (is$1.string(input) ? input : this.config.ratio).split(':').map(Number),
-          _split2 = _slicedToArray(_split, 2),
+          _split$map2 = _slicedToArray(_split$map, 2),
-          x = _split2[0],
+          x = _split$map2[0],
-          y = _split2[1];
+          y = _split$map2[1];
      var padding = 100 / x * y;
      vimeo.padding = padding;
      this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
      if (this.supported.ui) {
@@ -7971,8 +8379,8 @@ typeof navigator === "object" && (function (global, factory) {
      }); // Set aspect ratio based on video size
      Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
-        var ratio = getAspectRatio(dimensions[0], dimensions[1]);
+        vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
-        vimeo.setAspectRatio.call(_this2, ratio);
+        vimeo.setAspectRatio.call(_this2, vimeo.ratio);
      }); // Set autopause
      player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -8063,6 +8471,24 @@ typeof navigator === "object" && (function (global, factory) {
      player.embed.on('error', function (detail) {
        player.media.error = detail;
        triggerEvent.call(player, player.media, 'error');
      }); // Set height/width on fullscreen
      player.on('enterfullscreen exitfullscreen', function (event) {
        var target = player.fullscreen.target; // Ignore for iOS native
        if (target !== player.elements.container) {
          return;
        }
        var toggle = event.type === 'enterfullscreen';
        var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
            _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
            x = _vimeo$ratio$split$ma2[0],
            y = _vimeo$ratio$split$ma2[1];
        var dimension = x > y ? 'width' : 'height';
        target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
      }); // Rebuild UI
      setTimeout(function () {
@@ -9237,18 +9663,20 @@ typeof navigator === "object" && (function (global, factory) {
        if (_this2.isHTML5) {
          // Setup captions
-          if ('tracks' in input) {
+          if (Object.keys(input).includes('tracks')) {
            source.insertElements.call(_this2, 'track', input.tracks);
-          } // Load HTML5 sources
+          }
          _this2.media.load();
        } // If HTML5 or embed but not fully supported, setupInterface and call ready now
        if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
          // Setup interface
          ui.build.call(_this2);
        }
        if (_this2.isHTML5) {
          // Load HTML5 sources
          _this2.media.load();
        } // Update the fullscreen support
@@ -12,7 +12,6 @@ const concat = require('gulp-concat');
 const filter = require('gulp-filter');
 const sass = require('gulp-sass');
 const cleancss = require('gulp-clean-css');
 const run = require('run-sequence');
 const header = require('gulp-header');
 const prefix = require('gulp-autoprefixer');
 const gitbranch = require('git-branch');
@@ -106,13 +105,15 @@ const babelrc = (polyfill = false) => ({
 });
 // Clean out /dist
-gulp.task('clean', () => {
+gulp.task('clean', done => {
    const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
    // Don't delete the mp4
    dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
    del(dirs);
    done();
 });
 const build = {
@@ -201,31 +202,25 @@ build.sass(bundles.demo.sass, 'demo');
 build.js(bundles.demo.js, 'demo', { format: 'iife' });
 // Build all JS
-gulp.task('js', () => {
+gulp.task('js', () => gulp.parallel(tasks.js));
    run(tasks.js);
 });
 // Watch for file changes
 gulp.task('watch', () => {
    // Plyr core
-    gulp.watch(paths.plyr.src.js, tasks.js);
+    gulp.watch(paths.plyr.src.js, gulp.parallel(tasks.js));
-    gulp.watch(paths.plyr.src.sass, tasks.sass);
+    gulp.watch(paths.plyr.src.sass, gulp.parallel(tasks.sass));
-    gulp.watch(paths.plyr.src.sprite, tasks.sprite);
+    gulp.watch(paths.plyr.src.sprite, gulp.parallel(tasks.sprite));
    // Demo
-    gulp.watch(paths.demo.src.js, tasks.js);
+    gulp.watch(paths.demo.src.js, gulp.parallel(tasks.js));
-    gulp.watch(paths.demo.src.sass, tasks.sass);
+    gulp.watch(paths.demo.src.sass, gulp.parallel(tasks.sass));
 });
 // Build distribution
-gulp.task('build', () => {
+gulp.task('build', gulp.series(tasks.clean, gulp.parallel(tasks.js, tasks.sass, tasks.sprite)));
    run(tasks.clean, tasks.js, tasks.sass, tasks.sprite);
 });
 // Default gulp task
-gulp.task('default', () => {
+gulp.task('default', gulp.series('build', 'watch'));
    run('build', 'watch');
 });
 // Publish a version to CDN and demo
 // --------------------------------------------
@@ -452,7 +447,16 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
    });
    // Do everything
-    gulp.task('deploy', () =>
+    gulp.task(
-        run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'purge', 'demo', 'open'),
+        'deploy',
        gulp.series(
            'version',
            tasks.clean,
            gulp.parallel(tasks.js, tasks.sass, tasks.sprite),
            'cdn',
            'demo',
            'purge',
            'open',
        ),
    );
 }
@@ -1,6 +1,6 @@
 {
    "name": "plyr",
-    "version": "3.4.6",
+    "version": "3.4.8",
    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
    "homepage": "https://plyr.io",
    "author": "Sam Potts <sam@potts.es>",
@@ -35,19 +35,19 @@
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
-        "babel-core": "^6.26.3",
+        "@babel/core": "^7.1.5",
        "babel-eslint": "^10.0.1",
-        "@babel/preset-env": "^7.1.0",
+        "@babel/preset-env": "^7.1.5",
        "del": "^3.0.0",
-        "eslint": "^5.7.0",
+        "eslint": "^5.8.0",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-config-prettier": "^3.1.0",
        "eslint-plugin-import": "^2.14.0",
        "fastly-purge": "^1.0.1",
        "git-branch": "^2.0.1",
-        "gulp": "^3.9.1",
+        "gulp": "^4.0.0",
        "gulp-autoprefixer": "^6.0.0",
-        "gulp-better-rollup": "^3.3.0",
+        "gulp-better-rollup": "^3.4.0",
        "gulp-clean-css": "^3.10.0",
        "gulp-concat": "^2.6.1",
        "gulp-filter": "^5.1.0",
@@ -64,23 +64,22 @@
        "gulp-svgstore": "^7.0.0",
        "gulp-uglify-es": "^1.0.4",
        "gulp-util": "^3.0.8",
-        "postcss-custom-properties": "^8.0.8",
+        "postcss-custom-properties": "^8.0.9",
        "prettier-eslint": "^8.8.2",
        "prettier-stylelint": "^0.4.2",
-        "remark-cli": "^5.0.0",
+        "remark-cli": "^6.0.0",
        "remark-validate-links": "^7.1.0",
        "rollup-plugin-babel": "^4.0.3",
        "rollup-plugin-commonjs": "^9.2.0",
        "rollup-plugin-node-resolve": "^3.4.0",
-        "run-sequence": "^2.2.1",
+        "stylelint": "^9.7.1",
        "stylelint": "^9.6.0",
        "stylelint-config-prettier": "^4.0.0",
        "stylelint-config-recommended": "^2.1.0",
        "stylelint-config-sass-guidelines": "^5.2.0",
        "stylelint-order": "^1.0.0",
-        "stylelint-scss": "^3.3.2",
+        "stylelint-scss": "^3.4.0",
        "stylelint-selector-bem-pattern": "^2.0.0",
-        "through2": "^2.0.3"
+        "through2": "^3.0.0"
    },
    "dependencies": {
        "core-js": "^2.5.7",
@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 ```html
-<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.8/plyr.js"></script>
 ```
 ...or...
 ```html
-<script src="https://cdn.plyr.io/3.4.6/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.8/plyr.polyfilled.js"></script>
 ```
 ### CSS
@@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.4.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.8/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.4.6/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.8/plyr.svg`.
 ## Ads
@@ -417,7 +417,7 @@ player.fullscreen.active; // false;
 | `language`           | ✓      | ✓      | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
 | `fullscreen.active`  | ✓      | -      | Returns a boolean indicating if the current player is in fullscreen mode.                                                                                                                                                                                                                                                              |
 | `fullscreen.enabled` | ✓      | -      | Returns a boolean indicating if the current player has fullscreen enabled.                                                                                                                                                                                                                                                             |
-| `pip`                | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |
+| `pip`&sup2;                | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |
 1.  YouTube only. HTML5 will follow.
 2.  HTML5 only
@@ -714,6 +714,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
 -   [koel - A personal music streaming server that works.](http://koel.phanan.net/)
 -   [Oscar Radio](http://oscar-radio.xyz/)
 -   [Sparkk TV](https://www.sparkktv.com/)
 -   [@halfhalftravel](https://www.halfhalftravel.com/)
 Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
@@ -60,7 +60,7 @@ const defaults = {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -1587,7 +1587,7 @@ const controls = {
        // If function, run it and use output
        if (is.function(this.config.controls)) {
-            this.config.controls = this.config.controls.call(this.props);
+            this.config.controls = this.config.controls.call(this, props);
        }
        // Convert falsy controls to empty array (primarily for empty strings)
@@ -317,7 +317,7 @@ class Listeners {
        // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-        on.call(player, player.media, 'canplay', () => {
+        on.call(player, player.media, 'canplay loadeddata', () => {
            toggleHidden(elements.volume, !player.hasAudio);
            toggleHidden(elements.buttons.mute, !player.hasAudio);
        });
@@ -70,8 +70,9 @@ const vimeo = {
    // Set aspect ratio
    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
    setAspectRatio(input) {
-        const [x, y] = (is.string(input) ? input : this.config.ratio).split(':');
+        const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number);
        const padding = (100 / x) * y;
        vimeo.padding = padding;
        this.elements.wrapper.style.paddingBottom = `${padding}%`;
        if (this.supported.ui) {
@@ -299,8 +300,8 @@ const vimeo = {
        // Set aspect ratio based on video size
        Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
-            const ratio = getAspectRatio(dimensions[0], dimensions[1]);
+            vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
-            vimeo.setAspectRatio.call(this, ratio);
+            vimeo.setAspectRatio.call(this, vimeo.ratio);
        });
        // Set autopause
@@ -404,6 +405,22 @@ const vimeo = {
            triggerEvent.call(player, player.media, 'error');
        });
        // Set height/width on fullscreen
        player.on('enterfullscreen exitfullscreen', event => {
            const { target } = player.fullscreen;
            // Ignore for iOS native
            if (target !== player.elements.container) {
                return;
            }
            const toggle = event.type === 'enterfullscreen';
            const [x, y] = vimeo.ratio.split(':').map(Number);
            const dimension = x > y ? 'width' : 'height';
            target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
        });
        // Rebuild UI
        setTimeout(() => ui.build.call(player), 0);
    },
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.6
+// plyr.js v3.4.8
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.4.6
+// plyr.js v3.4.8
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -114,12 +114,9 @@ const source = {
                // HTML5 stuff
                if (this.isHTML5) {
                    // Setup captions
-                    if ('tracks' in input) {
+                    if (Object.keys(input).includes('tracks')) {
                        source.insertElements.call(this, 'track', input.tracks);
                    }
                    // Load HTML5 sources
                    this.media.load();
                }
                // If HTML5 or embed but not fully supported, setupInterface and call ready now
@@ -128,6 +125,11 @@ const source = {
                    ui.build.call(this);
                }
                if (this.isHTML5) {
                    // Load HTML5 sources
                    this.media.load();
                }
                // Update the fullscreen support
                this.fullscreen.update();
            },
@@ -70,25 +70,21 @@ const support = {
    // Related: http://www.leanbackplayer.com/test/h5mt.html
    mime(inputType) {
        const [mediaType] = inputType.split('/');
        let type = inputType;
        // Verify we're using HTML5 and there's no media type mismatch
        if (!this.isHTML5 || mediaType !== this.type) {
            return false;
        }
-        let type;
+        // Add codec if required
-        if (inputType && inputType.includes('codecs=')) {
+        if (Object.keys(defaultCodecs).includes(type)) {
-            // Use input directly
+            type += `; codecs="${defaultCodecs[inputType]}"`;
            type = inputType;
        } else if (inputType === 'audio/mpeg') {
            // Skip codec
            type = 'audio/mpeg;';
        } else if (inputType in defaultCodecs) {
            // Use codec
            type = `${inputType}; codecs="${defaultCodecs[inputType]}"`;
        }
        try {
            return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-        } catch (err) {
+        } catch (e) {
            return false;
        }
    },
@@ -293,7 +293,7 @@ export function setFocus(element = null, tabFocus = false) {
    }
    // Set regular focus
-    element.focus();
+    element.focus({ preventScroll: true });
    // If we want to mimic keyboard focus via tab
    if (tabFocus) {
@@ -12,7 +12,7 @@ $plyr-range-thumb-border: 2px solid transparent !default;
 $plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
 // Track
-$plyr-range-track-height: 6px !default;
+$plyr-range-track-height: 4px !default;
 $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 // Fill
@@ -17,4 +17,4 @@ $plyr-font-weight-bold: 600 !default;
 $plyr-line-height: 1.7 !default;
-$plyr-font-smoothing: true !default;
+$plyr-font-smoothing: false !default;
Author	SHA1	Message	Date
Sam Potts	f927d26ce7	v3.4.8 - Calling customized controls function with proper arguments (thanks @a60814billy)	2019-01-17 11:37:19 +11:00
Sam Potts	e8d2f23b81	Merge pull request #1254 from a60814billy/fix/custom-controls-calling-argument Calling customized controls function with proper arguments	2018-11-12 21:32:31 +11:00
Raccoon	0e181133c1	Calling customized controls function with proper arguments	2018-11-12 15:37:46 +08:00
Sam Potts	2c8a337f26	v3.4.7 - Fix for Vimeo fullscreen with non native aspect ratios (fixes #854)	2018-11-08 23:34:10 +11:00
Sam Potts	c24e52d97d	Package updates	2018-11-08 23:29:54 +11:00
Sam Potts	574f40949c	Merge branch 'master' into develop	2018-11-08 23:19:57 +11:00
Sam Potts	cf3848fbd5	Merge branch 'develop' of github.com:sampotts/plyr into develop	2018-11-08 23:19:26 +11:00
Sam Potts	a19ad69038	Fix for Vimeo fullscreen with non 16:9 aspect ratios	2018-11-08 23:19:11 +11:00
Sam Potts	d6f20e2756	Package upgrades	2018-11-08 23:18:23 +11:00
Sam Potts	e2fc20ca76	Styling tweaks	2018-11-08 23:18:04 +11:00
Sam Potts	37c3f7109d	Additional listener for checking for audio tracks	2018-11-08 23:17:44 +11:00
Sam Potts	99d5211a33	Merge pull request #1247 from danielcgold/patch-1 [Edit README] Halfhalftravel uses Plyr!	2018-11-06 10:17:55 +11:00
Dan Gold	b97f143195	Halfhalftravel uses Plyr! https://www.halfhalftravel.com/events/medellin-photo-walk.html https://www.halfhalftravel.com/travel-guides/how-to-travel-to-santa-fe-de-antioquia-colombia.html	2018-11-05 10:57:23 -05:00
Sam Potts	e8da4326b6	Prevent scroll on focus	2018-11-03 21:17:46 +11:00
Sam Potts	67f908aa8d	Load media after UI is built	2018-11-03 21:17:32 +11:00
Sam Potts	65eb5c1b8b	Fix support check	2018-11-03 21:16:40 +11:00
Sam Potts	7d484c6e09	Merge pull request #1232 from tocsinde/patch-1 Readme: Add missing annotation to PIP support	2018-10-26 08:37:33 +11:00
Stephan Fischer	8252e13eb9	Readme: Add missing annotation to PIP support PIP only works on HTML videos, so I added the number of the (already existing) annotation.	2018-10-25 23:35:20 +02:00
`@@ -17,4 +17,4 @@ $plyr-font-weight-bold: 600 !default;`

	`$plyr-line-height: 1.7 !default;`	`$plyr-line-height: 1.7 !default;`

	`$plyr-font-smoothing: true !default;`	`$plyr-font-smoothing: false !default;`