Event listener fixes, loadScript promise, ads tweaks

demo/dist/demo.js

@@ -55,7 +55,8 @@ document.addEventListener('DOMContentLoaded', function () {
             google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
         },
         ads: {
-            enabled: true
+            enabled: true,
+            publisherId: 'plyrio'
         }
     });
 

demo/dist/demo.min.js

@@ -1,2 +1,2 @@
-!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="https://www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
+!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0,publisherId:"plyrio"}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="https://www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
 //# sourceMappingURL=demo.min.js.map

demo/index.html

@@ -66,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>

demo/src/js/demo.js

@@ -53,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => {
         },
         ads: {
             enabled: true,
+            publisherId: 'plyrio',
         },
     });
 

src/js/controls.js

@@ -752,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)) {

src/js/defaults.js

@@ -373,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: null,
     },
 };
 

src/js/listeners.js

@@ -10,192 +10,209 @@ 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 pressed = event.type === 'keydown';
-            const repeat = pressed && code === last;
+        const repeat = pressed && code === this.lastKey;
 
-            // Bail if a modifier key is set
+        // Bail if a modifier key is set
-            if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-                return;
+            return;
-            }
+        }
 
-            // If the event is bubbled from the media element
+        // If the event is bubbled from the media element
-            // Firefox doesn't get the keycode for whatever reason
+        // Firefox doesn't get the keycode for whatever reason
-            if (!utils.is.number(code)) {
+        if (!utils.is.number(code)) {
-                return;
+            return;
-            }
+        }
 
-            // Seek by the number keys
+        // Seek by the number keys
-            const seekByKey = () => {
+        const seekByKey = () => {
-                // Divide the max duration into 10th's and times by the number value
+            // 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
-            // Reset on keyup
-            if (pressed) {
-                // Which keycodes should we prevent default
-                const preventDefault = [
-                    48,
-                    49,
-                    50,
-                    51,
-                    52,
-                    53,
-                    54,
-                    56,
-                    57,
-                    32,
-                    75,
-                    38,
-                    40,
-                    77,
-                    39,
-                    37,
-                    70,
-                    67,
-                    73,
-                    76,
-                    79,
-                ];
-
-                // Check focused element
-                // 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)) {
-                    return;
-                }
-
-                // If the code is found prevent default (e.g. prevent scrolling for arrows)
-                if (preventDefault.includes(code)) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-
-                switch (code) {
-                    case 48:
-                    case 49:
-                    case 50:
-                    case 51:
-                    case 52:
-                    case 53:
-                    case 54:
-                    case 55:
-                    case 56:
-                    case 57:
-                        // 0-9
-                        if (!repeat) {
-                            seekByKey();
-                        }
-                        break;
-
-                    case 32:
-                    case 75:
-                        // Space and K key
-                        if (!repeat) {
-                            this.togglePlay();
-                        }
-                        break;
-
-                    case 38:
-                        // Arrow up
-                        this.increaseVolume(0.1);
-                        break;
-
-                    case 40:
-                        // Arrow down
-                        this.decreaseVolume(0.1);
-                        break;
-
-                    case 77:
-                        // M key
-                        if (!repeat) {
-                            this.muted = !this.muted;
-                        }
-                        break;
-
-                    case 39:
-                        // Arrow forward
-                        this.forward();
-                        break;
-
-                    case 37:
-                        // Arrow back
-                        this.rewind();
-                        break;
-
-                    case 70:
-                        // F key
-                        this.fullscreen.toggle();
-                        break;
-
-                    case 67:
-                        // C key
-                        if (!repeat) {
-                            this.toggleCaptions();
-                        }
-                        break;
-
-                    case 76:
-                        // L key
-                        this.loop = !this.loop;
-                        break;
-
-                    /* case 73:
-                        this.setLoop('start');
-                        break;
-
-                    case 76:
-                        this.setLoop();
-                        break;
-
-                    case 79:
-                        this.setLoop('end');
-                        break; */
-
-                    default:
-                        break;
-                }
-
-                // Escape is handle natively when in full screen
-                // So we only need to worry about non native
-                if (!this.fullscreen.enabled && this.fullscreen.active && code === 27) {
-                    this.fullscreen.toggle();
-                }
-
-                // Store last code for next cycle
-                last = code;
-            } else {
-                last = null;
-            }
         };
 
+        // Handle the key on keydown
+        // Reset on keyup
+        if (pressed) {
+            // Which keycodes should we prevent default
+            const preventDefault = [
+                48,
+                49,
+                50,
+                51,
+                52,
+                53,
+                54,
+                56,
+                57,
+                32,
+                75,
+                38,
+                40,
+                77,
+                39,
+                37,
+                70,
+                67,
+                73,
+                76,
+                79,
+            ];
+
+            // Check focused element
+            // 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.player.config.selectors.editable)) {
+                return;
+            }
+
+            // If the code is found prevent default (e.g. prevent scrolling for arrows)
+            if (preventDefault.includes(code)) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+
+            switch (code) {
+                case 48:
+                case 49:
+                case 50:
+                case 51:
+                case 52:
+                case 53:
+                case 54:
+                case 55:
+                case 56:
+                case 57:
+                    // 0-9
+                    if (!repeat) {
+                        seekByKey();
+                    }
+                    break;
+
+                case 32:
+                case 75:
+                    // Space and K key
+                    if (!repeat) {
+                        this.player.togglePlay();
+                    }
+                    break;
+
+                case 38:
+                    // Arrow up
+                    this.player.increaseVolume(0.1);
+                    break;
+
+                case 40:
+                    // Arrow down
+                    this.player.decreaseVolume(0.1);
+                    break;
+
+                case 77:
+                    // M key
+                    if (!repeat) {
+                        this.player.muted = !this.player.muted;
+                    }
+                    break;
+
+                case 39:
+                    // Arrow forward
+                    this.player.forward();
+                    break;
+
+                case 37:
+                    // Arrow back
+                    this.player.rewind();
+                    break;
+
+                case 70:
+                    // F key
+                    this.player.fullscreen.toggle();
+                    break;
+
+                case 67:
+                    // C key
+                    if (!repeat) {
+                        this.player.toggleCaptions();
+                    }
+                    break;
+
+                case 76:
+                    // L key
+                    this.player.loop = !this.player.loop;
+                    break;
+
+                /* case 73:
+                    this.setLoop('start');
+                    break;
+
+                case 76:
+                    this.setLoop();
+                    break;
+
+                case 79:
+                    this.setLoop('end');
+                    break; */
+
+                default:
+                    break;
+            }
+
+            // Escape is handle natively when in full screen
+            // So we only need to worry about non native
+            if (!this.player.fullscreen.enabled && this.player.fullscreen.active && code === 27) {
+                this.player.fullscreen.toggle();
+            }
+
+            // Store last code for next cycle
+            this.lastKey = code;
+        } else {
+            this.lastKey = null;
+        }
+    }
+
+    // Toggle menu
+    toggleMenu(event) {
+        controls.toggleMenu.call(this.player, event);
+    }
+
+    // Global window & document listeners
+    global(toggle) {
         // 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;
             }
@@ -203,65 +220,65 @@ const listeners = {
             // Delay the adding of classname until the focus has changed
             // This event fires before the focusin event
             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);
             });
         }
-    },
+    }
 
     // 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, '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)) {
@@ -271,25 +288,25 @@ 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();
@@ -299,50 +316,50 @@ const listeners = {
         }
 
         // 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 => {
@@ -350,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() {
@@ -364,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.fullscreen.toggle();
+                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', () => {
@@ -546,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;
                         }
                     }
@@ -557,22 +569,22 @@ 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,
         );
-    },
+    }
-};
+}
 
-export default listeners;
+export default Listeners;

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,7 +16,8 @@ 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.elements = {
@@ -46,32 +31,32 @@ class Ads {
         this.safetyTimer = null;
         this.countdownTimer = null;
 
-        if (this.enabled) {
-            // 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.handleEventListeners('ERROR');
-                        this.player.debug.log('Ads error: Google IMA SDK failed to load');
-                    },
-                );
-            } else {
-                this.ready();
-            }
-        }
-
         // Setup a promise to resolve when the IMA manager is ready
         this.managerPromise = new Promise((resolve, reject) => {
             // The ad is pre-loaded and ready
             this.on('ADS_MANAGER_LOADED', resolve);
+
             // Ads failed
             this.on('ERROR', reject);
         });
+
+        if (this.enabled) {
+            // 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)
+                    .then(() => {
+                        this.ready();
+                    })
+                    .catch(() => {
+                        // Script failed to load or is blocked
+                        this.trigger('ERROR');
+                        this.player.debug.error('Google IMA SDK failed to load');
+                    });
+            } else {
+                this.ready();
+            }
+        }
     }
 
     /**
@@ -94,6 +79,23 @@ class Ads {
         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.
@@ -139,7 +141,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
@@ -153,7 +155,7 @@ class Ads {
 
             this.loader.requestAds(request);
 
-            this.handleEventListeners('ADS_LOADER_LOADED');
+            this.trigger('ADS_LOADER_LOADED');
         } catch (e) {
             this.onAdError(e);
         }
@@ -171,7 +173,7 @@ class Ads {
         }
 
         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.advertisement} - ${time}`;
             this.elements.container.setAttribute('data-badge-text', label);
         };
@@ -232,7 +234,7 @@ class Ads {
         });
 
         // Resolve our adsManager
-        this.handleEventListeners('ADS_MANAGER_LOADED');
+        this.trigger('ADS_MANAGER_LOADED');
     }
 
     /**
@@ -257,7 +259,7 @@ class Ads {
             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');
@@ -278,7 +280,7 @@ 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');
+                this.trigger('ALL_ADS_COMPLETED');
 
                 // Fire event
                 dispatchEvent('allcomplete');
@@ -313,7 +315,7 @@ 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');
+                this.trigger('CONTENT_PAUSE_REQUESTED');
 
                 dispatchEvent('contentpause');
 
@@ -326,7 +328,7 @@ 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');
+                this.trigger('CONTENT_RESUME_REQUESTED');
 
                 dispatchEvent('contentresume');
 
@@ -462,7 +464,7 @@ class Ads {
      */
     pauseContent() {
         // Show the advertisement container
-        this.elements.container.style.zIndex = '3';
+        this.elements.container.style.zIndex = 3;
 
         // Ad is playing.
         this.playing = true;
@@ -484,7 +486,7 @@ class Ads {
         }
 
         // Tell our instance that we're done for now
-        this.handleEventListeners('ERROR');
+        this.trigger('ERROR');
 
         // Re-create our adsManager
         this.loadAds();
@@ -516,9 +518,15 @@ class Ads {
      * Handles callbacks after an ad event was invoked
      * @param {string} event - Event type
      */
-    handleEventListeners(event) {
+    trigger(event) {
-        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.call(this);
+                }
+            });
         }
     }
 
@@ -529,7 +537,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;
     }
 

src/js/plugins/vimeo.js

@@ -16,9 +16,14 @@ const vimeo = {
 
         // Load the API if not already
         if (!utils.is.object(window.Vimeo)) {
-            utils.loadScript(this.config.urls.vimeo.api, () => {
+            utils
-                vimeo.ready.call(this);
+                .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);
         }

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...

src/js/plyr.js

@@ -12,12 +12,12 @@ 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 listeners from './listeners';
 import media from './media';
 import source from './source';
 import ui from './ui';
@@ -235,6 +235,9 @@ class Plyr {
             return;
         }
 
+        // Create listeners
+        this.listeners = new Listeners(this);
+
         // Setup local storage for user settings
         this.storage = new Storage(this);
 
@@ -250,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);
 
@@ -272,6 +272,12 @@ class Plyr {
             ui.build.call(this);
         }
 
+        // Container listeners
+        this.listeners.container();
+
+        // Global listeners
+        this.listeners.global(true);
+
         // Setup fullscreen
         this.fullscreen = new Fullscreen(this);
 
@@ -309,15 +315,12 @@ class Plyr {
      * Play the media, or play the advertisement (if they are not blocked)
      */
     play() {
-        // Return the promise (for HTML5)
+        // If ads are enabled, wait for them first
         if (this.ads.enabled && !this.ads.initialized) {
-            return this.ads.managerPromise.then(() => {
+            return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
-                this.ads.play();
-            }).catch(() => {
-                this.media.play();
-            });
         }
 
+        // Return the promise (for HTML5)
         return this.media.play();
     }
 
@@ -1057,6 +1060,9 @@ class Plyr {
                 // Replace the container with the original element provided
                 utils.replaceElement(this.elements.original, this.elements.container);
 
+                // Unbind global listeners
+                this.listeners.global(false);
+
                 // Event
                 utils.dispatchEvent.call(this, this.elements.original, 'destroyed', true);
 

src/js/ui.js

@@ -26,7 +26,7 @@ const ui = {
     build() {
         // Re-attach media element listeners
         // TODO: Use event bubbling
-        listeners.media.call(this);
+        this.listeners.media();
 
         // Don't setup interface if no support
         if (!this.supported.ui) {
@@ -45,7 +45,7 @@ const ui = {
             controls.inject.call(this);
 
             // Re-attach control listeners
-            listeners.controls.call(this);
+            this.listeners.controls();
         }
 
         // If there's no controls, bail

src/js/utils.js

@@ -123,29 +123,29 @@ const utils = {
     },
 
     // Load an external script
-    loadScript(url, callback, error) {
+    loadScript(url) {
-        const current = document.querySelector(`script[src="${url}"]`);
+        return new Promise((resolve, reject) => {
+            const current = document.querySelector(`script[src="${url}"]`);
 
-        // Check script is not already referenced, if so wait for load
+            // Check script is not already referenced, if so wait for load
-        if (current !== null) {
+            if (current !== null) {
-            current.callbacks = current.callbacks || [];
+                current.callbacks = current.callbacks || [];
-            current.callbacks.push(callback);
+                current.callbacks.push(resolve);
-            return;
+                return;
-        }
+            }
 
-        // Build the element
+            // Build the element
-        const element = document.createElement('script');
+            const element = document.createElement('script');
 
-        // Callback queue
+            // Callback queue
-        element.callbacks = element.callbacks || [];
+            element.callbacks = element.callbacks || [];
-        element.callbacks.push(callback);
+            element.callbacks.push(resolve);
 
-        // Error queue
+            // Error queue
-        element.errors = element.errors || [];
+            element.errors = element.errors || [];
-        element.errors.push(error);
+            element.errors.push(reject);
 
-        // Bind callback
+            // Bind callback
-        if (utils.is.function(callback)) {
             element.addEventListener(
                 'load',
                 event => {
@@ -154,24 +154,24 @@ const utils = {
                 },
                 false,
             );
-        }
 
-        // Bind error handling
+            // Bind error handling
-        element.addEventListener(
+            element.addEventListener(
-            'error',
+                'error',
-            event => {
+                event => {
-                element.errors.forEach(err => err.call(null, event));
+                    element.errors.forEach(err => err.call(null, event));
-                element.errors = null;
+                    element.errors = null;
-            },
+                },
-            false,
+                false,
-        );
+            );
 
-        // Set the URL after binding callback
+            // Set the URL after binding callback
-        element.src = url;
+            element.src = url;
 
-        // Inject
+            // Inject
-        const first = document.getElementsByTagName('script')[0];
+            const first = document.getElementsByTagName('script')[0];
-        first.parentNode.insertBefore(element, first);
+            first.parentNode.insertBefore(element, first);
+        });
     },
 
     // Load an external SVG sprite