v3.0.2

# Conflicts:
#	readme.md

.eslintrc.json

@@ -8,6 +8,7 @@
     "globals": { "Plyr": false, "jQuery": false },
     "rules": {
         "no-const-assign": 1,
+        "no-shadow": 0,
         "no-this-before-super": 1,
         "no-undef": 1,
         "no-unreachable": 1,

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
     "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"],
-    "extends": ["stylelint-config-sass-guidelines", "stylelint-config-prettier"],
+    "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"],
     "rules": {
         "selector-class-pattern": null,
         "selector-no-qualifying-type": [

bundles.json

@@ -4,7 +4,8 @@
             "plyr.css": "src/sass/plyr.scss"
         },
         "js": {
-            "plyr.js": "src/js/plyr.js"
+            "plyr.js": "src/js/plyr.js",
+            "plyr.polyfilled.js": "src/js/plyr.polyfilled.js"
         }
     },
     "demo": {

changelog.md

@@ -1,3 +1,11 @@
+# v3.0.2
+
+*   Fix for Safari not firing error events when trying to load blocked scripts
+
+# v3.0.1
+
+*   Fix for trying to accessing local storage when it's blocked
+
 # v3.0.0
 
 This is a massive release. A _mostly_ complete rewrite in ES6. What started out as a few changes quickly snowballed. There's many breaking changes so be careful upgrading.
@@ -67,7 +75,7 @@ You gotta break eggs to make an omelette. Sadly, there's quite a few breaking ch
 
 ### Polyfilling
 
-Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [polyfill.io](https://polyfill.io).
+Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [polyfill.io](https://polyfill.io). Alternatively, you can use the prebuilt polyfilled build but bear in mind this is 20kb larger. I'd suggest working our your own polyfill strategy.
 
 ## v2.0.18
 

demo/error.html

@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="dist/error.css">
 
     <!-- Preload -->
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
     <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>

demo/index.html

@@ -30,7 +30,6 @@
     <link rel="stylesheet" href="dist/demo.css">
 
     <!-- Preload -->
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
     <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>
@@ -67,7 +66,7 @@
             </p>
 
             <p>Premium video monitization from
-                <a href="https://vi.ai/publisher-video-monetization/" target="_blank" class="no-border">
+                <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>
@@ -164,25 +163,25 @@
        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>
         </svg>
         <p>If you think Plyr's good,
-            <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
+            <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"
                 target="_blank" data-shr-network="twitter">tweet it</a>
         </p>
     </aside>
 
     <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent" crossorigin="anonymous"></script>
 
     <!-- Plyr core script -->
-    <script src="../dist/plyr.js"></script>
+    <script src="../dist/plyr.js" crossorigin="anonymous"></script>
 
     <!-- Sharing libary (https://shr.one) -->
-    <script src="https://cdn.shr.one/1.0.1/shr.js"></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) -->
-    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
 
     <!-- Docs script -->
-    <script src="dist/demo.js"></script>
+    <script src="dist/demo.js" crossorigin="anonymous"></script>
 </body>
 
 </html>

demo/src/js/demo.js

@@ -4,7 +4,19 @@
 // Please see readme.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
+import Raven from 'raven-js';
+
+(() => {
+    const isLive = window.location.host === 'plyr.io';
+
+    // Raven / Sentry
+    // For demo site (https://plyr.io) only
+    if (isLive) {
+        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
+    }
+
     document.addEventListener('DOMContentLoaded', () => {
+        Raven.context(() => {
             if (window.shr) {
                 window.shr.setup({
                     count: {
@@ -29,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
                 // Delay the adding of classname until the focus has changed
                 // This event fires before the focusin event
-        window.setTimeout(() => {
+                setTimeout(() => {
                     document.activeElement.classList.add(tabClassName);
                 }, 0);
             });
@@ -38,7 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const player = new Plyr('#player', {
                 debug: true,
                 title: 'View From A Blue Moon',
-        // iconUrl: '../dist/plyr.svg',
+                iconUrl: '../dist/plyr.svg',
                 keyboard: {
                     global: true,
                 },
@@ -53,10 +65,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 },
                 ads: {
                     enabled: true,
+                    publisherId: '918848828995742',
                 },
             });
 
-    // Expose for testing
+            // Expose for tinkering in the console
             window.player = player;
 
             // Setup type toggle
@@ -220,11 +233,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
             }
         });
+    });
 
     // Google analytics
     // For demo site (https://plyr.io) only
     /* eslint-disable */
-if (window.location.host === 'plyr.io') {
+    if (isLive) {
         (function(i, s, o, g, r, a, m) {
             i.GoogleAnalyticsObject = r;
             i[r] =
@@ -238,8 +252,9 @@ if (window.location.host === 'plyr.io') {
             a.async = 1;
             a.src = g;
             m.parentNode.insertBefore(a, m);
-    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
         window.ga('create', 'UA-40881672-11', 'auto');
         window.ga('send', 'pageview');
     }
     /* eslint-enable */
+})();

demo/src/sass/components/buttons.scss

@@ -6,11 +6,11 @@
 .button,
 .button__count {
     align-items: center;
-    background: #fff;
+    background: $color-button-background;
     border: 0;
     border-radius: $border-radius-base;
     box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $gray;
+    color: $color-button-text;
     display: inline-flex;
     padding: ($spacing-base * 0.75);
     position: relative;
@@ -71,7 +71,7 @@
     &::before {
         border: $arrow-size solid transparent;
         border-left-width: 0;
-        border-right-color: #fff;
+        border-right-color: $color-button-background;
         content: '';
         height: 0;
         position: absolute;

demo/src/sass/layout/core.scss

@@ -28,6 +28,7 @@ body {
 
 main {
     margin: auto;
+    padding-bottom: 1px; // Collapsing margins
     text-align: center;
 }
 

demo/src/sass/settings/colors.scss

@@ -24,5 +24,9 @@ $color-vimeo: #19b7ed;
 $color-link: #fff;
 $color-background: $color-brand-primary;
 
+// Buttons
+$color-button-background: #fff;
+$color-button-text: $gray;
+
 // Focus
 $tab-focus-default-color: #fff;

demo/src/sass/type/headings.scss

@@ -4,7 +4,7 @@
 
 h1 {
     @include font-size($font-size-h1);
-    font-weight: $font-weight-light;
+    font-weight: $font-weight-bold;
     letter-spacing: $letter-spacing-headings;
     margin: 0 0 ($spacing-base / 2);
 }

gulpfile.js

@@ -9,6 +9,7 @@ const path = require('path');
 const gulp = require('gulp');
 const gutil = require('gulp-util');
 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');
@@ -24,8 +25,7 @@ const size = require('gulp-size');
 const rollup = require('gulp-better-rollup');
 const babel = require('rollup-plugin-babel');
 const sourcemaps = require('gulp-sourcemaps');
-const uglify = require('rollup-plugin-uglify');
+const uglify = require('gulp-uglify-es').default;
-const { minify } = require('uglify-es');
 const commonjs = require('rollup-plugin-commonjs');
 const resolve = require('rollup-plugin-node-resolve');
 
@@ -40,6 +40,8 @@ try {
     // Do nothing
 }
 
+const minSuffix = '.min';
+
 // Paths
 const root = __dirname;
 const paths = {
@@ -68,8 +70,11 @@ const paths = {
         root: path.join(root, 'demo/'),
     },
     upload: [
-        path.join(root, 'dist/**'),
+        path.join(root, `dist/*${minSuffix}.*`),
-        path.join(root, 'demo/dist/**'),
+        path.join(root, 'dist/*.css'),
+        path.join(root, 'dist/*.svg'),
+        path.join(root, `demo/dist/*${minSuffix}.*`),
+        path.join(root, 'demo/dist/*.css'),
     ],
 };
 
@@ -122,6 +127,7 @@ const build = {
         Object.keys(files).forEach(key => {
             const name = `js:${key}`;
             tasks.js.push(name);
+            const { output } = paths[bundle];
 
             gulp.task(name, () =>
                 gulp
@@ -135,15 +141,19 @@ const build = {
                                     resolve(),
                                     commonjs(),
                                     babel(babelrc),
-                                    uglify({}, minify),
                                 ],
                             },
                             options,
                         ),
                     )
-                    .pipe(size(sizeOptions))
                     .pipe(sourcemaps.write(''))
-                    .pipe(gulp.dest(paths[bundle].output)),
+                    .pipe(gulp.dest(output))
+                    .pipe(filter('**/*.js'))
+                    .pipe(uglify())
+                    .pipe(size(sizeOptions))
+                    .pipe(rename({ suffix: minSuffix }))
+                    .pipe(sourcemaps.write(''))
+                    .pipe(gulp.dest(output)),
             );
         });
     },
@@ -266,6 +276,23 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
     const semver = new RegExp(`v${regex}`, 'gi');
     const localPath = new RegExp('(../)?dist', 'gi');
     const versionPath = `https://${aws.cdn.domain}/${version}`;
+    const cdnpath = new RegExp(`${aws.cdn.domain}/${regex}/`, 'gi');
+
+    gulp.task('version', () => {
+        console.log(`Updating versions to '${version}'...`);
+
+        // Replace versioned URLs in source
+        const files = [
+            'plyr.js',
+            'plyr.polyfilled.js',
+            'defaults.js',
+        ];
+        gulp
+            .src(files.map(file => path.join(root, `src/js/${file}`)))
+            .pipe(replace(semver, `v${version}`))
+            .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
+            .pipe(gulp.dest(path.join(root, 'src/js/')));
+    });
 
     // Publish version to CDN bucket
     gulp.task('cdn', () => {
@@ -277,22 +304,26 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
         console.log(`Uploading '${version}' to ${aws.cdn.domain}...`);
 
         // Upload to CDN
-        return gulp
+        return (
+            gulp
                 .src(paths.upload)
+                .pipe(
+                    rename(p => {
+                        p.basename = p.basename.replace(minSuffix, ''); // eslint-disable-line
+                        p.dirname = p.dirname.replace('.', version); // eslint-disable-line
+                    }),
+                )
+                // Remove min suffix from source map URL
+                .pipe(replace(/sourceMappingURL=([\w-?.]+)/, (match, p1) => `sourceMappingURL=${p1.replace(minSuffix, '')}`))
                 .pipe(
                     size({
                         showFiles: true,
                         gzip: true,
                     }),
                 )
-            .pipe(
-                rename(p => {
-                    // eslint-disable-next-line
-                    p.dirname = p.dirname.replace('.', version);
-                }),
-            )
                 .pipe(replace(localPath, versionPath))
-            .pipe(s3(aws.cdn, options.cdn));
+                .pipe(s3(aws.cdn, options.cdn))
+        );
     });
 
     // Publish to demo bucket
@@ -304,25 +335,12 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
 
         console.log(`Uploading '${version}' demo to ${aws.demo.domain}...`);
 
-        const cdnpath = new RegExp(`${aws.cdn.domain}/${regex}/`, 'gi');
-
         // Replace versioned files in readme.md
         gulp
             .src([`${root}/readme.md`])
             .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
             .pipe(gulp.dest(root));
 
-        // Replace versioned URLs in source
-        const files = [
-            'plyr.js',
-            'defaults.js',
-        ];
-        gulp
-            .src(files.map(file => path.join(root, `src/js/${file}`)))
-            .pipe(replace(semver, `v${version}`))
-            .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"
         const index = `${paths.demo.root}index.html`;
@@ -389,6 +407,6 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
 
     // Do everything
     gulp.task('publish', () => {
-        run(tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'demo');
+        run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'demo');
     });
 }

package.json

@@ -1,28 +1,30 @@
 {
     "name": "plyr",
-    "version": "3.0.0-beta.12",
+    "version": "3.0.2",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
+    "browser": "./dist/plyr.min.js",
     "sass": "./src/sass/plyr.scss",
     "style": "./dist/plyr.css",
     "devDependencies": {
         "babel-core": "^6.26.0",
-        "babel-eslint": "^8.2.1",
+        "babel-eslint": "^8.2.2",
         "babel-plugin-external-helpers": "^6.22.0",
         "babel-preset-env": "^1.6.1",
         "del": "^3.0.0",
-        "eslint": "^4.17.0",
+        "eslint": "^4.19.0",
         "eslint-config-airbnb-base": "^12.1.0",
         "eslint-config-prettier": "^2.9.0",
-        "eslint-plugin-import": "^2.8.0",
+        "eslint-plugin-import": "^2.9.0",
-        "git-branch": "^1.0.0",
+        "git-branch": "^2.0.1",
         "gulp": "^3.9.1",
-        "gulp-autoprefixer": "^4.1.0",
+        "gulp-autoprefixer": "^5.0.0",
         "gulp-better-rollup": "^3.0.0",
-        "gulp-clean-css": "^3.9.2",
+        "gulp-clean-css": "^3.9.3",
         "gulp-concat": "^2.6.1",
-        "gulp-open": "^2.1.0",
+        "gulp-filter": "^5.1.0",
+        "gulp-open": "^3.0.0",
         "gulp-rename": "^1.2.2",
         "gulp-replace": "^0.6.1",
         "gulp-s3": "^0.11.0",
@@ -31,20 +33,21 @@
         "gulp-sourcemaps": "^2.6.4",
         "gulp-svgmin": "^1.2.4",
         "gulp-svgstore": "^6.1.1",
+        "gulp-uglify-es": "^1.0.1",
         "gulp-util": "^3.0.8",
+        "prettier-eslint": "^8.8.1",
+        "prettier-stylelint": "^0.4.2",
         "rollup-plugin-babel": "^3.0.3",
-        "rollup-plugin-commonjs": "^8.3.0",
+        "rollup-plugin-commonjs": "^8.4.1",
-        "rollup-plugin-node-resolve": "^3.0.2",
+        "rollup-plugin-node-resolve": "^3.2.0",
-        "rollup-plugin-uglify": "^3.0.0",
         "run-sequence": "^2.2.1",
-        "stylelint": "^8.4.0",
+        "stylelint": "^9.1.3",
-        "stylelint-config-prettier": "^2.0.0",
+        "stylelint-config-prettier": "^3.0.4",
-        "stylelint-config-sass-guidelines": "^4.1.0",
+        "stylelint-config-recommended": "^2.1.0",
-        "stylelint-config-standard": "^18.0.0",
+        "stylelint-config-sass-guidelines": "^5.0.0",
-        "stylelint-order": "^0.8.0",
+        "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^2.3.0",
+        "stylelint-scss": "^2.5.0",
-        "stylelint-selector-bem-pattern": "^2.0.0",
+        "stylelint-selector-bem-pattern": "^2.0.0"
-        "uglify-es": "^3.3.9"
     },
     "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
     "repository": {
@@ -62,5 +65,10 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Sam Potts <sam@potts.es>",
-    "dependencies": {}
+    "dependencies": {
+        "babel-polyfill": "^6.26.0",
+        "custom-event-polyfill": "^0.3.0",
+        "loadjs": "^3.5.2",
+        "raven-js": "^3.23.3"
+    }
 }

readme.md

@@ -1,25 +1,21 @@
----
-Beware: This version is currently in beta and not production-ready
----
-
 # Plyr
 
 A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
 
 [Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-slack)
 
-[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png)](https://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png?v=3)](https://plyr.io)
 
 ## Features
 
 *   **Accessible** - full support for VTT captions and screen readers
-* **Lightweight** - just 18KB minified and gzipped
 *   **[Customisable](#html)** - make the player look how you want with the markup you want
 *   **Semantic** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
     `<span>` or `<a href="#">` button hacks
 *   **Responsive** - works with any screen size
 *   **HTML Video & Audio** - support for both formats
 *   **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
+*   **[Monetization](#ads)** - make money from your videos
 *   **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
 *   **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
 *   **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
@@ -35,40 +31,25 @@ Oh and yes, it works with Bootstrap.
 
 Check out the [changelog](changelog.md) to see what's new with Plyr.
 
-## CMS plugins
+## Plugins & Components
 
-### [WordPress](https://wordpress.org/plugins/plyr/)
+Some awesome folks have made plugins for CMSs and Components for JavaScript frameworks:
 
-Created and maintained by Ryan Anthony Drake ([@iamryandrake](https://github.com/iamryandrake))
+| Type      | Maintainer                                                            | Link                                                                                         |
-
+| --------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-### [Neos](https://packagist.org/packages/jonnitto/plyr)
+| WordPress | Ryan Anthony Drake ([@iamryandrake](https://github.com/iamryandrake)) | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/)                   |
-
+| React     | Jose Miguel Bejarano ([@xDae](https://github.com/xDae))               | [https://github.com/xDae/react-plyr](https://github.com/xDae/react-plyr)                     |
-Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))
+| Vue       | Gabe Dunn ([@redxtech](https://github.com/redxtech))                  | [https://github.com/redxtech/vue-plyr](https://github.com/redxtech/vue-plyr)                 |
-
+| Neos      | Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))                | [https://packagist.org/packages/jonnitto/plyr](https://packagist.org/packages/jonnitto/plyr) |
-### [Kirby](https://github.com/dpschen/kirby-plyrtag)
+| Kirby     | Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))        | [https://github.com/dpschen/kirby-plyrtag](https://github.com/dpschen/kirby-plyrtag)         |
-
-Created and maintained by Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))
-
-## Using package managers
-
-You can grab the source using one of the following package managers.
-
-### npm
-
-```
-npm install plyr
-```
-
-[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)
 
 ## Quick setup
 
-Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp).
+Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp). You can grab all of the source with [NPM](https://www.npmjs.com/package/plyr) using `npm install plyr`.
 
 ### HTML
 
-Plyr extends upon the standard HTML5 markup so that's all you need for those types. More info on advanced HTML markup can be found under
+Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.
-[initialising](#initialising).
 
 #### HTML5 Video
 
@@ -131,18 +112,19 @@ Or the `<div>` non progressively enhanced method:
 
 ### JavaScript
 
-Include the `plyr.js` script before the closing `</body>` tag and then call `plyr.setup()`. More info on `setup()` can be found under
+Include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.
-[initialising](#initialising).
 
 ```html
 <script src="path/to/plyr.js"></script>
 <script>const player = new Plyr('#player');</script>
 ```
 
+See [initialising](#initialising) for more information on advanced setups.
+
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.0.0-beta.12/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.2/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -158,13 +140,23 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.12/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.2/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.12/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.2/plyr.svg`.
+
+## Ads
+
+Plyr has partnered up with [vi.ai](http://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
+
+*   [Sign up for a vi.ai account](http://vi.ai/publisher-video-monetization/?aid=plyrio)
+*   Grab your publisher ID from the code snippet
+*   Enable ads in the [config options](#options) and enter your publisher ID
+
+Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
 
 ## Advanced
 
@@ -210,10 +202,11 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
 You can specify a range of arguments for the constructor to use:
 
 *   A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
-* A [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
+*   A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
-* A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) or Array of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement) -
+*   A [`NodeList]`(https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
-  the first element will be used
+*   A [jQuery](https://jquery.com) object
-* A [jQuery](https://jquery.com) object - if multiple are passed, the first element will be used
+
+_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup.
 
 Here's some examples
 
@@ -237,6 +230,12 @@ const player = new Plyr(document.querySelectorAll('.js-player'));
 
 The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds
 
+##### Setting up multiple players
+
+```javascript
+const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
+```
+
 The second argument for the constructor is the [#options](options) object:
 
 ```javascript
@@ -258,10 +257,10 @@ Options can be passed as an object to the constructor as above or as JSON in `da
 Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.
 
 | Option               | Type                       | Default                                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                            |
-| -------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `enabled`            | Boolean                    | `true`                                                                                                                         | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.                                                                                                                                                                                                          |
 | `debug`              | Boolean                    | `false`                                                                                                                        | Display debugging information in the console                                                                                                                                                                                                                                                                                                                           |
-| `controls`           | Function or Array | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return a string of HTML for the controls. Three arguments will be passed to your function; id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured. |
+| `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured. |
 | `settings`           | Array                      | `['captions', 'quality', 'speed', 'loop']`                                                                                     | If you're using the default controls are used then you can specify which settings to show in the menu                                                                                                                                                                                                                                                                  |
 | `i18n`               | Object                     | See [defaults.js](/src/js/defaults.js)                                                                                         | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                        |
 | `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                  |
@@ -285,12 +284,13 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `toggleInvert`       | Boolean                    | `true`                                                                                                                         | Allow users to click to toggle the above.                                                                                                                                                                                                                                                                                                                              |
 | `listeners`          | Object                     | `null`                                                                                                                         | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire.                                                                                                                             |
 | `captions`           | Object                     | `{ active: false, language: window.navigator.language.split('-')[0] }`                                                         | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available).                                                                                                                                                                                                                                               |
-| `fullscreen`         | Object            | `{ enabled: true, fallback: true }`                                                                                            | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution.                                                                                                                                                                                                                                   |
+| `fullscreen`         | Object                     | `{ enabled: true, fallback: true, iosNative: false }`                                                                          | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution. `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls)                                                                                                                                                         |
 | `ratio`              | String                     | `16:9`                                                                                                                         | The aspect ratio you want to use for embedded players.                                                                                                                                                                                                                                                                                                                 |
 | `storage`            | Object                     | `{ enabled: true, key: 'plyr' }`                                                                                               | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use.                                                                                                                                                                                                                                                                              |
 | `speed`              | Object                     | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }`                                                                 | `selected`: The default speed for playback. `options`: Options to display in the menu. Most browsers will refuse to play slower than 0.5.                                                                                                                                                                                                                              |
 | `quality`            | Object                     | `{ default: 'default', options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'] }`      | Currently only supported by YouTube. `default` is the default quality level, determined by YouTube. `options` are the options to display.                                                                                                                                                                                                                              |
 | `loop`               | Object                     | `{ active: false }`                                                                                                            | `active`: Whether to loop the current video. If the `loop` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true This is an object to support future functionality.                                                                                                                                                         |
+| `ads`                | Object                     | `{ enabled: false, publisherId: '' }`                                                                                          | `enabled`: Whether to enable vi.ai ads. `publisherId`: Your unique vi.ai publisher ID.                                                                                                                                                                                                                                                                                 |
 
 1.  Vimeo only
 
@@ -318,14 +318,15 @@ element.addEventListener('ready', event => {
 
 ### Methods
 
-Methods are not chainable. An example use of a method:
+Example method use:
 
 ```javascript
-player.play();
+player.play(); // Start playback
+player.fullscreen.enter(); // Enter fullscreen
 ```
 
 | Method                   | Parameters       | Description                                                                                                |
-| ------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
+| ------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------- |
 | `play()`&sup1;           | -                | Start playback.                                                                                            |
 | `pause()`                | -                | Pause playback.                                                                                            |
 | `togglePlay(toggle)`     | Boolean          | Toggle playback, if no parameters are passed, it will toggle based on current status.                      |
@@ -336,7 +337,9 @@ player.play();
 | `increaseVolume(step)`   | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
 | `decreaseVolume(step)`   | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
 | `toggleCaptions(toggle)` | Boolean          | Toggle captions display. If no parameter is passed, it will toggle based on current status.                |
-| `toggleFullscreen(event)` | Event            | Toggle fullscreen. Fullscreen can only be initiated by a user event. Exit is possible without user input.  |
+| `fullscreen.enter()`     | -                | Enter fullscreen. If fullscreen is not supported, a fallback "full window/viewport" is used instead.       |
+| `fullscreen.exit()`      | -                | Exit fullscreen.                                                                                           |
+| `fullscreen.toggle()`    | -                | Toggle fullscreen.                                                                                         |
 | `airplay()`              | -                | Trigger the airplay dialog on supported devices.                                                           |
 | `toggleControls(toggle)` | Boolean          | Toggle the controls based on the specified boolean.                                                        |
 | `on(event, function)`    | String, Function | Add an event listener for the specified event.                                                             |
@@ -348,39 +351,45 @@ player.play();
 
 ### Getters and Setters
 
-An example setter:
+Example setters:
 
 ```javascript
-player.volume = 0.5;
+player.volume = 0.5; // Sets volume at 50%
+player.currentTime = 10; // Seeks to 10 seconds
 ```
 
-An example getter:
+Example getters:
 
 ```javascript
-player.volume; // returns 0.5;
+player.volume; // 0.5;
+player.currentTime; // 10
+player.fullscreen.active; // false;
 ```
 
 | Property             | Getter | Setter | Description                                                                                                                                                                          |
-| --------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| -------------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `isHTML5`       | ✔      | -      | Returns a boolean indicating if the current player is HTML5.                                                                                                                         |
+| `isHTML5`            | ✓      | -      | Returns a boolean indicating if the current player is HTML5.                                                                                                                         |
-| `isEmbed`       | ✔      | -      | Returns a boolean indicating if the current player is an embedded player.                                                                                                            |
+| `isEmbed`            | ✓      | -      | Returns a boolean indicating if the current player is an embedded player.                                                                                                            |
-| `paused`        | ✔      | -      | Returns a boolean indicating if the current player is paused.                                                                                                                        |
+| `paused`             | ✓      | -      | Returns a boolean indicating if the current player is paused.                                                                                                                        |
-| `playing`       | ✔      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                       |
+| `playing`            | ✓      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                       |
-| `ended`         | ✔      | -      | Returns a boolean indicating if the current player has finished playback.                                                                                                            |
+| `ended`              | ✓      | -      | Returns a boolean indicating if the current player has finished playback.                                                                                                            |
-| `currentTime`   | ✔      | ✔      | Gets or sets the currentTime for the player. The setter accepts a float in seconds.                                                                                                  |
+| `buffered`           | ✓      | -      | Returns a float between 0 and 1 indicating how much of the media is buffered                                                                                                         |
-| `seeking`       | ✔      | -      | Returns a boolean indicating if the current player is seeking.                                                                                                                       |
+| `currentTime`        | ✓      | ✓      | Gets or sets the currentTime for the player. The setter accepts a float in seconds.                                                                                                  |
-| `duration`      | ✔      | -      | Returns the duration for the current media.                                                                                                                                          |
+| `seeking`            | ✓      | -      | Returns a boolean indicating if the current player is seeking.                                                                                                                       |
-| `volume`        | ✔      | ✔      | Gets or sets the volume for the player. The setter accepts a float between 0 and 1.                                                                                                  |
+| `duration`           | ✓      | -      | Returns the duration for the current media.                                                                                                                                          |
-| `muted`         | ✔      | ✔      | Gets or sets the muted state of the player. The setter accepts a boolean.                                                                                                            |
+| `volume`             | ✓      | ✓      | Gets or sets the volume for the player. The setter accepts a float between 0 and 1.                                                                                                  |
-| `hasAudio`      | ✔      | -      | Returns a boolean indicating if the current media has an audio track.                                                                                                                |
+| `muted`              | ✓      | ✓      | Gets or sets the muted state of the player. The setter accepts a boolean.                                                                                                            |
-| `speed`         | ✔      | ✔      | Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5.                                      |
+| `hasAudio`           | ✓      | -      | Returns a boolean indicating if the current media has an audio track.                                                                                                                |
-| `quality`&sup1; | ✔      | ✔      | Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.                                                                       |
+| `speed`              | ✓      | ✓      | Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5.                                      |
-| `loop`          | ✔      | ✔      | Gets or sets the current loop state of the player. The setter accepts a boolean.                                                                                                     |
+| `quality`&sup1;      | ✓      | ✓      | Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.                                                                       |
-| `source`        | ✔      | ✔      | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#source-setter) below for examples.                                                |
+| `loop`               | ✓      | ✓      | Gets or sets the current loop state of the player. The setter accepts a boolean.                                                                                                     |
-| `poster`&sup2;  | ✔      | ✔      | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image.                                                             |
+| `source`             | ✓      | ✓      | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#source-setter) below for examples.                                                |
-| `autoplay`      | ✔      | ✔      | Gets or sets the autoplay state of the player. The setter accepts a boolean.                                                                                                         |
+| `poster`&sup2;       | ✓      | ✓      | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image.                                                             |
-| `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. |
+| `autoplay`           | ✓      | ✓      | Gets or sets the autoplay state of the player. The setter accepts a boolean.                                                                                                         |
-| `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+.                     |
+| `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. |
+| `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+.                     |
 
 1.  YouTube only. HTML5 will follow.
 2.  HTML5 only
@@ -596,14 +605,14 @@ Plyr supports the last 2 versions of most _modern_ browsers.
 
 | Browser       | Supported |
 | ------------- | --------- |
-| Safari        | ✔         |
+| Safari        | ✓         |
-| Mobile Safari | ✔&sup1;   |
+| Mobile Safari | ✓&sup1;   |
-| Firefox       | ✔         |
+| Firefox       | ✓         |
-| Chrome        | ✔         |
+| Chrome        | ✓         |
-| Opera         | ✔         |
+| Opera         | ✓         |
-| Edge          | ✔         |
+| Edge          | ✓         |
-| IE11          | ✔         |
+| IE11          | ✓         |
-| IE10          | ✔&sup2;   |
+| IE10          | ✓&sup2;   |
 
 1.  Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide.
 2.  Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options))
@@ -694,7 +703,7 @@ Credit to the PayPal HTML5 Video player from which Plyr's caption functionality
 
 ## Thanks
 
-[![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/)
+[![Fastly](https://cdn.plyr.io/static/demo/fastly-logo.png)](https://www.fastly.com/)
 
 Massive thanks to [Fastly](https://www.fastly.com/) for providing the CDN services.
 

src/js/captions.js

@@ -1,5 +1,6 @@
 // ==========================================================================
 // Plyr Captions
+// TODO: Create as class
 // ==========================================================================
 
 import support from './support';
@@ -39,13 +40,12 @@ const captions = {
         // Only Vimeo and HTML5 video supported at this point
         if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
             // Clear menu and hide
-            if (this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
+            if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
                 controls.setCaptionsMenu.call(this);
             }
 
             return;
         }
-
         // Inject the container
         if (!utils.is.element(this.elements.captions)) {
             this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -56,11 +56,42 @@ const captions = {
         // Set the class hook
         utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
 
+        // Get tracks
+        const tracks = captions.getTracks.call(this);
+
         // If no caption file exists, hide container for caption text
-        if (utils.is.empty(captions.getTracks.call(this))) {
+        if (utils.is.empty(tracks)) {
             return;
         }
 
+        // Get browser info
+        const browser = utils.getBrowser();
+
+        // Fix IE captions if CORS is used
+        // Fetch captions and inject as blobs instead (data URIs not supported!)
+        if (browser.isIE && window.URL) {
+            const elements = this.media.querySelectorAll('track');
+
+            Array.from(elements).forEach(track => {
+                const src = track.getAttribute('src');
+                const href = utils.parseUrl(src);
+
+                if (href.hostname !== window.location.href.hostname && [
+                    'http:',
+                    'https:',
+                ].includes(href.protocol)) {
+                    utils
+                        .fetch(src, 'blob')
+                        .then(blob => {
+                            track.setAttribute('src', window.URL.createObjectURL(blob));
+                        })
+                        .catch(() => {
+                            utils.removeElement(track);
+                        });
+                }
+            });
+        }
+
         // Set language
         captions.setLanguage.call(this);
 
@@ -68,7 +99,7 @@ const captions = {
         captions.show.call(this);
 
         // Set available languages in list
-        if (this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
+        if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
             controls.setCaptionsMenu.call(this);
         }
     },
@@ -78,7 +109,7 @@ const captions = {
         // Setup HTML5 track rendering
         if (this.isHTML5 && this.isVideo) {
             captions.getTracks.call(this).forEach(track => {
-                // Remove previous bindings
+                // Show track
                 utils.on(track, 'cuechange', event => captions.setCue.call(this, event));
 
                 // Turn off native caption rendering to avoid double captions
@@ -124,7 +155,8 @@ const captions = {
     setCue(input) {
         // Get the track from the event if needed
         const track = utils.is.event(input) ? input.target : input;
-        const active = track.activeCues[0];
+        const { activeCues } = track;
+        const active = activeCues.length && activeCues[0];
         const currentTrack = captions.getCurrentTrack.call(this);
 
         // Only display current track

src/js/controls.js

@@ -50,7 +50,7 @@ const controls = {
             icon,
             utils.extend(attributes, {
                 role: 'presentation',
-            })
+            }),
         );
 
         // Create the <use> to reference sprite
@@ -115,8 +115,8 @@ const controls = {
                 {
                     class: this.config.classNames.menu.badge,
                 },
-                text
+                text,
-            )
+            ),
         );
 
         return badge;
@@ -215,7 +215,16 @@ const controls = {
 
         utils.setAttributes(button, attributes);
 
+        // We have multiple play buttons
+        if (type === 'play') {
+            if (!utils.is.array(this.elements.buttons[type])) {
+                this.elements.buttons[type] = [];
+            }
+
+            this.elements.buttons[type].push(button);
+        } else {
             this.elements.buttons[type] = button;
+        }
 
         return button;
     },
@@ -229,7 +238,7 @@ const controls = {
                 for: attributes.id,
                 class: this.config.classNames.hidden,
             },
-            this.config.i18n[type]
+            this.config.i18n[type],
         );
 
         // Seek input
@@ -245,8 +254,8 @@ const controls = {
                     value: 0,
                     autocomplete: 'off',
                 },
-                attributes
+                attributes,
-            )
+            ),
         );
 
         this.elements.inputs[type] = input;
@@ -271,8 +280,8 @@ const controls = {
                     max: 100,
                     value: 0,
                 },
-                attributes
+                attributes,
-            )
+            ),
         );
 
         // Create the label inside
@@ -313,8 +322,8 @@ const controls = {
                 {
                     class: this.config.classNames.hidden,
                 },
-                this.config.i18n[type]
+                this.config.i18n[type],
-            )
+            ),
         );
 
         container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00'));
@@ -340,7 +349,7 @@ const controls = {
                 value,
                 checked,
                 class: 'plyr__sr-only',
-            })
+            }),
         );
 
         const faux = utils.createElement('span', { 'aria-hidden': true });
@@ -418,6 +427,11 @@ const controls = {
     // Set the YouTube quality menu
     // TODO: Support for HTML5
     setQualityMenu(options) {
+        // Menu required
+        if (!utils.is.element(this.elements.settings.panes.quality)) {
+            return;
+        }
+
         const type = 'quality';
         const list = this.elements.settings.panes.quality.querySelector('ul');
 
@@ -473,7 +487,7 @@ const controls = {
         };
 
         this.options.quality.forEach(quality =>
-            controls.createMenuItem.call(this, quality, list, type, controls.getLabel.call(this, 'quality', quality), getBadge(quality))
+            controls.createMenuItem.call(this, quality, list, type, controls.getLabel.call(this, 'quality', quality), getBadge(quality)),
         );
 
         controls.updateSetting.call(this, type, list);
@@ -574,6 +588,11 @@ const controls = {
 
     // Set the looping options
     /* setLoopMenu() {
+        // Menu required
+        if (!utils.is.element(this.elements.settings.panes.loop)) {
+            return;
+        }
+
         const options = ['start', 'end', 'all', 'reset'];
         const list = this.elements.settings.panes.loop.querySelector('ul');
 
@@ -672,7 +691,7 @@ const controls = {
                 'language',
                 track.label || track.language,
                 controls.createBadge.call(this, track.language.toUpperCase()),
-                track.language.toLowerCase() === this.captions.language.toLowerCase()
+                track.language.toLowerCase() === this.captions.language.toLowerCase(),
             );
         });
 
@@ -681,6 +700,11 @@ const controls = {
 
     // Set a list of available captions languages
     setSpeedMenu() {
+        // Menu required
+        if (!utils.is.element(this.elements.settings.panes.speed)) {
+            return;
+        }
+
         const type = 'speed';
 
         // Set the default speeds
@@ -728,6 +752,12 @@ const controls = {
     toggleMenu(event) {
         const { form } = this.elements.settings;
         const button = this.elements.buttons.settings;
+
+        // Menu and button are required
+        if (!utils.is.element(form) || !utils.is.element(button)) {
+            return;
+        }
+
         const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
 
         if (utils.is.event(event)) {
@@ -893,7 +923,6 @@ const controls = {
         // Play/Pause button
         if (this.config.controls.includes('play')) {
             container.appendChild(controls.createButton.call(this, 'play'));
-            // container.appendChild(controls.createButton.call(this, 'pause'));
         }
 
         // Fast forward button
@@ -925,7 +954,7 @@ const controls = {
                         role: 'tooltip',
                         class: this.config.classNames.tooltip,
                     },
-                    '00:00'
+                    '00:00',
                 );
 
                 progress.appendChild(tooltip);
@@ -970,7 +999,7 @@ const controls = {
                 'volume',
                 utils.extend(attributes, {
                     id: `plyr-volume-${data.id}`,
-                })
+                }),
             );
             volume.appendChild(range.label);
             volume.appendChild(range.input);
@@ -997,7 +1026,7 @@ const controls = {
                     'aria-haspopup': true,
                     'aria-controls': `plyr-settings-${data.id}`,
                     'aria-expanded': false,
-                })
+                }),
             );
 
             const form = utils.createElement('form', {
@@ -1040,7 +1069,7 @@ const controls = {
                         'aria-controls': `plyr-settings-${data.id}-${type}`,
                         'aria-expanded': false,
                     }),
-                    this.config.i18n[type]
+                    this.config.i18n[type],
                 );
 
                 const value = utils.createElement('span', {
@@ -1080,7 +1109,7 @@ const controls = {
                         'aria-controls': `plyr-settings-${data.id}-home`,
                         'aria-expanded': false,
                     },
-                    this.config.i18n[type]
+                    this.config.i18n[type],
                 );
 
                 pane.appendChild(back);
@@ -1147,9 +1176,10 @@ const controls = {
 
         // Null by default
         let container = null;
+        this.elements.controls = null;
 
-        // HTML passed as the option
+        // HTML or Element passed as the option
-        if (utils.is.string(this.config.controls)) {
+        if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) {
             container = this.config.controls;
         } else if (utils.is.function(this.config.controls)) {
             // A custom function to build controls
@@ -1193,7 +1223,7 @@ const controls = {
         }
 
         // Find the elements if need be
-        if (utils.is.element(this.elements.controls)) {
+        if (!utils.is.element(this.elements.controls)) {
             utils.findElements.call(this);
         }
 
@@ -1212,7 +1242,7 @@ const controls = {
                     this.config.selectors.labels,
                     ' .',
                     this.config.classNames.hidden,
-                ].join('')
+                ].join(''),
             );
 
             Array.from(labels).forEach(label => {

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.12/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -120,6 +120,7 @@ const defaults = {
     fullscreen: {
         enabled: true, // Allow fullscreen?
         fallback: true, // Fallback for vintage browsers
+        iosNative: false, // Use the native fullscreen in iOS (disables custom controls)
     },
 
     // Local storage
@@ -179,7 +180,7 @@ const defaults = {
         reset: 'Reset',
         none: 'None',
         disabled: 'Disabled',
-        advertisment: 'Ad',
+        advertisement: 'Ad',
     },
 
     // URLs
@@ -258,7 +259,7 @@ const defaults = {
         // Ads
         'adsloaded',
         'adscontentpause',
-        'adsconentresume',
+        'adscontentresume',
         'adstarted',
         'adsmidpoint',
         'adscomplete',
@@ -372,9 +373,10 @@ const defaults = {
     },
 
     // Advertisements plugin
-    // Tag is not required as publisher is determined by vi.ai using the domain
+    // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
         enabled: false,
+        publisherId: '',
     },
 };
 

src/js/fullscreen.js

@@ -1,127 +1,204 @@
 // ==========================================================================
-// Plyr fullscreen API
+// Fullscreen wrapper
 // ==========================================================================
 
 import utils from './utils';
 
-// Determine the prefix
+const browser = utils.getBrowser();
-const prefix = (() => {
-    let value = false;
 
-    if (utils.is.function(document.cancelFullScreen)) {
+function onChange() {
-        value = '';
+    if (!this.enabled) {
+        return;
+    }
+
+    // Update toggle button
+    const button = this.player.elements.buttons.fullscreen;
+    if (utils.is.element(button)) {
+        utils.toggleState(button, this.active);
+    }
+
+    // Trigger an event
+    utils.dispatchEvent(this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+
+    // Trap focus in container
+    if (!browser.isIos) {
+        utils.trapFocus.call(this.player, this.target, this.active);
+    }
+}
+
+function toggleFallback(toggle = false) {
+    // Store or restore scroll position
+    if (toggle) {
+        this.scrollPosition = {
+            x: window.scrollX || 0,
+            y: window.scrollY || 0,
+        };
     } else {
+        window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
+    }
+
+    // Toggle scroll
+    document.body.style.overflow = toggle ? 'hidden' : '';
+
+    // Toggle class hook
+    utils.toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle);
+
+    // Toggle button and fire events
+    onChange.call(this);
+}
+
+class Fullscreen {
+    constructor(player) {
+        // Keep reference to parent
+        this.player = player;
+
+        // Get prefix
+        this.prefix = Fullscreen.prefix;
+
+        // Scroll position
+        this.scrollPosition = { x: 0, y: 0 };
+
+        // Register event listeners
+        // Handle event (incase user presses escape etc)
+        utils.on(document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => {
+            // TODO: Filter for target??
+            onChange.call(this);
+        });
+
+        // Fullscreen toggle on double click
+        utils.on(this.player.elements.container, 'dblclick', () => {
+            this.toggle();
+        });
+
+        // Prevent double click on controls bubbling up
+        utils.on(this.player.elements.controls, 'dblclick', event => event.stopPropagation());
+
+        // Update the UI
+        this.update();
+    }
+
+    // Determine if native supported
+    static get native() {
+        return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
+    }
+
+    // Get the prefix for handlers
+    static get prefix() {
+        // No prefix
+        if (utils.is.function(document.cancelFullScreen)) {
+            return false;
+        }
+
         // Check for fullscreen support by vendor prefix
-        [
+        let value = '';
+        const prefixes = [
             'webkit',
-            'o',
             'moz',
             'ms',
-            'khtml',
+        ];
-        ].some(pre => {
+
+        prefixes.some(pre => {
             if (utils.is.function(document[`${pre}CancelFullScreen`])) {
                 value = pre;
                 return true;
-            } else if (utils.is.function(document.msExitFullscreen) && document.msFullscreenEnabled) {
+            } else if (utils.is.function(document.msExitFullscreen)) {
-                // Special case for MS (when isn't it?)
                 value = 'ms';
                 return true;
             }
 
             return false;
         });
-    }
 
         return value;
-})();
+    }
 
-// Fullscreen API
+    // Determine if fullscreen is enabled
-const fullscreen = {
+    get enabled() {
-    // Get the prefix
+        const fallback = this.player.config.fullscreen.fallback && !utils.inFrame();
-    prefix,
 
-    // Check if we can use it
+        return (Fullscreen.native || fallback) && this.player.config.fullscreen.enabled && this.player.supported.ui && this.player.isVideo;
-    enabled: document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled,
+    }
 
-    // Yet again Microsoft awesomeness,
+    // Get active state
-    // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes
+    get active() {
-    eventType: prefix === 'ms' ? 'MSFullscreenChange' : `${prefix}fullscreenchange`,
+        if (!this.enabled) {
-
-    // Is an element fullscreen
-    isFullScreen(element) {
-        if (!fullscreen.enabled) {
             return false;
         }
 
-        const target = utils.is.nullOrUndefined(element) ? document.body : element;
+        // Fallback using classname
-
+        if (!Fullscreen.native) {
-        switch (prefix) {
+            return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
-            case '':
+        }
-                return document.fullscreenElement === target;
+
-
+        const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}FullscreenElement`];
-            case 'moz':
+
-                return document.mozFullScreenElement === target;
+        return element === this.target;
-
+    }
-            default:
+
-                return document[`${prefix}FullscreenElement`] === target;
+    // Get target element
+    get target() {
+        return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container;
+    }
+
+    // Update UI
+    update() {
+        if (this.enabled) {
+            this.player.debug.log(`${Fullscreen.native ? 'Native' : 'Fallback'} fullscreen enabled`);
+        } else {
+            this.player.debug.log('Fullscreen not supported and fallback disabled');
+        }
+
+        // Add styling hook to show button
+        utils.toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
     }
-    },
 
     // Make an element fullscreen
-    requestFullScreen(element) {
+    enter() {
-        if (!fullscreen.enabled) {
+        if (!this.enabled) {
-            return false;
-        }
-
-        const target = utils.is.nullOrUndefined(element) ? document.body : element;
-
-        return !prefix.length ? target.requestFullScreen() : target[prefix + (prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
-    },
-
-    // Bail from fullscreen
-    cancelFullScreen() {
-        if (!fullscreen.enabled) {
-            return false;
-        }
-
-        return !prefix.length ? document.cancelFullScreen() : document[prefix + (prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
-    },
-
-    // Get the current element
-    element() {
-        if (!fullscreen.enabled) {
-            return null;
-        }
-
-        return !prefix.length ? document.fullscreenElement : document[`${prefix}FullscreenElement`];
-    },
-
-    // Setup fullscreen
-    setup() {
-        if (!this.supported.ui || this.isAudio || !this.config.fullscreen.enabled) {
             return;
         }
 
-        // Check for native support
+        // iOS native fullscreen doesn't need the request step
-        const nativeSupport = fullscreen.enabled;
+        if (browser.isIos && this.player.config.fullscreen.iosNative) {
+            if (this.player.playing) {
+                this.target.webkitEnterFullscreen();
+            }
+        } else if (!Fullscreen.native) {
+            toggleFallback.call(this, true);
+        } else if (!this.prefix) {
+            this.target.requestFullScreen();
+        } else if (!utils.is.empty(this.prefix)) {
+            this.target[`${this.prefix}${this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen'}`]();
+        }
+    }
 
-        if (nativeSupport || (this.config.fullscreen.fallback && !utils.inFrame())) {
+    // Bail from fullscreen
-            this.debug.log(`${nativeSupport ? 'Native' : 'Fallback'} fullscreen enabled`);
+    exit() {
+        if (!this.enabled) {
+            return;
+        }
 
-            // Add styling hook to show button
+        // iOS native fullscreen
-            utils.toggleClass(this.elements.container, this.config.classNames.fullscreen.enabled, true);
+        if (browser.isIos && this.player.config.fullscreen.iosNative) {
-        } else {
+            this.target.webkitExitFullscreen();
-            this.debug.log('Fullscreen not supported and fallback disabled');
+            this.player.play();
+        } else if (!Fullscreen.native) {
+            toggleFallback.call(this, false);
+        } else if (!this.prefix) {
+            document.cancelFullScreen();
+        } else if (!utils.is.empty(this.prefix)) {
+            document[`${this.prefix}${this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen'}`]();
+        }
     }
 
     // Toggle state
-        if (this.elements.buttons && this.elements.buttons.fullscreen) {
+    toggle() {
-            utils.toggleState(this.elements.buttons.fullscreen, false);
+        if (!this.active) {
+            this.enter();
+        } else {
+            this.exit();
+        }
+    }
 }
 
-        // Trap focus in container
+export default Fullscreen;
-        utils.trapFocus.call(this);
-    },
-};
-
-export default fullscreen;

src/js/listeners.js

@@ -5,25 +5,25 @@
 import support from './support';
 import utils from './utils';
 import controls from './controls';
-import fullscreen from './fullscreen';
 import ui from './ui';
 
 // Sniff out the browser
 const browser = utils.getBrowser();
 
-const listeners = {
+class Listeners {
-    // Global listeners
+    constructor(player) {
-    global() {
+        this.player = player;
-        let last = null;
+        this.lastKey = null;
 
-        // Get the key code for an event
+        this.handleKey = this.handleKey.bind(this);
-        const getKeyCode = event => (event.keyCode ? event.keyCode : event.which);
+        this.toggleMenu = this.toggleMenu.bind(this);
+    }
 
-        // Handle key press
+    // Handle key presses
-        const handleKey = event => {
+    handleKey(event) {
-            const code = getKeyCode(event);
+        const code = event.keyCode ? event.keyCode : event.which;
         const pressed = event.type === 'keydown';
-            const repeat = pressed && code === last;
+        const repeat = pressed && code === this.lastKey;
 
         // Bail if a modifier key is set
         if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
@@ -39,7 +39,7 @@ const listeners = {
         // Seek by the number keys
         const seekByKey = () => {
             // Divide the max duration into 10th's and times by the number value
-                this.currentTime = this.duration / 10 * (code - 48);
+            this.player.currentTime = this.player.duration / 10 * (code - 48);
         };
 
         // Handle the key on keydown
@@ -74,7 +74,7 @@ const listeners = {
             // and if the focused element is not editable (e.g. text input)
             // and any that accept key input http://webaim.org/techniques/keyboard/
             const focused = utils.getFocusElement();
-                if (utils.is.element(focused) && utils.matches(focused, this.config.selectors.editable)) {
+            if (utils.is.element(focused) && utils.matches(focused, this.player.config.selectors.editable)) {
                 return;
             }
 
@@ -105,52 +105,52 @@ const listeners = {
                 case 75:
                     // Space and K key
                     if (!repeat) {
-                            this.togglePlay();
+                        this.player.togglePlay();
                     }
                     break;
 
                 case 38:
                     // Arrow up
-                        this.increaseVolume(0.1);
+                    this.player.increaseVolume(0.1);
                     break;
 
                 case 40:
                     // Arrow down
-                        this.decreaseVolume(0.1);
+                    this.player.decreaseVolume(0.1);
                     break;
 
                 case 77:
                     // M key
                     if (!repeat) {
-                            this.muted = !this.muted;
+                        this.player.muted = !this.player.muted;
                     }
                     break;
 
                 case 39:
                     // Arrow forward
-                        this.forward();
+                    this.player.forward();
                     break;
 
                 case 37:
                     // Arrow back
-                        this.rewind();
+                    this.player.rewind();
                     break;
 
                 case 70:
                     // F key
-                        this.toggleFullscreen();
+                    this.player.fullscreen.toggle();
                     break;
 
                 case 67:
                     // C key
                     if (!repeat) {
-                            this.toggleCaptions();
+                        this.player.toggleCaptions();
                     }
                     break;
 
                 case 76:
                     // L key
-                        this.loop = !this.loop;
+                    this.player.loop = !this.player.loop;
                     break;
 
                 /* case 73:
@@ -171,110 +171,114 @@ const listeners = {
 
             // Escape is handle natively when in full screen
             // So we only need to worry about non native
-                if (!fullscreen.enabled && this.fullscreen.active && code === 27) {
+            if (!this.player.fullscreen.enabled && this.player.fullscreen.active && code === 27) {
-                    this.toggleFullscreen();
+                this.player.fullscreen.toggle();
             }
 
             // Store last code for next cycle
-                last = code;
+            this.lastKey = code;
         } else {
-                last = null;
+            this.lastKey = null;
+        }
     }
-        };
 
+    // Toggle menu
+    toggleMenu(event) {
+        controls.toggleMenu.call(this.player, event);
+    }
+
+    // Global window & document listeners
+    global(toggle = true) {
         // Keyboard shortcuts
-        if (this.config.keyboard.global) {
+        if (this.player.config.keyboard.global) {
-            utils.on(window, 'keydown keyup', handleKey, false);
+            utils.toggleListener(window, 'keydown keyup', this.handleKey, toggle, false);
-        } else if (this.config.keyboard.focused) {
+        }
-            utils.on(this.elements.container, 'keydown keyup', handleKey, false);
+
+        // Click anywhere closes menu
+        utils.toggleListener(document.body, 'click', this.toggleMenu, toggle);
+    }
+
+    // Container listeners
+    container() {
+        // Keyboard shortcuts
+        if (!this.player.config.keyboard.global && this.player.config.keyboard.focused) {
+            utils.on(this.player.elements.container, 'keydown keyup', this.handleKey, false);
         }
 
         // Detect tab focus
         // Remove class on blur/focusout
-        utils.on(this.elements.container, 'focusout', event => {
+        utils.on(this.player.elements.container, 'focusout', event => {
-            utils.toggleClass(event.target, this.config.classNames.tabFocus, false);
+            utils.toggleClass(event.target, this.player.config.classNames.tabFocus, false);
         });
 
         // Add classname to tabbed elements
-        utils.on(this.elements.container, 'keydown', event => {
+        utils.on(this.player.elements.container, 'keydown', event => {
             if (event.keyCode !== 9) {
                 return;
             }
 
             // Delay the adding of classname until the focus has changed
             // This event fires before the focusin event
-            window.setTimeout(() => {
+            setTimeout(() => {
-                utils.toggleClass(utils.getFocusElement(), this.config.classNames.tabFocus, true);
+                utils.toggleClass(utils.getFocusElement(), this.player.config.classNames.tabFocus, true);
             }, 0);
         });
 
         // Toggle controls visibility based on mouse movement
-        if (this.config.hideControls) {
+        if (this.player.config.hideControls) {
             // Toggle controls on mouse events and entering fullscreen
-            utils.on(this.elements.container, 'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen', event => {
+            utils.on(this.player.elements.container, 'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen', event => {
-                this.toggleControls(event);
+                this.player.toggleControls(event);
             });
         }
-
-        // Handle user exiting fullscreen by escaping etc
-        if (fullscreen.enabled) {
-            utils.on(document, fullscreen.eventType, event => {
-                this.toggleFullscreen(event);
-            });
-
-            // Fullscreen toggle on double click
-            utils.on(this.elements.container, 'dblclick', event => {
-                this.toggleFullscreen(event);
-            });
     }
-    },
 
     // Listen for media events
     media() {
         // Time change on media
-        utils.on(this.media, 'timeupdate seeking', event => ui.timeUpdate.call(this, event));
+        utils.on(this.player.media, 'timeupdate seeking', event => ui.timeUpdate.call(this.player, event));
 
         // Display duration
-        utils.on(this.media, 'durationchange loadedmetadata', event => ui.durationUpdate.call(this, event));
+        utils.on(this.player.media, 'durationchange loadedmetadata', event => ui.durationUpdate.call(this.player, event));
 
         // Check for audio tracks on load
         // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-        utils.on(this.media, 'loadeddata', () => {
+        utils.on(this.player.media, 'loadeddata', () => {
-            utils.toggleHidden(this.elements.volume, !this.hasAudio);
+            utils.toggleHidden(this.player.elements.volume, !this.player.hasAudio);
-            utils.toggleHidden(this.elements.buttons.mute, !this.hasAudio);
+            utils.toggleHidden(this.player.elements.buttons.mute, !this.player.hasAudio);
         });
 
         // Handle the media finishing
-        utils.on(this.media, 'ended', () => {
+        utils.on(this.player.media, 'ended', () => {
             // Show poster on end
-            if (this.isHTML5 && this.isVideo && this.config.showPosterOnEnd) {
+            if (this.player.isHTML5 && this.player.isVideo && this.player.config.showPosterOnEnd) {
                 // Restart
-                this.restart();
+                this.player.restart();
 
                 // Re-load media
-                this.media.load();
+                this.player.media.load();
             }
         });
 
         // Check for buffer progress
-        utils.on(this.media, 'progress playing', event => ui.updateProgress.call(this, event));
+        utils.on(this.player.media, 'progress playing', event => ui.updateProgress.call(this.player, event));
 
         // Handle native mute
-        utils.on(this.media, 'volumechange', event => ui.updateVolume.call(this, event));
+        utils.on(this.player.media, 'volumechange', event => ui.updateVolume.call(this.player, event));
 
         // Handle native play/pause
-        utils.on(this.media, 'playing play pause ended', event => ui.checkPlaying.call(this, event));
+        utils.on(this.player.media, 'playing play pause ended', event => ui.checkPlaying.call(this.player, event));
 
         // Loading
-        utils.on(this.media, 'stalled waiting canplay seeked playing', event => ui.checkLoading.call(this, event));
+        utils.on(this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event));
 
         // Check if media failed to load
-        // utils.on(this.media, 'play', event => ui.checkFailed.call(this, event));
+        // utils.on(this.player.media, 'play', event => ui.checkFailed.call(this.player, event));
 
         // Click video
-        if (this.supported.ui && this.config.clickToPlay && !this.isAudio) {
+        if (this.player.supported.ui && this.player.config.clickToPlay && !this.player.isAudio) {
             // Re-fetch the wrapper
-            const wrapper = utils.getElement.call(this, `.${this.config.classNames.video}`);
+            const wrapper = utils.getElement.call(this.player, `.${this.player.config.classNames.video}`);
 
             // Bail if there's no wrapper (this should never happen)
             if (!utils.is.element(wrapper)) {
@@ -284,78 +288,78 @@ const listeners = {
             // On click play, pause ore restart
             utils.on(wrapper, 'click', () => {
                 // Touch devices will just show controls (if we're hiding controls)
-                if (this.config.hideControls && support.touch && !this.paused) {
+                if (this.player.config.hideControls && support.touch && !this.player.paused) {
                     return;
                 }
 
-                if (this.paused) {
+                if (this.player.paused) {
-                    this.play();
+                    this.player.play();
-                } else if (this.ended) {
+                } else if (this.player.ended) {
-                    this.restart();
+                    this.player.restart();
-                    this.play();
+                    this.player.play();
                 } else {
-                    this.pause();
+                    this.player.pause();
                 }
             });
         }
 
         // Disable right click
-        if (this.supported.ui && this.config.disableContextMenu) {
+        if (this.player.supported.ui && this.player.config.disableContextMenu) {
             utils.on(
-                this.media,
+                this.player.media,
                 'contextmenu',
                 event => {
                     event.preventDefault();
                 },
-                false
+                false,
             );
         }
 
         // Volume change
-        utils.on(this.media, 'volumechange', () => {
+        utils.on(this.player.media, 'volumechange', () => {
             // Save to storage
-            this.storage.set({ volume: this.volume, muted: this.muted });
+            this.player.storage.set({ volume: this.player.volume, muted: this.player.muted });
         });
 
         // Speed change
-        utils.on(this.media, 'ratechange', () => {
+        utils.on(this.player.media, 'ratechange', () => {
             // Update UI
-            controls.updateSetting.call(this, 'speed');
+            controls.updateSetting.call(this.player, 'speed');
 
             // Save to storage
-            this.storage.set({ speed: this.speed });
+            this.player.storage.set({ speed: this.player.speed });
         });
 
         // Quality change
-        utils.on(this.media, 'qualitychange', () => {
+        utils.on(this.player.media, 'qualitychange', () => {
             // Update UI
-            controls.updateSetting.call(this, 'quality');
+            controls.updateSetting.call(this.player, 'quality');
 
             // Save to storage
-            this.storage.set({ quality: this.quality });
+            this.player.storage.set({ quality: this.player.quality });
         });
 
         // Caption language change
-        utils.on(this.media, 'languagechange', () => {
+        utils.on(this.player.media, 'languagechange', () => {
             // Update UI
-            controls.updateSetting.call(this, 'captions');
+            controls.updateSetting.call(this.player, 'captions');
 
             // Save to storage
-            this.storage.set({ language: this.language });
+            this.player.storage.set({ language: this.player.language });
         });
 
         // Captions toggle
-        utils.on(this.media, 'captionsenabled captionsdisabled', () => {
+        utils.on(this.player.media, 'captionsenabled captionsdisabled', () => {
             // Update UI
-            controls.updateSetting.call(this, 'captions');
+            controls.updateSetting.call(this.player, 'captions');
 
             // Save to storage
-            this.storage.set({ captions: this.captions.active });
+            this.player.storage.set({ captions: this.player.captions.active });
         });
 
         // Proxy events to container
         // Bubble up key events for Edge
-        utils.on(this.media, this.config.events.concat([
+        utils.on(this.player.media, this.player.config.events.concat([
             'keyup',
             'keydown',
         ]).join(' '), event => {
@@ -363,12 +367,12 @@ const listeners = {
 
             // Get error details from media
             if (event.type === 'error') {
-                detail = this.media.error;
+                detail = this.player.media.error;
             }
 
-            utils.dispatchEvent.call(this, this.elements.container, event.type, true, detail);
+            utils.dispatchEvent.call(this.player, this.player.elements.container, event.type, true, detail);
         });
-    },
+    }
 
     // Listen for control events
     controls() {
@@ -377,176 +381,171 @@ const listeners = {
 
         // Trigger custom and default handlers
         const proxy = (event, handlerKey, defaultHandler) => {
-            const customHandler = this.config.listeners[handlerKey];
+            const customHandler = this.player.config.listeners[handlerKey];
 
             // Execute custom handler
             if (utils.is.function(customHandler)) {
-                customHandler.call(this, event);
+                customHandler.call(this.player, event);
             }
 
             // Only call default handler if not prevented in custom handler
             if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
-                defaultHandler.call(this, event);
+                defaultHandler.call(this.player, event);
             }
         };
 
         // Play/pause toggle
-        utils.on(this.elements.buttons.play, 'click', event =>
+        utils.on(this.player.elements.buttons.play, 'click', event =>
             proxy(event, 'play', () => {
-                this.togglePlay();
+                this.player.togglePlay();
-            })
+            }),
         );
 
         // Pause
-        utils.on(this.elements.buttons.restart, 'click', event =>
+        utils.on(this.player.elements.buttons.restart, 'click', event =>
             proxy(event, 'restart', () => {
-                this.restart();
+                this.player.restart();
-            })
+            }),
         );
 
         // Rewind
-        utils.on(this.elements.buttons.rewind, 'click', event =>
+        utils.on(this.player.elements.buttons.rewind, 'click', event =>
             proxy(event, 'rewind', () => {
-                this.rewind();
+                this.player.rewind();
-            })
+            }),
         );
 
         // Rewind
-        utils.on(this.elements.buttons.forward, 'click', event =>
+        utils.on(this.player.elements.buttons.forward, 'click', event =>
             proxy(event, 'forward', () => {
-                this.forward();
+                this.player.forward();
-            })
+            }),
         );
 
         // Mute toggle
-        utils.on(this.elements.buttons.mute, 'click', event =>
+        utils.on(this.player.elements.buttons.mute, 'click', event =>
             proxy(event, 'mute', () => {
-                this.muted = !this.muted;
+                this.player.muted = !this.player.muted;
-            })
+            }),
         );
 
         // Captions toggle
-        utils.on(this.elements.buttons.captions, 'click', event =>
+        utils.on(this.player.elements.buttons.captions, 'click', event =>
             proxy(event, 'captions', () => {
-                this.toggleCaptions();
+                this.player.toggleCaptions();
-            })
+            }),
         );
 
         // Fullscreen toggle
-        utils.on(this.elements.buttons.fullscreen, 'click', event =>
+        utils.on(this.player.elements.buttons.fullscreen, 'click', event =>
             proxy(event, 'fullscreen', () => {
-                this.toggleFullscreen();
+                this.player.fullscreen.toggle();
-            })
+            }),
         );
 
         // Picture-in-Picture
-        utils.on(this.elements.buttons.pip, 'click', event =>
+        utils.on(this.player.elements.buttons.pip, 'click', event =>
             proxy(event, 'pip', () => {
-                this.pip = 'toggle';
+                this.player.pip = 'toggle';
-            })
+            }),
         );
 
         // Airplay
-        utils.on(this.elements.buttons.airplay, 'click', event =>
+        utils.on(this.player.elements.buttons.airplay, 'click', event =>
             proxy(event, 'airplay', () => {
-                this.airplay();
+                this.player.airplay();
-            })
+            }),
         );
 
         // Settings menu
-        utils.on(this.elements.buttons.settings, 'click', event => {
+        utils.on(this.player.elements.buttons.settings, 'click', event => {
-            controls.toggleMenu.call(this, event);
+            controls.toggleMenu.call(this.player, event);
-        });
-
-        // Click anywhere closes menu
-        utils.on(document.documentElement, 'click', event => {
-            controls.toggleMenu.call(this, event);
         });
 
         // Settings menu
-        utils.on(this.elements.settings.form, 'click', event => {
+        utils.on(this.player.elements.settings.form, 'click', event => {
             event.stopPropagation();
 
             // Settings menu items - use event delegation as items are added/removed
-            if (utils.matches(event.target, this.config.selectors.inputs.language)) {
+            if (utils.matches(event.target, this.player.config.selectors.inputs.language)) {
                 proxy(event, 'language', () => {
-                    this.language = event.target.value;
+                    this.player.language = event.target.value;
                 });
-            } else if (utils.matches(event.target, this.config.selectors.inputs.quality)) {
+            } else if (utils.matches(event.target, this.player.config.selectors.inputs.quality)) {
                 proxy(event, 'quality', () => {
-                    this.quality = event.target.value;
+                    this.player.quality = event.target.value;
                 });
-            } else if (utils.matches(event.target, this.config.selectors.inputs.speed)) {
+            } else if (utils.matches(event.target, this.player.config.selectors.inputs.speed)) {
                 proxy(event, 'speed', () => {
-                    this.speed = parseFloat(event.target.value);
+                    this.player.speed = parseFloat(event.target.value);
                 });
             } else {
-                controls.showTab.call(this, event);
+                controls.showTab.call(this.player, event);
             }
         });
 
         // Seek
-        utils.on(this.elements.inputs.seek, inputEvent, event =>
+        utils.on(this.player.elements.inputs.seek, inputEvent, event =>
             proxy(event, 'seek', () => {
-                this.currentTime = event.target.value / event.target.max * this.duration;
+                this.player.currentTime = event.target.value / event.target.max * this.player.duration;
-            })
+            }),
         );
 
         // Current time invert
         // Only if one time element is used for both currentTime and duration
-        if (this.config.toggleInvert && !utils.is.element(this.elements.display.duration)) {
+        if (this.player.config.toggleInvert && !utils.is.element(this.player.elements.display.duration)) {
-            utils.on(this.elements.display.currentTime, 'click', () => {
+            utils.on(this.player.elements.display.currentTime, 'click', () => {
                 // Do nothing if we're at the start
-                if (this.currentTime === 0) {
+                if (this.player.currentTime === 0) {
                     return;
                 }
 
-                this.config.invertTime = !this.config.invertTime;
+                this.player.config.invertTime = !this.player.config.invertTime;
-                ui.timeUpdate.call(this);
+                ui.timeUpdate.call(this.player);
             });
         }
 
         // Volume
-        utils.on(this.elements.inputs.volume, inputEvent, event =>
+        utils.on(this.player.elements.inputs.volume, inputEvent, event =>
             proxy(event, 'volume', () => {
-                this.volume = event.target.value;
+                this.player.volume = event.target.value;
-            })
+            }),
         );
 
         // Polyfill for lower fill in <input type="range"> for webkit
         if (browser.isWebkit) {
-            utils.on(utils.getElements.call(this, 'input[type="range"]'), 'input', event => {
+            utils.on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', event => {
-                controls.updateRangeFill.call(this, event.target);
+                controls.updateRangeFill.call(this.player, event.target);
             });
         }
 
         // Seek tooltip
-        utils.on(this.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this, event));
+        utils.on(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event));
 
         // Toggle controls visibility based on mouse movement
-        if (this.config.hideControls) {
+        if (this.player.config.hideControls) {
             // Watch for cursor over controls so they don't hide when trying to interact
-            utils.on(this.elements.controls, 'mouseenter mouseleave', event => {
+            utils.on(this.player.elements.controls, 'mouseenter mouseleave', event => {
-                this.elements.controls.hover = event.type === 'mouseenter';
+                this.player.elements.controls.hover = event.type === 'mouseenter';
             });
 
             // Watch for cursor over controls so they don't hide when trying to interact
-            utils.on(this.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
+            utils.on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
-                this.elements.controls.pressed = [
+                this.player.elements.controls.pressed = [
                     'mousedown',
                     'touchstart',
                 ].includes(event.type);
             });
 
             // Focus in/out on controls
-            utils.on(this.elements.controls, 'focusin focusout', event => {
+            utils.on(this.player.elements.controls, 'focusin focusout', event => {
-                this.toggleControls(event);
+                this.player.toggleControls(event);
             });
         }
 
         // Mouse wheel for volume
         utils.on(
-            this.elements.inputs.volume,
+            this.player.elements.inputs.volume,
             'wheel',
             event =>
                 proxy(event, 'volume', () => {
@@ -559,10 +558,10 @@ const listeners = {
                     // Scroll down (or up on natural) to decrease
                     if (event.deltaY < 0 || event.deltaX > 0) {
                         if (inverted) {
-                            this.decreaseVolume(step);
+                            this.player.decreaseVolume(step);
                             direction = -1;
                         } else {
-                            this.increaseVolume(step);
+                            this.player.increaseVolume(step);
                             direction = 1;
                         }
                     }
@@ -570,22 +569,27 @@ const listeners = {
                     // Scroll up (or down on natural) to increase
                     if (event.deltaY > 0 || event.deltaX < 0) {
                         if (inverted) {
-                            this.increaseVolume(step);
+                            this.player.increaseVolume(step);
                             direction = 1;
                         } else {
-                            this.decreaseVolume(step);
+                            this.player.decreaseVolume(step);
                             direction = -1;
                         }
                     }
 
                     // Don't break page scrolling at max and min
-                    if ((direction === 1 && this.media.volume < 1) || (direction === -1 && this.media.volume > 0)) {
+                    if ((direction === 1 && this.player.media.volume < 1) || (direction === -1 && this.player.media.volume > 0)) {
                         event.preventDefault();
                     }
                 }),
-            false
+            false,
         );
-    },
+    }
-};
 
-export default listeners;
+    // Reset on destroy
+    clear() {
+        this.global(false);
+    }
+}
+
+export default Listeners;

src/js/media.js

@@ -86,7 +86,7 @@ const media = {
         }
 
         // Remove child sources
-        Array.from(this.media.querySelectorAll('source')).forEach(utils.removeElement);
+        utils.removeElement(this.media.querySelectorAll('source'));
 
         // Set blank video src attribute
         // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error

src/js/plugins/ads.js

@@ -8,22 +8,6 @@
 
 import utils from '../utils';
 
-// Build the default tag URL
-const getTagUrl = () => {
-    const params = {
-        AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
-        AV_CHANNELID: '5a0458dc28a06145e4519d21',
-        AV_URL: '127.0.0.1:3000',
-        cb: 1,
-        AV_WIDTH: 640,
-        AV_HEIGHT: 480,
-    };
-
-    const base = 'https://go.aniview.com/api/adserver6/vast/';
-
-    return `${base}?${utils.buildUrlParams(params)}`;
-};
-
 class Ads {
     /**
      * Ads constructor.
@@ -32,39 +16,10 @@ class Ads {
      */
     constructor(player) {
         this.player = player;
-        this.enabled = player.config.ads.enabled;
+        this.publisherId = player.config.ads.publisherId;
+        this.enabled = player.isHTML5 && player.isVideo && player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
         this.playing = false;
         this.initialized = false;
-        this.blocked = false;
-        this.enabled = utils.is.url(player.config.ads.tag);
-
-        // Check if a tag URL is provided.
-        if (!this.enabled) {
-            return;
-        }
-
-        // Check if the Google IMA3 SDK is loaded or load it ourselves
-        if (!utils.is.object(window.google)) {
-            utils.loadScript(
-                player.config.urls.googleIMA.api,
-                () => {
-                    this.ready();
-                },
-                () => {
-                    // Script failed to load or is blocked
-                    this.blocked = true;
-                    this.player.debug.log('Ads error: Google IMA SDK failed to load');
-                },
-            );
-        } else {
-            this.ready();
-        }
-    }
-
-    /**
-     * Get the ads instance ready.
-     */
-    ready() {
         this.elements = {
             container: null,
             displayContainer: null,
@@ -76,32 +31,77 @@ class Ads {
         this.safetyTimer = null;
         this.countdownTimer = null;
 
-        // Set listeners on the Plyr instance
+        // Setup a promise to resolve when the IMA manager is ready
-        this.listeners();
+        this.managerPromise = new Promise((resolve, reject) => {
+            // The ad is loaded and ready
+            this.on('loaded', resolve);
 
+            // Ads failed
+            this.on('error', reject);
+        });
+
+        this.load();
+    }
+
+    /**
+     * Load the IMA SDK
+     */
+    load() {
+        if (this.enabled) {
+            // Check if the Google IMA3 SDK is loaded or load it ourselves
+            if (!utils.is.object(window.google) || !utils.is.object(window.google.ima)) {
+                utils
+                    .loadScript(this.player.config.urls.googleIMA.api)
+                    .then(() => {
+                        this.ready();
+                    })
+                    .catch(() => {
+                        // Script failed to load or is blocked
+                        this.trigger('error', new Error('Google IMA SDK failed to load'));
+                    });
+            } else {
+                this.ready();
+            }
+        }
+    }
+
+    /**
+     * Get the ads instance ready
+     */
+    ready() {
         // Start ticking our safety timer. If the whole advertisement
         // thing doesn't resolve within our set time; we bail
         this.startSafetyTimer(12000, 'ready()');
 
-        // Setup a simple promise to resolve if the IMA loader is ready
-        this.loaderPromise = new Promise(resolve => {
-            this.on('ADS_LOADER_LOADED', () => resolve());
-        });
-
-        // Setup a promise to resolve if the IMA manager is ready
-        this.managerPromise = new Promise(resolve => {
-            this.on('ADS_MANAGER_LOADED', () => resolve());
-        });
-
         // Clear the safety timer
         this.managerPromise.then(() => {
             this.clearSafetyTimer('onAdsManagerLoaded()');
         });
 
+        // Set listeners on the Plyr instance
+        this.listeners();
+
         // Setup the IMA SDK
         this.setupIMA();
     }
 
+    // Build the default tag URL
+    get tagUrl() {
+        const params = {
+            AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
+            AV_CHANNELID: '5a0458dc28a06145e4519d21',
+            AV_URL: location.hostname,
+            cb: Date.now(),
+            AV_WIDTH: 640,
+            AV_HEIGHT: 480,
+            AV_CDIM2: this.publisherId,
+        };
+
+        const base = 'https://go.aniview.com/api/adserver6/vast/';
+
+        return `${base}?${utils.buildUrlParams(params)}`;
+    }
+
     /**
      * In order for the SDK to display ads for our video, we need to tell it where to put them,
      * so here we define our ad container. This div is set up to render on top of the video player.
@@ -114,7 +114,6 @@ class Ads {
         // Create the container for our advertisements
         this.elements.container = utils.createElement('div', {
             class: this.player.config.classNames.ads,
-            hidden: '',
         });
         this.player.elements.container.appendChild(this.elements.container);
 
@@ -148,7 +147,7 @@ class Ads {
 
             // Request video ads
             const request = new google.ima.AdsRequest();
-            request.adTagUrl = getTagUrl();
+            request.adTagUrl = this.tagUrl;
 
             // Specify the linear and nonlinear slot sizes. This helps the SDK
             // to select the correct creative if multiple are returned
@@ -161,8 +160,6 @@ class Ads {
             request.forceNonLinearFullSlot = false;
 
             this.loader.requestAds(request);
-
-            this.handleEventListeners('ADS_LOADER_LOADED');
         } catch (e) {
             this.onAdError(e);
         }
@@ -174,25 +171,25 @@ class Ads {
      */
     pollCountdown(start = false) {
         if (!start) {
-            window.clearInterval(this.countdownTimer);
+            clearInterval(this.countdownTimer);
             this.elements.container.removeAttribute('data-badge-text');
             return;
         }
 
         const update = () => {
-            const time = utils.formatTime(this.manager.getRemainingTime());
+            const time = utils.formatTime(Math.max(this.manager.getRemainingTime(), 0));
-            const label = `${this.player.config.i18n.advertisment} - ${time}`;
+            const label = `${this.player.config.i18n.advertisement} - ${time}`;
             this.elements.container.setAttribute('data-badge-text', label);
         };
 
-        this.countdownTimer = window.setInterval(update, 100);
+        this.countdownTimer = setInterval(update, 100);
     }
 
     /**
      * This method is called whenever the ads are ready inside the AdDisplayContainer
      * @param {Event} adsManagerLoadedEvent
      */
-    onAdsManagerLoaded(adsManagerLoadedEvent) {
+    onAdsManagerLoaded(event) {
         // Get the ads manager
         const settings = new google.ima.AdsRenderingSettings();
 
@@ -202,14 +199,14 @@ class Ads {
 
         // The SDK is polling currentTime on the contentPlayback. And needs a duration
         // so it can determine when to start the mid- and post-roll
-        this.manager = adsManagerLoadedEvent.getAdsManager(this.player, settings);
+        this.manager = event.getAdsManager(this.player, settings);
 
         // Get the cue points for any mid-rolls by filtering out the pre- and post-roll
         this.cuePoints = this.manager.getCuePoints();
 
         // Add advertisement cue's within the time line if available
         this.cuePoints.forEach(cuePoint => {
-            if (cuePoint !== 0 && cuePoint !== -1) {
+            if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {
                 const seekElement = this.player.elements.progress;
 
                 if (seekElement) {
@@ -241,7 +238,7 @@ class Ads {
         });
 
         // Resolve our adsManager
-        this.handleEventListeners('ADS_MANAGER_LOADED');
+        this.trigger('loaded');
     }
 
     /**
@@ -259,17 +256,18 @@ class Ads {
 
         // Proxy event
         const dispatchEvent = type => {
-            utils.dispatchEvent.call(this.player, this.player.media, `ads${type}`);
+            const event = `ads${type.replace(/_/g, '').toLowerCase()}`;
+            utils.dispatchEvent.call(this.player, this.player.media, event);
         };
 
         switch (event.type) {
             case google.ima.AdEvent.Type.LOADED:
                 // This is the first event sent for an ad - it is possible to determine whether the
                 // ad is a video ad or an overlay
-                this.handleEventListeners('LOADED');
+                this.trigger('loaded');
 
                 // Bubble event
-                dispatchEvent('loaded');
+                dispatchEvent(event.type);
 
                 // Start countdown
                 this.pollCountdown(true);
@@ -287,10 +285,9 @@ class Ads {
             case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:
                 // All ads for the current videos are done. We can now request new advertisements
                 // in case the video is re-played
-                this.handleEventListeners('ALL_ADS_COMPLETED');
 
                 // Fire event
-                dispatchEvent('allcomplete');
+                dispatchEvent(event.type);
 
                 // TODO: Example for what happens when a next video in a playlist would be loaded.
                 // So here we load a new video when all ads are done.
@@ -322,9 +319,8 @@ class Ads {
                 // This event indicates the ad has started - the video player can adjust the UI,
                 // for example display a pause button and remaining time. Fired when content should
                 // be paused. This usually happens right before an ad is about to cover the content
-                this.handleEventListeners('CONTENT_PAUSE_REQUESTED');
 
-                dispatchEvent('contentpause');
+                dispatchEvent(event.type);
 
                 this.pauseContent();
 
@@ -335,9 +331,8 @@ class Ads {
                 // appropriate UI actions, such as removing the timer for remaining time detection.
                 // Fired when content should be resumed. This usually happens when an ad finishes
                 // or collapses
-                this.handleEventListeners('CONTENT_RESUME_REQUESTED');
 
-                dispatchEvent('contentresume');
+                dispatchEvent(event.type);
 
                 this.pollCountdown();
 
@@ -346,23 +341,11 @@ class Ads {
                 break;
 
             case google.ima.AdEvent.Type.STARTED:
-                dispatchEvent('started');
-                break;
-
             case google.ima.AdEvent.Type.MIDPOINT:
-                dispatchEvent('midpoint');
-                break;
-
             case google.ima.AdEvent.Type.COMPLETE:
-                dispatchEvent('complete');
-                break;
-
             case google.ima.AdEvent.Type.IMPRESSION:
-                dispatchEvent('impression');
-                break;
-
             case google.ima.AdEvent.Type.CLICK:
-                dispatchEvent('click');
+                dispatchEvent(event.type);
                 break;
 
             default:
@@ -376,7 +359,7 @@ class Ads {
      */
     onAdError(event) {
         this.cancel();
-        this.player.debug.log('Ads error', event);
+        this.player.debug.warn('Ads error', event);
     }
 
     /**
@@ -423,11 +406,12 @@ class Ads {
         const { container } = this.player.elements;
 
         if (!this.managerPromise) {
-            return;
+            this.resumeContent();
         }
 
         // Play the requested advertisement whenever the adsManager is ready
-        this.managerPromise.then(() => {
+        this.managerPromise
+            .then(() => {
                 // Initialize the container. Must be done via a user action on mobile devices
                 this.elements.displayContainer.initialize();
 
@@ -447,15 +431,16 @@ class Ads {
                     // VAST response
                     this.onAdError(adError);
                 }
-        });
+            })
+            .catch(() => {});
     }
 
     /**
-     * Resume our video.
+     * Resume our video
      */
     resumeContent() {
-        // Hide our ad container
+        // Hide the advertisement container
-        utils.toggleHidden(this.elements.container, true);
+        this.elements.container.style.zIndex = '';
 
         // Ad is stopped
         this.playing = false;
@@ -470,8 +455,8 @@ class Ads {
      * Pause our video
      */
     pauseContent() {
-        // Show our ad container.
+        // Show the advertisement container
-        utils.toggleHidden(this.elements.container, false);
+        this.elements.container.style.zIndex = 3;
 
         // Ad is playing.
         this.playing = true;
@@ -493,7 +478,7 @@ class Ads {
         }
 
         // Tell our instance that we're done for now
-        this.handleEventListeners('ERROR');
+        this.trigger('error');
 
         // Re-create our adsManager
         this.loadAds();
@@ -504,7 +489,8 @@ class Ads {
      */
     loadAds() {
         // Tell our adsManager to go bye bye
-        this.managerPromise.then(() => {
+        this.managerPromise
+            .then(() => {
                 // Destroy our adsManager
                 if (this.manager) {
                     this.manager.destroy();
@@ -512,22 +498,29 @@ class Ads {
 
                 // Re-set our adsManager promises
                 this.managerPromise = new Promise(resolve => {
-                this.on('ADS_MANAGER_LOADED', () => resolve());
+                    this.on('loaded', resolve);
                     this.player.debug.log(this.manager);
                 });
 
                 // Now request some new advertisements
                 this.requestAds();
-        });
+            })
+            .catch(() => {});
     }
 
     /**
      * Handles callbacks after an ad event was invoked
      * @param {string} event - Event type
      */
-    handleEventListeners(event) {
+    trigger(event, ...args) {
-        if (utils.is.function(this.events[event])) {
+        const handlers = this.events[event];
-            this.events[event].call(this);
+
+        if (utils.is.array(handlers)) {
+            handlers.forEach(handler => {
+                if (utils.is.function(handler)) {
+                    handler.apply(this, args);
+                }
+            });
         }
     }
 
@@ -538,7 +531,12 @@ class Ads {
      * @return {Ads}
      */
     on(event, callback) {
-        this.events[event] = callback;
+        if (!utils.is.array(this.events[event])) {
+            this.events[event] = [];
+        }
+
+        this.events[event].push(callback);
+
         return this;
     }
 
@@ -553,7 +551,7 @@ class Ads {
     startSafetyTimer(time, from) {
         this.player.debug.log(`Safety timer invoked from: ${from}`);
 
-        this.safetyTimer = window.setTimeout(() => {
+        this.safetyTimer = setTimeout(() => {
             this.cancel();
             this.clearSafetyTimer('startSafetyTimer()');
         }, time);

src/js/plugins/vimeo.js

@@ -16,8 +16,13 @@ const vimeo = {
 
         // Load the API if not already
         if (!utils.is.object(window.Vimeo)) {
-            utils.loadScript(this.config.urls.vimeo.api, () => {
+            utils
+                .loadScript(this.config.urls.vimeo.api)
+                .then(() => {
                     vimeo.ready.call(this);
+                })
+                .catch(error => {
+                    this.debug.warn('Vimeo API failed to load', error);
                 });
         } else {
             vimeo.ready.call(this);
@@ -311,7 +316,7 @@ const vimeo = {
         });
 
         // Rebuild UI
-        window.setTimeout(() => ui.build.call(player), 0);
+        setTimeout(() => ui.build.call(player), 0);
     },
 };
 

src/js/plugins/youtube.js

@@ -19,7 +19,9 @@ const youtube = {
             youtube.ready.call(this);
         } else {
             // Load the API
-            utils.loadScript(this.config.urls.youtube.api);
+            utils.loadScript(this.config.urls.youtube.api).catch(error => {
+                this.debug.warn('YouTube API failed to load', error);
+            });
 
             // Setup callback for the API
             // YouTube has it's own system of course...
@@ -194,17 +196,14 @@ const youtube = {
                     // Create a faux HTML5 API using the YouTube API
                     player.media.play = () => {
                         instance.playVideo();
-                        player.media.paused = false;
                     };
 
                     player.media.pause = () => {
                         instance.pauseVideo();
-                        player.media.paused = true;
                     };
 
                     player.media.stop = () => {
                         instance.stopVideo();
-                        player.media.paused = true;
                     };
 
                     player.media.duration = instance.getDuration();
@@ -306,10 +305,10 @@ const youtube = {
                     utils.dispatchEvent.call(player, player.media, 'durationchange');
 
                     // Reset timer
-                    window.clearInterval(player.timers.buffering);
+                    clearInterval(player.timers.buffering);
 
                     // Setup buffering
-                    player.timers.buffering = window.setInterval(() => {
+                    player.timers.buffering = setInterval(() => {
                         // Get loaded % from YouTube
                         player.media.buffered = instance.getVideoLoadedFraction();
 
@@ -323,7 +322,7 @@ const youtube = {
 
                         // Bail if we're at 100%
                         if (player.media.buffered === 1) {
-                            window.clearInterval(player.timers.buffering);
+                            clearInterval(player.timers.buffering);
 
                             // Trigger event
                             utils.dispatchEvent.call(player, player.media, 'canplaythrough');
@@ -331,14 +330,14 @@ const youtube = {
                     }, 200);
 
                     // Rebuild UI
-                    window.setTimeout(() => ui.build.call(player), 50);
+                    setTimeout(() => ui.build.call(player), 50);
                 },
                 onStateChange(event) {
                     // Get the instance
                     const instance = event.target;
 
                     // Reset timer
-                    window.clearInterval(player.timers.playing);
+                    clearInterval(player.timers.playing);
 
                     // Handle events
                     // -1   Unstarted
@@ -378,7 +377,7 @@ const youtube = {
                             utils.dispatchEvent.call(player, player.media, 'playing');
 
                             // Poll to get playback progress
-                            player.timers.playing = window.setInterval(() => {
+                            player.timers.playing = setInterval(() => {
                                 utils.dispatchEvent.call(player, player.media, 'timeupdate');
                             }, 50);
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.12
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -11,13 +11,13 @@ import support from './support';
 import utils from './utils';
 
 import Console from './console';
+import Fullscreen from './fullscreen';
+import Listeners from './listeners';
 import Storage from './storage';
 import Ads from './plugins/ads';
 
 import captions from './captions';
 import controls from './controls';
-import fullscreen from './fullscreen';
-import listeners from './listeners';
 import media from './media';
 import source from './source';
 import ui from './ui';
@@ -26,12 +26,6 @@ import ui from './ui';
 // TODO: Use a WeakMap for private globals
 // const globals = new WeakMap();
 
-// Globals
-let scrollPosition = {
-    x: 0,
-    y: 0,
-};
-
 // Plyr instance
 class Plyr {
     constructor(target, options) {
@@ -232,9 +226,6 @@ class Plyr {
                 return;
         }
 
-        // Setup local storage for user settings
-        this.storage = new Storage(this);
-
         // Check for support again but with type
         this.supported = support.check(this.type, this.provider, this.config.inline);
 
@@ -244,6 +235,12 @@ class Plyr {
             return;
         }
 
+        // Create listeners
+        this.listeners = new Listeners(this);
+
+        // Setup local storage for user settings
+        this.storage = new Storage(this);
+
         // Store reference
         this.media.plyr = this;
 
@@ -256,9 +253,6 @@ class Plyr {
         // Allow focus to be captured
         this.elements.container.setAttribute('tabindex', 0);
 
-        // Global listeners
-        listeners.global.call(this);
-
         // Add style hook
         ui.addStyleHook.call(this);
 
@@ -278,6 +272,15 @@ class Plyr {
             ui.build.call(this);
         }
 
+        // Container listeners
+        this.listeners.container();
+
+        // Global listeners
+        this.listeners.global();
+
+        // Setup fullscreen
+        this.fullscreen = new Fullscreen(this);
+
         // Setup ads if provided
         this.ads = new Ads(this);
     }
@@ -290,34 +293,37 @@ class Plyr {
      * Types and provider helpers
      */
     get isHTML5() {
-        return this.provider === providers.html5;
+        return Boolean(this.provider === providers.html5);
     }
     get isEmbed() {
-        return this.isYouTube || this.isVimeo;
+        return Boolean(this.isYouTube || this.isVimeo);
     }
     get isYouTube() {
-        return this.provider === providers.youtube;
+        return Boolean(this.provider === providers.youtube);
     }
     get isVimeo() {
-        return this.provider === providers.vimeo;
+        return Boolean(this.provider === providers.vimeo);
     }
     get isVideo() {
-        return this.type === types.video;
+        return Boolean(this.type === types.video);
     }
     get isAudio() {
-        return this.type === types.audio;
+        return Boolean(this.type === types.audio);
     }
 
     /**
      * Play the media, or play the advertisement (if they are not blocked)
      */
     play() {
-        // TODO: Always return a promise?
+        if (!utils.is.function(this.media.play)) {
-        if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) {
-            this.ads.play();
             return null;
         }
 
+        // If ads are enabled, wait for them first
+        if (this.ads.enabled && !this.ads.initialized) {
+            return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
+        }
+
         // Return the promise (for HTML5)
         return this.media.play();
     }
@@ -326,7 +332,7 @@ class Plyr {
      * Pause the media
      */
     pause() {
-        if (!this.playing) {
+        if (!this.playing || !utils.is.function(this.media.pause)) {
             return;
         }
 
@@ -337,21 +343,21 @@ class Plyr {
      * Get paused state
      */
     get paused() {
-        return this.media.paused;
+        return Boolean(this.media.paused);
     }
 
     /**
      * Get playing state
      */
     get playing() {
-        return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true);
+        return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
     }
 
     /**
      * Get ended state
      */
     get ended() {
-        return this.media.ended;
+        return Boolean(this.media.ended);
     }
 
     /**
@@ -432,11 +438,32 @@ class Plyr {
         return Number(this.media.currentTime);
     }
 
+    /**
+     * Get buffered
+     */
+    get buffered() {
+        const { buffered } = this.media;
+
+        // YouTube / Vimeo return a float between 0-1
+        if (utils.is.number(buffered)) {
+            return buffered;
+        }
+
+        // HTML5
+        // TODO: Handle buffered chunks of the media
+        // (i.e. seek to another section buffers only that section)
+        if (buffered && buffered.length && this.duration > 0) {
+            return buffered.end(0) / this.duration;
+        }
+
+        return 0;
+    }
+
     /**
      * Get seeking status
      */
     get seeking() {
-        return this.media.seeking;
+        return Boolean(this.media.seeking);
     }
 
     /**
@@ -447,7 +474,7 @@ class Plyr {
         const fauxDuration = parseInt(this.config.duration, 10);
 
         // True duration
-        const realDuration = Number(this.media.duration);
+        const realDuration = this.media ? Number(this.media.duration) : 0;
 
         // If custom duration is funky, use regular duration
         return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;
@@ -501,7 +528,7 @@ class Plyr {
      * Get the current player volume
      */
     get volume() {
-        return this.media.volume;
+        return Number(this.media.volume);
     }
 
     /**
@@ -550,7 +577,7 @@ class Plyr {
      * Get current muted state
      */
     get muted() {
-        return this.media.muted;
+        return Boolean(this.media.muted);
     }
 
     /**
@@ -567,12 +594,16 @@ class Plyr {
         }
 
         // Get audio tracks
-        return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
+        return (
+            Boolean(this.media.mozHasAudio) ||
+            Boolean(this.media.webkitAudioDecodedByteCount) ||
+            Boolean(this.media.audioTracks && this.media.audioTracks.length)
+        );
     }
 
     /**
      * Set playback speed
-     * @param {decimal} speed - the speed of playback (0.5-2.0)
+     * @param {number} speed - the speed of playback (0.5-2.0)
      */
     set speed(input) {
         let speed = null;
@@ -613,7 +644,7 @@ class Plyr {
      * Get current playback speed
      */
     get speed() {
-        return this.media.playbackRate;
+        return Number(this.media.playbackRate);
     }
 
     /**
@@ -713,7 +744,7 @@ class Plyr {
      * Get current loop state
      */
     get loop() {
-        return this.media.loop;
+        return Boolean(this.media.loop);
     }
 
     /**
@@ -770,7 +801,7 @@ class Plyr {
      * Get the current autoplay state
      */
     get autoplay() {
-        return this.config.autoplay;
+        return Boolean(this.config.autoplay);
     }
 
     /**
@@ -850,62 +881,6 @@ class Plyr {
         return this.captions.language;
     }
 
-    /**
-     * Toggle fullscreen playback
-     * Requires user input event
-     * @param {event} event
-     */
-    toggleFullscreen(event) {
-        // Video only
-        if (this.isAudio) {
-            return;
-        }
-
-        // Check for native support
-        if (fullscreen.enabled) {
-            if (utils.is.event(event) && event.type === fullscreen.eventType) {
-                // If it's a fullscreen change event, update the state
-                this.fullscreen.active = fullscreen.isFullScreen(this.elements.container);
-            } else {
-                // Else it's a user request to enter or exit
-                if (!this.fullscreen.active) {
-                    fullscreen.requestFullScreen(this.elements.container);
-                } else {
-                    fullscreen.cancelFullScreen();
-                }
-
-                return;
-            }
-        } else {
-            // Otherwise, it's a simple toggle
-            this.fullscreen.active = !this.fullscreen.active;
-
-            // Add class hook
-            utils.toggleClass(this.elements.container, this.config.classNames.fullscreen.fallback, this.fullscreen.active);
-
-            // Make sure we don't lose scroll position
-            if (this.fullscreen.active) {
-                scrollPosition = {
-                    x: window.pageXOffset || 0,
-                    y: window.pageYOffset || 0,
-                };
-            } else {
-                window.scrollTo(scrollPosition.x, scrollPosition.y);
-            }
-
-            // Bind/unbind escape key
-            document.body.style.overflow = this.fullscreen.active ? 'hidden' : '';
-        }
-
-        // Set button state
-        if (utils.is.element(this.elements.buttons.fullscreen)) {
-            utils.toggleState(this.elements.buttons.fullscreen, this.fullscreen.active);
-        }
-
-        // Trigger an event
-        utils.dispatchEvent.call(this, this.media, this.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen');
-    }
-
     /**
      * Toggle picture-in-picture playback on WebKit/MacOS
      * TODO: update player with state, support, enabled
@@ -1005,7 +980,7 @@ class Plyr {
         }
 
         // Clear timer on every call
-        window.clearTimeout(this.timers.controls);
+        clearTimeout(this.timers.controls);
 
         // If the mouse is not over the controls, set a timeout to hide them
         if (show || this.paused || this.loading) {
@@ -1031,15 +1006,7 @@ class Plyr {
         // If toggle is false or if we're playing (regardless of toggle),
         // then set the timer to hide the controls
         if (!show || this.playing) {
-            this.timers.controls = window.setTimeout(() => {
+            this.timers.controls = setTimeout(() => {
-                /* this.debug.warn({
-                    pressed: this.elements.controls.pressed,
-                    hover: this.elements.controls.pressed,
-                    playing: this.playing,
-                    paused: this.paused,
-                    loading: this.loading,
-                }); */
-
                 // If the mouse is over the controls (and not entering fullscreen), bail
                 if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) {
                     return;
@@ -1091,6 +1058,10 @@ class Plyr {
      * @param {boolean} soft - Whether it's a soft destroy (for source changes etc)
      */
     destroy(callback, soft = false) {
+        if (!this.ready) {
+            return;
+        }
+
         const done = () => {
             // Reset overflow (incase destroyed while in fullscreen)
             document.body.style.overflow = '';
@@ -1101,12 +1072,8 @@ class Plyr {
             // If it's a soft destroy, make minimal changes
             if (soft) {
                 if (Object.keys(this.elements).length) {
-                    // Remove buttons
+                    // Remove elements
-                    if (this.elements.buttons && this.elements.buttons.play) {
+                    utils.removeElement(this.elements.buttons.play);
-                        Array.from(this.elements.buttons.play).forEach(button => utils.removeElement(button));
-                    }
-
-                    // Remove others
                     utils.removeElement(this.elements.captions);
                     utils.removeElement(this.elements.controls);
                     utils.removeElement(this.elements.wrapper);
@@ -1123,6 +1090,9 @@ class Plyr {
                     callback();
                 }
             } else {
+                // Unbind listeners
+                this.listeners.clear();
+
                 // Replace the container with the original element provided
                 utils.replaceElement(this.elements.original, this.elements.container);
 
@@ -1134,15 +1104,27 @@ class Plyr {
                     callback.call(this.elements.original);
                 }
 
-                // Clear for GC
+                // Reset state
+                this.ready = false;
+
+                // Clear for garbage collection
+                setTimeout(() => {
                     this.elements = null;
+                    this.media = null;
+                }, 200);
             }
         };
 
+        // Stop playback
+        this.stop();
+
         // Type specific stuff
         switch (`${this.provider}:${this.type}`) {
             case 'html5:video':
             case 'html5:audio':
+                // Clear timeout
+                clearTimeout(this.timers.loading);
+
                 // Restore native video controls
                 ui.toggleNativeControls.call(this, true);
 
@@ -1153,11 +1135,11 @@ class Plyr {
 
             case 'youtube:video':
                 // Clear timers
-                window.clearInterval(this.timers.buffering);
+                clearInterval(this.timers.buffering);
-                window.clearInterval(this.timers.playing);
+                clearInterval(this.timers.playing);
 
                 // Destroy YouTube API
-                if (this.embed !== null) {
+                if (this.embed !== null && utils.is.function(this.embed.destroy)) {
                     this.embed.destroy();
                 }
 
@@ -1174,7 +1156,7 @@ class Plyr {
                 }
 
                 // Vimeo does not always return
-                window.setTimeout(done, 200);
+                setTimeout(done, 200);
 
                 break;
 

src/js/plyr.polyfilled.js

@@ -0,0 +1,14 @@
+// ==========================================================================
+// Plyr Polyfilled Build
+// plyr.js v3.0.2
+// https://github.com/sampotts/plyr
+// License: The MIT License (MIT)
+// ==========================================================================
+
+import 'babel-polyfill';
+
+import 'custom-event-polyfill';
+
+import Plyr from './plyr';
+
+export default Plyr;

src/js/source.js

@@ -136,6 +136,9 @@ const source = {
                     // Setup interface
                     ui.build.call(this);
                 }
+
+                // Update the fullscreen support
+                this.fullscreen.update();
             },
             true,
         );

src/js/storage.js

@@ -12,6 +12,7 @@ class Storage {
 
     // Check for actual support (see if we can use it)
     static get supported() {
+        try {
             if (!('localStorage' in window)) {
                 return false;
             }
@@ -20,9 +21,9 @@ class Storage {
 
             // Try to use it (it might be disabled, e.g. user is in private mode)
             // see: https://github.com/sampotts/plyr/issues/131
-        try {
             window.localStorage.setItem(test, test);
             window.localStorage.removeItem(test);
+
             return true;
         } catch (e) {
             return false;
@@ -30,9 +31,13 @@ class Storage {
     }
 
     get(key) {
+        if (!Storage.supported) {
+            return null;
+        }
+
         const store = window.localStorage.getItem(this.key);
 
-        if (!Storage.supported || utils.is.empty(store)) {
+        if (utils.is.empty(store)) {
             return null;
         }
 

src/js/support.js

@@ -30,13 +30,9 @@ const support = {
                 break;
 
             case 'youtube:video':
-                api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
-                break;
-
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && !browser.isIPhone;
+                ui = support.rangeInput && (!browser.isIPhone || playsInline);
                 break;
 
             default:

src/js/ui.js

@@ -5,8 +5,6 @@
 import utils from './utils';
 import captions from './captions';
 import controls from './controls';
-import fullscreen from './fullscreen';
-import listeners from './listeners';
 
 const ui = {
     addStyleHook() {
@@ -26,19 +24,13 @@ const ui = {
     // Setup the UI
     build() {
         // Re-attach media element listeners
-        // TODO: Use event bubbling
+        // TODO: Use event bubbling?
-        listeners.media.call(this);
+        this.listeners.media();
 
         // Don't setup interface if no support
         if (!this.supported.ui) {
             this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
 
-            // Remove controls
-            utils.removeElement.call(this, 'controls');
-
-            // Remove large play
-            utils.removeElement.call(this, 'buttons.play');
-
             // Restore native controls
             ui.toggleNativeControls.call(this, true);
 
@@ -52,7 +44,7 @@ const ui = {
             controls.inject.call(this);
 
             // Re-attach control listeners
-            listeners.controls.call(this);
+            this.listeners.controls();
         }
 
         // If there's no controls, bail
@@ -63,9 +55,6 @@ const ui = {
         // Remove native controls
         ui.toggleNativeControls.call(this);
 
-        // Setup fullscreen
-        fullscreen.setup.call(this);
-
         // Captions
         captions.setup.call(this);
 
@@ -94,7 +83,9 @@ const ui = {
         this.ready = true;
 
         // Ready event at end of execution stack
+        setTimeout(() => {
             utils.dispatchEvent.call(this, this.media, 'ready');
+        }, 0);
 
         // Set the title
         ui.setTitle.call(this);
@@ -142,10 +133,8 @@ const ui = {
         utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
         utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
 
-        // Set aria state
+        // Set ARIA state
-        if (utils.is.nodeList(this.elements.buttons.play)) {
+        utils.toggleState(this.elements.buttons.play, this.playing);
-            Array.from(this.elements.buttons.play).forEach(button => utils.toggleState(button, this.playing));
-        }
 
         // Toggle controls
         this.toggleControls(!this.playing);
@@ -266,21 +255,7 @@ const ui = {
                 // Check buffer status
                 case 'playing':
                 case 'progress':
-                    value = (() => {
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
-                        const { buffered } = this.media;
-
-                        if (buffered && buffered.length) {
-                            // HTML5
-                            return utils.getPercentage(buffered.end(0), this.duration);
-                        } else if (utils.is.number(buffered)) {
-                            // YouTube returns between 0 and 1
-                            return buffered * 100;
-                        }
-
-                        return 0;
-                    })();
-
-                    ui.setProgress.call(this, this.elements.display.buffer, value);
 
                     break;
 

src/js/utils.js

@@ -2,6 +2,8 @@
 // Plyr utils
 // ==========================================================================
 
+import loadjs from 'loadjs';
+
 import support from './support';
 import { providers } from './types';
 
@@ -83,7 +85,7 @@ const utils = {
 
     // Fetch wrapper
     // Using XHR to avoid issues with older browsers
-    fetch(url) {
+    fetch(url, responseType = 'text') {
         return new Promise((resolve, reject) => {
             try {
                 const request = new XMLHttpRequest();
@@ -94,11 +96,15 @@ const utils = {
                 }
 
                 request.addEventListener('load', () => {
+                    if (responseType === 'text') {
                         try {
                             resolve(JSON.parse(request.responseText));
                         } catch (e) {
                             resolve(request.responseText);
                         }
+                    } else {
+                        resolve(request.response);
+                    }
                 });
 
                 request.addEventListener('error', () => {
@@ -106,6 +112,10 @@ const utils = {
                 });
 
                 request.open('GET', url, true);
+
+                // Set the required response type
+                request.responseType = responseType;
+
                 request.send();
             } catch (e) {
                 reject(e);
@@ -114,55 +124,13 @@ const utils = {
     },
 
     // Load an external script
-    loadScript(url, callback, error) {
+    loadScript(url) {
-        const current = document.querySelector(`script[src="${url}"]`);
+        return new Promise((resolve, reject) => {
-
+            loadjs(url, {
-        // Check script is not already referenced, if so wait for load
+                success: resolve,
-        if (current !== null) {
+                error: reject,
-            current.callbacks = current.callbacks || [];
+            });
-            current.callbacks.push(callback);
+        });
-            return;
-        }
-
-        // Build the element
-        const element = document.createElement('script');
-
-        // Callback queue
-        element.callbacks = element.callbacks || [];
-        element.callbacks.push(callback);
-
-        // Error queue
-        element.errors = element.errors || [];
-        element.errors.push(error);
-
-        // Bind callback
-        if (utils.is.function(callback)) {
-            element.addEventListener(
-                'load',
-                event => {
-                    element.callbacks.forEach(cb => cb.call(null, event));
-                    element.callbacks = null;
-                },
-                false,
-            );
-        }
-
-        // Bind error handling
-        element.addEventListener(
-            'error',
-            event => {
-                element.errors.forEach(err => err.call(null, event));
-                element.errors = null;
-            },
-            false,
-        );
-
-        // Set the URL after binding callback
-        element.src = url;
-
-        // Inject
-        const first = document.getElementsByTagName('script')[0];
-        first.parentNode.insertBefore(element, first);
     },
 
     // Load an external SVG sprite
@@ -306,12 +274,15 @@ const utils = {
     // Remove an element
     removeElement(element) {
         if (!utils.is.element(element) || !utils.is.element(element.parentNode)) {
-            return null;
+            return;
+        }
+
+        if (utils.is.nodeList(element) || utils.is.array(element)) {
+            Array.from(element).forEach(utils.removeElement);
+            return;
         }
 
         element.parentNode.removeChild(element);
-
-        return element;
     },
 
     // Remove all child elements
@@ -525,17 +496,18 @@ const utils = {
     },
 
     // Trap focus inside container
-    trapFocus() {
+    trapFocus(element = null, toggle = false) {
+        if (!utils.is.element(element)) {
+            return;
+        }
+
         const focusable = utils.getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]');
         const first = focusable[0];
         const last = focusable[focusable.length - 1];
 
-        utils.on(
+        const trap = event => {
-            this.elements.container,
-            'keydown',
-            event => {
             // Bail if not tab key or not fullscreen
-                if (event.key !== 'Tab' || event.keyCode !== 9 || !this.fullscreen.active) {
+            if (event.key !== 'Tab' || event.keyCode !== 9) {
                 return;
             }
 
@@ -551,20 +523,24 @@ const utils = {
                 last.focus();
                 event.preventDefault();
             }
-            },
+        };
-            false,
+
-        );
+        if (toggle) {
+            utils.on(this.elements.container, 'keydown', trap, false);
+        } else {
+            utils.off(this.elements.container, 'keydown', trap, false);
+        }
     },
 
     // Toggle event listener
     toggleListener(elements, event, callback, toggle, passive, capture) {
-        // Bail if no elements
+        // Bail if no elemetns, event, or callback
-        if (utils.is.nullOrUndefined(elements)) {
+        if (utils.is.empty(elements) || utils.is.empty(event) || !utils.is.function(callback)) {
             return;
         }
 
         // If a nodelist is passed, call itself on each node
-        if (utils.is.nodeList(elements)) {
+        if (utils.is.nodeList(elements) || utils.is.array(elements)) {
             // Create listener for each node
             Array.from(elements).forEach(element => {
                 if (element instanceof Node) {
@@ -611,7 +587,7 @@ const utils = {
     // Trigger event
     dispatchEvent(element, type, bubbles, detail) {
         // Bail if no element
-        if (!element || !type) {
+        if (!utils.is.element(element) || !utils.is.string(type)) {
             return;
         }
 
@@ -630,6 +606,12 @@ const utils = {
     // Toggle aria-pressed state on a toggle button
     // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
     toggleState(element, input) {
+        // If multiple elements passed
+        if (utils.is.array(element) || utils.is.nodeList(element)) {
+            Array.from(element).forEach(target => utils.toggleState(target, input));
+            return;
+        }
+
         // Bail if no target
         if (!utils.is.element(element)) {
             return;
@@ -648,6 +630,7 @@ const utils = {
         if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
             return 0;
         }
+
         return (current / max * 100).toFixed(2);
     },
 
@@ -831,7 +814,7 @@ const utils = {
 
     // Force repaint of element
     repaint(element) {
-        window.setTimeout(() => {
+        setTimeout(() => {
             utils.toggleHidden(element, true);
             element.offsetHeight; // eslint-disable-line
             utils.toggleHidden(element, false);

src/sass/base.scss

@@ -8,6 +8,7 @@
 
     direction: ltr;
     font-family: $plyr-font-family;
+    font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: $plyr-font-weight-regular;
     line-height: $plyr-line-height;
     max-width: 100%;

src/sass/components/badges.scss

@@ -3,9 +3,9 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    background: $plyr-menu-color;
+    background: $plyr-badge-bg;
     border-radius: 2px;
-    color: $plyr-menu-bg;
+    color: $plyr-badge-color;
     font-size: $plyr-font-size-badge;
     line-height: 1;
     padding: 3px 4px;

src/sass/components/menus.scss

@@ -59,6 +59,14 @@
             margin: 0;
             overflow: hidden;
             padding: $plyr-control-padding;
+
+            li {
+                margin-top: 2px;
+
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
         }
 
         // Options

src/sass/plugins/ads.scss

@@ -1,16 +1,27 @@
 // ==========================================================================
-// Advertisments
+// Advertisements
 // ==========================================================================
 
 .plyr__ads {
+    border-radius: inherit;
     bottom: 0;
     cursor: pointer;
     left: 0;
+    overflow: hidden;
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 3; // Above the controls
+    z-index: -1; // Hide it by default
 
+    // Make sure the inner container is big enough for the ad creative.
+    > div,
+    > div iframe {
+        height: 100%;
+        position: absolute;
+        width: 100%;
+    }
+
+    // The countdown label
     &::after {
         background: rgba($plyr-color-gunmetal, 0.8);
         border-radius: 2px;

src/sass/plyr.scss

@@ -10,6 +10,7 @@
 @import 'settings/cosmetics';
 @import 'settings/type';
 
+@import 'settings/badges';
 @import 'settings/captions';
 @import 'settings/controls';
 @import 'settings/helpers';

src/sass/settings/badges.scss

@@ -0,0 +1,6 @@
+// ==========================================================================
+// Badges
+// ==========================================================================
+
+$plyr-badge-bg: $plyr-color-fiord !default;
+$plyr-badge-color: #fff !default;