Merge pull request #795 from frogg/patch-1

Added link that explains Webkit's autoplay blocker

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

changelog.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v2.0.18
+- Fix for YouTube .getVideoData() issue (fixes #709)
+
+## v2.0.17
+- Vimeo controls fix (fixes #697)
+- SVG4everybody compatibility fix
+- Allow Plyr.setup event listeners to be set up as separate event listeners (https://github.com/sampotts/plyr/pull/703)
+- Added title to the layer html template (for custom controls) (https://github.com/sampotts/plyr/pull/649)
+- Target is null bug fix (https://github.com/sampotts/plyr/pull/617)
+- fix #684 memory leaks issues after destroy (https://github.com/sampotts/plyr/pull/700)
+
 ## v2.0.16
 - Fullscreen bug fix (fixes #664)
 

controls.md

@@ -37,6 +37,7 @@ You need to add several placeholders to your html template that are replaced whe
 
 - `{id}` - the dynamically generated ID for the player (for form controls)
 - `{seektime}` - the seek time specified in options for fast forward and rewind
+- `{title}` - the title of your media, if specified
 
 You can include only the controls you need when specifying custom html.
 

demo/dist/demo.js

@@ -1 +1 @@
-"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",i="prototype",o=t.Element[i],s=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},a=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},c=function(t,e){if(""===e)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=n.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],o=0,s=i.length;o<s;o++)this.push(i[o]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",c(this,t)!==-1},u.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do t=e[i]+"",c(this,t)===-1&&(this.push(t),s=!0);while(++i<o);s&&this._updateClassName()},u.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do for(t=i[o]+"",e=c(this,t);e!==-1;)this.splice(e,1),n=!0,e=c(this,t);while(++o<s);n&&this._updateClassName()},u.toggle=function(t,e){t+="";var i=this.contains(t),o=i?e!==!0&&"remove":e!==!1&&"add";return o&&this[o](t),e===!0||e===!1?e:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(o,e,p)}catch(h){h.number===-2146823252&&(p.enumerable=!1,s.defineProperty(o,e,p))}}else s[i].__defineGetter__&&o.__defineGetter__(e,d)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t[s]=t[s]||function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src=o,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
+"document"in self&&("classList"in document.createElement("_")?function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():function(t){"use strict";if("Element"in t){var e=t.Element.prototype,i=Object,o=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},s=Array.prototype.indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},n=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},r=function(t,e){if(""===e)throw new n("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new n("INVALID_CHARACTER_ERR","String contains an invalid character");return s.call(t,e)},a=function(t){for(var e=o.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],s=0,n=i.length;s<n;s++)this.push(i[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},c=a.prototype=[],l=function(){return new a(this)};if(n.prototype=Error.prototype,c.item=function(t){return this[t]||null},c.contains=function(t){return t+="",-1!==r(this,t)},c.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do{t=e[i]+"",-1===r(this,t)&&(this.push(t),s=!0)}while(++i<o);s&&this._updateClassName()},c.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do{for(t=i[o]+"",e=r(this,t);-1!==e;)this.splice(e,1),n=!0,e=r(this,t)}while(++o<s);n&&this._updateClassName()},c.toggle=function(t,e){t+="";var i=this.contains(t),o=i?!0!==e&&"remove":!1!==e&&"add";return o&&this[o](t),!0===e||!1===e?e:!i},c.toString=function(){return this.join(" ")},i.defineProperty){var u={get:l,enumerable:!0,configurable:!0};try{i.defineProperty(e,"classList",u)}catch(t){-2146823252===t.number&&(u.enumerable=!1,i.defineProperty(e,"classList",u))}}else i.prototype.__defineGetter__&&e.__defineGetter__("classList",l)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t.ga=t.ga||function(){(t.ga.q=t.ga.q||[]).push(arguments)},t.ga.l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(n,r)}(window,document,"script",0,"ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

demo/src/less/lib/fontface.less

@@ -3,17 +3,15 @@
 // ==========================================================================
 
 @font-face {
-    font-family: "Avenir";
+    font-family: 'Avenir';
-    src: url("//cdn.plyr.io/static/fonts/avenir-medium.woff2") format("woff2"),
+    src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
-        url("//cdn.plyr.io/static/fonts/avenir-medium.woff") format("woff");
     font-style: normal;
     font-weight: @font-weight-base;
     font-display: swap;
 }
 @font-face {
-    font-family: "Avenir";
+    font-family: 'Avenir';
-    src: url("//cdn.plyr.io/static/fonts/avenir-bold.woff2") format("woff2"),
+    src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
-        url("//cdn.plyr.io/static/fonts/avenir-bold.woff") format("woff");
     font-style: normal;
     font-weight: @font-weight-bold;
     font-display: swap;

gulpfile.js

@@ -4,72 +4,69 @@
 /*global require, __dirname,Buffer*/
 /*jshint -W079 */
 
-var fs          = require("fs"),
+var fs = require('fs'),
-    path        = require("path"),
+    path = require('path'),
-    gulp        = require("gulp"),
+    gulp = require('gulp'),
-    gutil       = require("gulp-util"),
+    gutil = require('gulp-util'),
-    concat      = require("gulp-concat"),
+    concat = require('gulp-concat'),
-    uglify      = require("gulp-uglify"),
+    uglify = require('gulp-uglify'),
-    less        = require("gulp-less"),
+    less = require('gulp-less'),
-    sass        = require("gulp-sass"),
+    sass = require('gulp-sass'),
-    cleanCSS    = require("gulp-clean-css"),
+    cleanCSS = require('gulp-clean-css'),
-    run         = require("run-sequence"),
+    run = require('run-sequence'),
-    prefix      = require("gulp-autoprefixer"),
+    prefix = require('gulp-autoprefixer'),
-    svgstore    = require("gulp-svgstore"),
+    svgstore = require('gulp-svgstore'),
-    svgmin      = require("gulp-svgmin"),
+    svgmin = require('gulp-svgmin'),
-    rename      = require("gulp-rename"),
+    rename = require('gulp-rename'),
-    s3          = require("gulp-s3"),
+    s3 = require('gulp-s3'),
-    replace     = require("gulp-replace"),
+    replace = require('gulp-replace'),
-    open        = require("gulp-open"),
+    open = require('gulp-open'),
-    size        = require("gulp-size"),
+    size = require('gulp-size'),
-    through     = require("through2");
+    through = require('through2');
 
 var root = __dirname,
-paths = {
+    paths = {
-    plyr: {
+        plyr: {
-        // Source paths
+            // Source paths
-        src: {
+            src: {
-            less:       path.join(root, "src/less/**/*"),
+                less: path.join(root, 'src/less/**/*'),
-            scss:       path.join(root, "src/scss/**/*"),
+                scss: path.join(root, 'src/scss/**/*'),
-            js:         path.join(root, "src/js/**/*"),
+                js: path.join(root, 'src/js/**/*'),
-            sprite:     path.join(root, "src/sprite/*.svg")
+                sprite: path.join(root, 'src/sprite/*.svg'),
+            },
+            // Output paths
+            output: path.join(root, 'dist/'),
         },
-        // Output paths
+        demo: {
-        output:         path.join(root, "dist/")
+            // Source paths
-    },
+            src: {
-    demo: {
+                less: path.join(root, 'demo/src/less/**/*'),
-        // Source paths
+                js: path.join(root, 'demo/src/js/**/*'),
-        src: {
+                sprite: path.join(root, 'demo/src/sprite/**/*'),
-            less:       path.join(root, "demo/src/less/**/*"),
+            },
-            js:         path.join(root, "demo/src/js/**/*"),
+            // Output paths
-            sprite:     path.join(root, "demo/src/sprite/**/*")
+            output: path.join(root, 'demo/dist/'),
+            // Demo
+            root: path.join(root, 'demo/'),
         },
-        // Output paths
+        upload: [path.join(root, 'dist/**'), path.join(root, 'demo/dist/**')],
-        output:         path.join(root, "demo/dist/"),
-        // Demo
-        root:           path.join(root, "demo/")
     },
-    upload: [path.join(root, "dist/**"), path.join(root, "demo/dist/**")]
+    // Task arrays
-},
+    tasks = {
-
+        less: [],
-// Task arrays
+        scss: [],
-tasks = {
+        js: [],
-    less:   [],
+        sprite: [],
-    scss:   [],
+    },
-    js:     [],
+    // Fetch bundles from JSON
-    sprite: []
+    bundles = loadJSON(path.join(root, 'bundles.json')),
-},
+    package = loadJSON(path.join(root, 'package.json'));
-
-// Fetch bundles from JSON
-bundles = loadJSON(path.join(root, "bundles.json")),
-package = loadJSON(path.join(root, "package.json"));
 
 // Load json
 function loadJSON(path) {
     try {
         return JSON.parse(fs.readFileSync(path));
-    }
+    } catch (err) {
-    catch(err) {
         return {};
     }
 }
@@ -78,37 +75,39 @@ function loadJSON(path) {
 // http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp
 function createFile(filename, string) {
     var src = require('stream').Readable({
-        objectMode: true
+        objectMode: true,
     });
-    src._read = function () {
+    src._read = function() {
-        this.push(new gutil.File({
+        this.push(
-            cwd: "",
+            new gutil.File({
-            base: "",
+                cwd: '',
-            path: filename,
+                base: '',
-            contents: new Buffer(string),
+                path: filename,
-            // stats also required for some functions
+                contents: new Buffer(string),
-            // https://nodejs.org/api/fs.html#fs_class_fs_stats
+                // stats also required for some functions
-            stat: {
+                // https://nodejs.org/api/fs.html#fs_class_fs_stats
-                size: string.length
+                stat: {
-            }
+                    size: string.length,
-        }));
+                },
+            }),
+        );
         this.push(null);
-    }
+    };
-    return src
+    return src;
 }
 
 var build = {
-    js: function (files, bundle) {
+    js: function(files, bundle) {
         for (var key in files) {
             (function(key) {
-                var name = "js-" + key;
+                var name = 'js-' + key;
                 tasks.js.push(name);
 
-                gulp.task(name, function () {
+                gulp.task(name, function() {
                     return gulp
                         .src(bundles[bundle].js[key])
                         .pipe(concat(key))
-                        .pipe(uglify())
+                        .pipe(uglify().on('error', gutil.log))
                         .pipe(gulp.dest(paths[bundle].output));
                 });
             })(key);
@@ -116,17 +115,17 @@ var build = {
     },
     less: function(files, bundle) {
         for (var key in files) {
-            (function (key) {
+            (function(key) {
-                var name = "less-" + key;
+                var name = 'less-' + key;
                 tasks.less.push(name);
 
-                gulp.task(name, function () {
+                gulp.task(name, function() {
                     return gulp
                         .src(bundles[bundle].less[key])
                         .pipe(less())
-                        .on("error", gutil.log)
+                        .on('error', gutil.log)
                         .pipe(concat(key))
-                        .pipe(prefix(["last 2 versions"], { cascade: true }))
+                        .pipe(prefix(['last 2 versions'], { cascade: true }))
                         .pipe(cleanCSS())
                         .pipe(gulp.dest(paths[bundle].output));
                 });
@@ -135,17 +134,17 @@ var build = {
     },
     scss: function(files, bundle) {
         for (var key in files) {
-            (function (key) {
+            (function(key) {
-                var name = "scss-" + key;
+                var name = 'scss-' + key;
                 tasks.scss.push(name);
 
-                gulp.task(name, function () {
+                gulp.task(name, function() {
                     return gulp
                         .src(bundles[bundle].scss[key])
                         .pipe(sass())
-                        .on("error", gutil.log)
+                        .on('error', gutil.log)
                         .pipe(concat(key))
-                        .pipe(prefix(["last 2 versions"], { cascade: true }))
+                        .pipe(prefix(['last 2 versions'], { cascade: true }))
                         .pipe(cleanCSS())
                         .pipe(gulp.dest(paths[bundle].output));
                 });
@@ -153,48 +152,52 @@ var build = {
         }
     },
     sprite: function(bundle) {
-        var name = "sprite-" + bundle;
+        var name = 'sprite-' + bundle;
         tasks.sprite.push(name);
 
         // Process Icons
-        gulp.task(name, function () {
+        gulp.task(name, function() {
             return gulp
                 .src(paths[bundle].src.sprite)
-                .pipe(svgmin({
+                .pipe(
-                    plugins: [{
+                    svgmin({
-                        removeDesc: true
+                        plugins: [
-                    }]
+                            {
-                }))
+                                removeDesc: true,
+                            },
+                        ],
+                    }),
+                )
                 .pipe(svgstore())
                 .pipe(rename({ basename: bundle }))
                 .pipe(gulp.dest(paths[bundle].output));
         });
-    }
+    },
 };
 
 // Plyr core files
-build.js(bundles.plyr.js, "plyr");
+build.js(bundles.plyr.js, 'plyr');
-build.less(bundles.plyr.less, "plyr");
+build.less(bundles.plyr.less, 'plyr');
-build.scss(bundles.plyr.scss, "plyr");
+build.scss(bundles.plyr.scss, 'plyr');
-build.sprite("plyr");
+build.sprite('plyr');
 
 // Demo files
-build.less(bundles.demo.less, "demo");
+build.less(bundles.demo.less, 'demo');
-build.js(bundles.demo.js, "demo");
+build.js(bundles.demo.js, 'demo');
-build.sprite("demo");
+build.sprite('demo');
 
 // Build all JS
-gulp.task("js", function(){
+gulp.task('js', function() {
     run(tasks.js);
 });
 
 // Build SCSS (for testing, default is LESS)
-gulp.task("scss", function(){
+gulp.task('scss', function() {
     run(tasks.scss);
 });
 
 // Watch for file changes
-gulp.task("watch", function () {
+gulp.task('watch', function() {
     // Plyr core
     gulp.watch(paths.plyr.src.js, tasks.js);
     gulp.watch(paths.plyr.src.less, tasks.less);
@@ -207,131 +210,144 @@ gulp.task("watch", function () {
 });
 
 // Default gulp task
-gulp.task("default", function(){
+gulp.task('default', function() {
-    run(tasks.js, tasks.less, tasks.sprite, "watch");
+    run(tasks.js, tasks.less, tasks.sprite, 'watch');
 });
 
 // Publish a version to CDN and demo
 // --------------------------------------------
 
 // Some options
-var aws = loadJSON(path.join(root, "aws.json")),
+var aws = loadJSON(path.join(root, 'aws.json')),
-version = package.version,
+    version = package.version,
-maxAge  = 31536000, // seconds 1 year
+    maxAge = 31536000, // seconds 1 year
-options = {
+    options = {
-    cdn: {
+        cdn: {
-        headers: {
-            "Cache-Control": "max-age=" + maxAge,
-            "Vary": "Accept-Encoding"
-        }
-    },
-    demo: {
-        headers: {
-            "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
-            "Vary": "Accept-Encoding"
-        }
-    },
-    symlinks: function(version, filename) {
-        return {
             headers: {
-                // http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
+                'Cache-Control': 'max-age=' + maxAge,
-                "x-amz-website-redirect-location": "/" + version + "/" + filename,
+                Vary: 'Accept-Encoding',
-                "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
+            },
-            }
+        },
-        }
+        demo: {
-    }
+            headers: {
-};
+                'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
+                Vary: 'Accept-Encoding',
+            },
+        },
+        symlinks: function(version, filename) {
+            return {
+                headers: {
+                    // http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
+                    'x-amz-website-redirect-location': '/' + version + '/' + filename,
+                    'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
+                },
+            };
+        },
+    };
 
 // If aws is setup
-if("cdn" in aws) {
+if ('cdn' in aws) {
-    var regex       = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
+    var regex = '(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*).(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?',
-    cdnpath         = new RegExp(aws.cdn.domain + "\/" + regex, "gi"),
+        cdnpath = new RegExp(aws.cdn.domain + '/' + regex, 'gi'),
-    semver          = new RegExp("v" + regex, "gi"),
+        semver = new RegExp('v' + regex, 'gi'),
-    localPath       = new RegExp("(\.\.\/)?dist", "gi"),
+        localPath = new RegExp('(../)?dist', 'gi'),
-    versionPath     = "https://" + aws.cdn.domain + "/" + version;
+        versionPath = 'https://' + aws.cdn.domain + '/' + version;
 }
 
 // Publish version to CDN bucket
-gulp.task("cdn", function () {
+gulp.task('cdn', function() {
-    console.log("Uploading " + version + " to " + aws.cdn.domain + "...");
+    console.log('Uploading ' + version + ' to ' + aws.cdn.domain + '...');
 
     // Upload to CDN
-    return gulp.src(paths.upload)
+    return gulp
-        .pipe(size({
+        .src(paths.upload)
-            showFiles: true,
+        .pipe(
-            gzip: true
+            size({
-        }))
+                showFiles: true,
-        .pipe(rename(function (path) {
+                gzip: true,
-            path.dirname = path.dirname.replace(".", version);
+            }),
-        }))
+        )
+        .pipe(
+            rename(function(path) {
+                path.dirname = path.dirname.replace('.', version);
+            }),
+        )
         .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.cdn, options.cdn));
 });
 
 // Publish to demo bucket
-gulp.task("demo", function () {
+gulp.task('demo', function() {
-    console.log("Uploading " + version + " demo to " + aws.demo.domain + "...");
+    console.log('Uploading ' + version + ' demo to ' + aws.demo.domain + '...');
 
     // Replace versioned files in readme.md
-    gulp.src([root + "/readme.md"])
+    gulp
-        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
+        .src([root + '/readme.md'])
+        .pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
         .pipe(gulp.dest(root));
 
     // Replace versioned files in plyr.js
-    gulp.src(path.join(root, "src/js/plyr.js"))
+    gulp
-        .pipe(replace(semver, "v" + version))
+        .src(path.join(root, 'src/js/plyr.js'))
-        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
+        .pipe(replace(semver, 'v' + version))
-        .pipe(gulp.dest(path.join(root, "src/js/")));
+        .pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
+        .pipe(gulp.dest(path.join(root, 'src/js/')));
 
     // Replace local file paths with remote paths in demo HTML
     // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
-    gulp.src([paths.demo.root + "*.html"])
+    gulp
+        .src([paths.demo.root + '*.html'])
         .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.demo, options.demo));
 
     // Upload error.html to cdn (as well as demo site)
-    return gulp.src([paths.demo.root + "error.html"])
+    return gulp
+        .src([paths.demo.root + 'error.html'])
         .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.cdn, options.demo));
 });
 
 // Open the demo site to check it's sweet
-gulp.task("symlinks", function () {
+gulp.task('symlinks', function() {
-    console.log("Updating symlinks...");
+    console.log('Updating symlinks...');
 
-    return gulp.src(paths.upload)
+    return gulp.src(paths.upload).pipe(
-        .pipe(through.obj(function (chunk, enc, callback) {
+        through.obj(function(chunk, enc, callback) {
             if (chunk.stat.isFile()) {
                 // Get the filename
-                var filename = chunk.path.split("/").reverse()[0];
+                var filename = chunk.path.split('/').reverse()[0];
 
                 // Create the 0 byte redirect files to upload
-                createFile(filename, "")
+                createFile(filename, '')
-                    .pipe(rename(function (path) {
+                    .pipe(
-                        path.dirname = path.dirname.replace(".", "latest");
+                        rename(function(path) {
-                    }))
+                            path.dirname = path.dirname.replace('.', 'latest');
+                        }),
+                    )
                     // Upload to S3 with correct headers
                     .pipe(s3(aws.cdn, options.symlinks(version, filename)));
             }
 
             callback(null, chunk);
-        }));
+        }),
+    );
 });
 
 // Open the demo site to check it's sweet
-gulp.task("open", function () {
+gulp.task('open', function() {
-    console.log("Opening " + aws.demo.domain + "...");
+    console.log('Opening ' + aws.demo.domain + '...');
 
     // A file must be specified or gulp will skip the task
     // Doesn't matter which file since we set the URL above
     // Weird, I know...
-    return gulp.src([paths.demo.root + "index.html"])
+    return gulp.src([paths.demo.root + 'index.html']).pipe(
-        .pipe(open("", {
+        open('', {
-            url: "http://" + aws.demo.domain
+            url: 'http://' + aws.demo.domain,
-        }));
+        }),
+    );
 });
 
 // Do everything
-gulp.task("publish", function () {
+gulp.task('publish', function() {
-    run(tasks.js, tasks.less, tasks.sprite, "cdn", "demo", "symlinks");
+    run(tasks.js, tasks.less, tasks.sprite, 'cdn', 'demo', 'symlinks');
 });

package.json

@@ -1,30 +1,38 @@
 {
     "name": "plyr",
-    "version": "2.0.16",
+    "version": "2.0.18",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "http://plyr.io",
     "main": "src/js/plyr.js",
     "dependencies": {},
     "devDependencies": {
         "gulp": "^3.9.1",
-        "gulp-autoprefixer": "^3.1.0",
+        "gulp-autoprefixer": "^4.0.0",
-        "gulp-clean-css": "^2.0.6",
+        "gulp-clean-css": "^3.9.0",
-        "gulp-concat": "^2.3.3",
+        "gulp-concat": "^2.6.1",
-        "gulp-less": "^3.0.5",
+        "gulp-less": "^3.3.2",
         "gulp-open": "^2.0.0",
-        "gulp-rename": "^1.2.0",
+        "gulp-rename": "^1.2.2",
-        "gulp-replace": "^0.5.3",
+        "gulp-replace": "^0.6.1",
-        "gulp-s3": "^0.3.0",
+        "gulp-s3": "^0.11.0",
-        "gulp-sass": "^2.3.1",
+        "gulp-sass": "^3.1.0",
         "gulp-size": "^2.1.0",
-        "gulp-svgmin": "^1.2.2",
+        "gulp-svgmin": "^1.2.4",
-        "gulp-svgstore": "^5.0.5",
+        "gulp-svgstore": "^6.1.0",
-        "gulp-uglify": "^1.5.3",
+        "gulp-uglify": "^3.0.0",
-        "gulp-util": "^3.0.7",
+        "gulp-util": "^3.0.8",
-        "run-sequence": "^1.1.5",
+        "run-sequence": "^2.2.0",
-        "through2": "^2.0.1"
+        "through2": "^2.0.3"
     },
-    "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
+    "keywords": [
+        "HTML5 Video",
+        "HTML5 Audio",
+        "Media Player",
+        "DASH",
+        "Shaka",
+        "WordPress",
+        "HLS"
+    ],
     "repository": {
         "type": "git",
         "url": "git://github.com/sampotts/plyr.git"

readme.md

@@ -63,6 +63,12 @@ Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))
 ### [Kirby](https://github.com/dpschen/kirby-plyrtag)
 Created and maintained by Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))
 
+### [React](https://github.com/xDae/react-plyr)
+Created and maintained by Jose Miguel Bejarano ([@xDae](https://github.com/xDae))
+
+### [Vue](https://github.com/redxtech/vue-plyr)
+Created and maintained by Gabe Dunn ([@redxtech](https://github.com/redxtech))
+
 ## Using package managers
 You can grab the source using one of the following package managers.
 
@@ -137,7 +143,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/2.0.16/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.18/plyr.js"></script>
 ```
 
 ### CSS
@@ -150,11 +156,11 @@ 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/2.0.16/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.18/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/2.0.16/plyr.svg`.
+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/2.0.18/plyr.svg`.
 
 ## Advanced
 
@@ -229,7 +235,7 @@ Some touch browsers (particularly Mobile Safari on iOS) seem to have issues with
 Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements:
 
 ```html
-<video data-plyr='{ title: "testing" }'></video>
+<video data-plyr='{ "title": "testing", "volume": 10 }'></video>
 ```
 
 Note the single quotes encapsulating the JSON and double quotes on the object keys.
@@ -302,7 +308,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
       <td><code>autoplay</code></td>
       <td>Boolean</td>
       <td><code>false</code></td>
-      <td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation).</td>
+      <td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on <a href="https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/">iOS and macOS</a> (an Apple limitation).</td>
     </tr>
     <tr>
       <td><code>seekTime</code></td>
@@ -1024,7 +1030,7 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http
 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:
 
 ```javascript
-enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
+enabled: !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
 ```
 If a User Agent is disabled but supports `<video>` and `<audio>` natively, it will use the native player.
 

src/less/plyr.less

@@ -3,8 +3,8 @@
 // https://github.com/selz/plyr
 // ==========================================================================
 
-@import "variables";
+@import 'variables';
-@import "mixins";
+@import 'mixins';
 
 // Animation
 // ---------------------------------------
@@ -61,15 +61,15 @@
 
     // Range inputs
     // Specificity is for bootstrap compatibility
-    input[type="range"] {
+    input[type='range'] {
         display: block;
         height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
         width: 100%;
         margin: 0;
         padding: 0;
-        vertical-align: middle;
 
-        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
@@ -142,12 +142,12 @@
 }
 
 // Video range inputs
-.plyr--video input[type="range"].tab-focus:focus {
+.plyr--video input[type='range'].tab-focus:focus {
     outline: 1px dotted fade(@plyr-video-control-color, 50%);
 }
 
 // Audio range inputs
-.plyr--audio input[type="range"].tab-focus:focus {
+.plyr--audio input[type='range'].tab-focus:focus {
     outline: 1px dotted fade(@plyr-audio-control-color, 50%);
 }
 
@@ -273,6 +273,11 @@
     align-items: center;
     line-height: 1;
     text-align: center;
+    pointer-events: none;
+
+    & > * {
+        pointer-events: all;
+    }
 
     // Spacing
     > button,
@@ -287,7 +292,7 @@
     .plyr__volume {
         margin-left: (@plyr-control-spacing / 2);
     }
-    [data-plyr="pause"] {
+    [data-plyr='pause'] {
         margin-left: 0;
     }
 
@@ -423,11 +428,11 @@
 }
 
 // States
-.plyr__controls [data-plyr="pause"],
+.plyr__controls [data-plyr='pause'],
-.plyr--playing .plyr__controls [data-plyr="play"] {
+.plyr--playing .plyr__controls [data-plyr='play'] {
     display: none;
 }
-.plyr--playing .plyr__controls [data-plyr="pause"] {
+.plyr--playing .plyr__controls [data-plyr='pause'] {
     display: inline-block;
 }
 
@@ -443,12 +448,12 @@
 }
 
 // Some options are hidden by default
-.plyr [data-plyr="captions"],
+.plyr [data-plyr='captions'],
-.plyr [data-plyr="fullscreen"] {
+.plyr [data-plyr='fullscreen'] {
     display: none;
 }
-.plyr--captions-enabled [data-plyr="captions"],
+.plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
+.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
     display: inline-block;
 }
 
@@ -476,7 +481,7 @@
 
     &::before {
         // Arrows
-        content: "";
+        content: '';
         position: absolute;
         width: 0;
         height: 0;
@@ -542,7 +547,7 @@
     display: none;
     flex: 1;
 
-    input[type="range"] {
+    input[type='range'] {
         position: relative;
         z-index: 2;
 
@@ -577,7 +582,8 @@
     margin: -(@plyr-range-track-height / 2) 0 0;
     padding: 0;
     vertical-align: top;
-    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
     border: none;
     border-radius: 100px;
 
@@ -690,7 +696,7 @@
 
     // Add a slash in before
     &::before {
-        content: "\2044";
+        content: '\2044';
         margin-right: @plyr-control-spacing;
     }
 }
@@ -704,7 +710,7 @@
     flex: 1;
     position: relative;
 
-    input[type="range"] {
+    input[type='range'] {
         position: relative;
         z-index: 2;
     }
@@ -721,7 +727,7 @@
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
 .plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr="mute"] {
+.plyr--is-ios [data-plyr='mute'] {
     display: none !important;
 }
 

src/scss/plyr.scss

@@ -272,7 +272,12 @@
     align-items: center;
     line-height: 1;
     text-align: center;
-
+    pointer-events: none;
+    
+    & > * {
+        pointer-events: all;
+    }
+    
     // Spacing
     > button,
     .plyr__progress,