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
37 changed files with 4070 additions and 1873 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);
@@ -705,9 +704,25 @@ typeof navigator === "object" && (function (global, factory) {
      };
    },
    // Picture-in-picture support
-    // Safari only currently
+    // Safari & Chrome only currently
    pip: function () {
-      return !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode);
+      if (browser.isIPhone) {
        return false;
      } // Safari
      // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
      if (is.function(createElement('video').webkitSetPresentationMode)) {
        return true;
      } // Chrome
      // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
      if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
        return true;
      }
      return false;
    }(),
    // Airplay support
    // Safari only currently
@@ -723,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;
      }
    },
@@ -840,10 +849,6 @@ typeof navigator === "object" && (function (global, factory) {
          triggerEvent.call(player, player.media, 'qualitychange', false, {
            quality: input
          }); // Save to storage
          player.storage.set({
            quality: input
          });
        }
      });
@@ -2617,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)
@@ -3180,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.12/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
@@ -3444,6 +3449,14 @@ typeof navigator === "object" && (function (global, factory) {
    }
  };
  // ==========================================================================
  // Plyr states
  // ==========================================================================
  var pip = {
    active: 'picture-in-picture',
    inactive: 'inline'
  };
  // ==========================================================================
  // Plyr supported types and providers
  // ==========================================================================
@@ -4295,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
@@ -4690,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() {
@@ -4834,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';
        }
      }
@@ -5049,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) {
@@ -5258,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) {
@@ -5350,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 () {
@@ -6527,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
@@ -7429,17 +7461,26 @@ typeof navigator === "object" && (function (global, factory) {
        }
        var quality = [!is.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is.number);
        var updateStorage = true;
        if (!options.includes(quality)) {
          var value = closest(options, quality);
          this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
-          quality = value;
+          quality = value; // Don't update storage if quality is not supported
          updateStorage = false;
        } // Update config
        config.selected = quality; // Set quality
-        this.media.quality = quality;
+        this.media.quality = quality; // Save to storage
        if (updateStorage) {
          this.storage.set({
            quality: quality
          });
        }
      }
      /**
       * Get current quality level
@@ -7618,19 +7659,27 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "pip",
      set: function set(input) {
-        var states = {
+        // Bail if no support
          pip: 'picture-in-picture',
          inline: 'inline'
        }; // Bail if no support
        if (!support.pip) {
          return;
        } // Toggle based on current state if not passed
-        var toggle = is.boolean(input) ? input : this.pip === states.inline; // Toggle based on current state
+        var toggle = is.boolean(input) ? input : !this.pip; // Toggle based on current state
        // Safari
-        this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+        if (is.function(this.media.webkitSetPresentationMode)) {
          this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
        } // Chrome
        if (is.function(this.media.requestPictureInPicture)) {
          if (!this.pip && toggle) {
            this.media.requestPictureInPicture();
          } else if (this.pip && !toggle) {
            document.exitPictureInPicture();
          }
        }
      }
      /**
       * Get the current picture-in-picture state
@@ -7639,9 +7688,15 @@ typeof navigator === "object" && (function (global, factory) {
      get: function get() {
        if (!support.pip) {
          return null;
-        }
+        } // Safari
-        return this.media.webkitPresentationMode;
+
        if (!is.empty(this.media.webkitPresentationMode)) {
          return this.media.webkitPresentationMode === pip.active;
        } // Chrome
        return this.media === document.pictureInPictureElement;
      }
    }], [{
      key: "supported",
@@ -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
 // --------------------------------------------
@@ -308,13 +303,13 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
        console.log(`Updating versions to '${version}'...`);
        // Replace versioned URLs in source
-        const files = ['plyr.js', 'plyr.polyfilled.js', 'defaults.js'];
+        const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
        return gulp
-            .src(files.map(file => path.join(root, `src/js/${file}`)))
+            .src(files.map(file => path.join(root, `src/js/${file}`)), { base: '.' })
            .pipe(replace(semver, `v${version}`))
            .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
-            .pipe(gulp.dest(path.join(root, 'src/js/')));
+            .pipe(gulp.dest('./'));
    });
    // Publish version to CDN bucket
@@ -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.5",
+    "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.5/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.5/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.5/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.5/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+.                                                                                                                                                                       |
+| `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.3.12/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',
@@ -0,0 +1,10 @@
 // ==========================================================================
 // Plyr states
 // ==========================================================================
 export const pip = {
    active: 'picture-in-picture',
    inactive: 'inline',
 };
 export default { pip };
@@ -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)
@@ -82,9 +82,6 @@ const html5 = {
                triggerEvent.call(player, player.media, 'qualitychange', false, {
                    quality: input,
                });
                // Save to storage
                player.storage.set({ quality: input });
            },
        });
    },
@@ -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,12 +1,13 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.5
+// plyr.js v3.4.8
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
 import captions from './captions';
 import defaults from './config/defaults';
 import { pip } from './config/states';
 import { getProviderByUrl, providers, types } from './config/types';
 import Console from './console';
 import controls from './controls';
@@ -695,10 +696,15 @@ class Plyr {
            config.default,
        ].find(is.number);
        let updateStorage = true;
        if (!options.includes(quality)) {
            const value = closest(options, quality);
            this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
            quality = value;
            // Don't update storage if quality is not supported
            updateStorage = false;
        }
        // Update config
@@ -706,6 +712,11 @@ class Plyr {
        // Set quality
        this.media.quality = quality;
        // Save to storage
        if (updateStorage) {
            this.storage.set({ quality });
        }
    }
    /**
@@ -886,21 +897,28 @@ class Plyr {
     * TODO: detect outside changes
     */
    set pip(input) {
        const states = {
            pip: 'picture-in-picture',
            inline: 'inline',
        };
        // Bail if no support
        if (!support.pip) {
            return;
        }
        // Toggle based on current state if not passed
-        const toggle = is.boolean(input) ? input : this.pip === states.inline;
+        const toggle = is.boolean(input) ? input : !this.pip;
        // Toggle based on current state
-        this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+        // Safari
        if (is.function(this.media.webkitSetPresentationMode)) {
            this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
        }
        // Chrome
        if (is.function(this.media.requestPictureInPicture)) {
            if (!this.pip && toggle) {
                this.media.requestPictureInPicture();
            } else if (this.pip && !toggle) {
                document.exitPictureInPicture();
            }
        }
    }
    /**
@@ -911,7 +929,13 @@ class Plyr {
            return null;
        }
-        return this.media.webkitPresentationMode;
+        // Safari
        if (!is.empty(this.media.webkitPresentationMode)) {
            return this.media.webkitPresentationMode === pip.active;
        }
        // Chrome
        return this.media === document.pictureInPictureElement;
    }
    /**
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.4.5
+// 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();
            },
@@ -36,8 +36,26 @@ const support = {
    },
    // Picture-in-picture support
-    // Safari only currently
+    // Safari & Chrome only currently
-    pip: (() => !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode))(),
+    pip: (() => {
        if (browser.isIPhone) {
            return false;
        }
        // Safari
        // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
        if (is.function(createElement('video').webkitSetPresentationMode)) {
            return true;
        }
        // Chrome
        // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
        if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
            return true;
        }
        return false;
    })(),
    // Airplay support
    // Safari only currently
@@ -52,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
Sam Potts	1a9b860e68	v3.4.6 - Added picture-in-picture support for Chrome 70+ - Fixed issue with versioning the SVG sprite in the gulp build script	2018-10-25 09:44:40 +11:00
Sam Potts	cede7d0f35	Fix gulp build	2018-10-25 09:21:37 +11:00
Sam Potts	fe26d383f1	Added support for picture-in-picture in Chrome	2018-10-25 09:17:15 +11:00
Sam Potts	df4bc268dc	Merge branch 'master' into develop	2018-10-25 00:14:14 +11:00
Sam Potts	67b7262764	Revert PR #1211	2018-10-24 23:00:54 +11:00
Sam Potts	88528ef979	Merge pull request #1197 from TechGuard/fix-html5-quality-settings Fix html5 quality settings	2018-10-24 22:39:34 +11:00
Sam Potts	b6175b1ca9	Merge branch 'develop' into fix-html5-quality-settings	2018-10-24 22:39:10 +11:00
Sam Potts	aa20ebaa9c	Merge pull request #1211 from melbahja/develop duration after changing video quality	2018-10-24 22:37:49 +11:00
Mohamed Elbahja	06db3f702d	Update plyr.js	2018-10-13 13:23:42 +01:00
Mohamed Elbahja	a2a82a96a6	fix: continue with the current duration after changing video quality	2018-10-13 12:59:59 +01:00
Robin van Nunen	a86bbae851	Only save quality setting when it's updated by the user. Fixes bug in html5 player where it would override the settings if the current video does not support the given quality.	2018-09-29 21:23:10 +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;`