Added buffered getter

demo/dist/demo.js

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

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:"918848828995742"}});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/src/js/demo.js

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

dist/plyr.js

@@ -326,7 +326,7 @@ var defaults = {
     // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
         enabled: false,
-        publisherId: '918848828995742'
+        publisherId: ''
     }
 };
 
@@ -1260,6 +1260,7 @@ var utils = {
         if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
             return 0;
         }
+
         return (current / max * 100).toFixed(2);
     },
 
@@ -1485,7 +1486,6 @@ var utils = {
 // Plyr support checks
 // ==========================================================================
 
-// Check for feature support
 var support = {
     // Basic support
     audio: 'canPlayType' in document.createElement('audio'),
@@ -2394,8 +2394,6 @@ var ui = {
 
     // Update <progress> elements
     updateProgress: function updateProgress(event) {
-        var _this4 = this;
-
         if (!this.supported.ui || !utils.is.event(event)) {
             return;
         }
@@ -2419,22 +2417,7 @@ var ui = {
                 // Check buffer status
                 case 'playing':
                 case 'progress':
-                    value = function () {
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
-                        var buffered = _this4.media.buffered;
-
-
-                        if (buffered && buffered.length) {
-                            // HTML5
-                            return utils.getPercentage(buffered.end(0), _this4.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;
 
@@ -2510,7 +2493,6 @@ var ui = {
 // Plyr controls
 // ==========================================================================
 
-// Sniff out the browser
 var browser$2 = utils.getBrowser();
 
 var controls = {
@@ -3708,7 +3690,6 @@ var controls = {
 // Plyr Event Listeners
 // ==========================================================================
 
-// Sniff out the browser
 var browser$1 = utils.getBrowser();
 
 var Listeners = function () {
@@ -5797,7 +5778,6 @@ var vimeo = {
 // Plyr Media
 // ==========================================================================
 
-// Sniff out the browser
 var browser$3 = utils.getBrowser();
 
 var media = {
@@ -6772,37 +6752,37 @@ var Plyr = function () {
     }, {
         key: 'isHTML5',
         get: function get$$1() {
-            return this.provider === providers.html5;
+            return Boolean(this.provider === providers.html5);
         }
     }, {
         key: 'isEmbed',
         get: function get$$1() {
-            return this.isYouTube || this.isVimeo;
+            return Boolean(this.isYouTube || this.isVimeo);
         }
     }, {
         key: 'isYouTube',
         get: function get$$1() {
-            return this.provider === providers.youtube;
+            return Boolean(this.provider === providers.youtube);
         }
     }, {
         key: 'isVimeo',
         get: function get$$1() {
-            return this.provider === providers.vimeo;
+            return Boolean(this.provider === providers.vimeo);
         }
     }, {
         key: 'isVideo',
         get: function get$$1() {
-            return this.type === types.video;
+            return Boolean(this.type === types.video);
         }
     }, {
         key: 'isAudio',
         get: function get$$1() {
-            return this.type === types.audio;
+            return Boolean(this.type === types.audio);
         }
     }, {
         key: 'paused',
         get: function get$$1() {
-            return this.media.paused;
+            return Boolean(this.media.paused);
         }
 
         /**
@@ -6812,7 +6792,7 @@ var Plyr = function () {
     }, {
         key: 'playing',
         get: function get$$1() {
-            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));
         }
 
         /**
@@ -6822,7 +6802,7 @@ var Plyr = function () {
     }, {
         key: 'ended',
         get: function get$$1() {
-            return this.media.ended;
+            return Boolean(this.media.ended);
         }
     }, {
         key: 'currentTime',
@@ -6855,6 +6835,31 @@ var Plyr = function () {
             return Number(this.media.currentTime);
         }
 
+        /**
+         * Get buffered
+         */
+
+    }, {
+        key: 'buffered',
+        get: function get$$1() {
+            var buffered = this.media.buffered;
+
+            // 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
          */
@@ -6862,7 +6867,7 @@ var Plyr = function () {
     }, {
         key: 'seeking',
         get: function get$$1() {
-            return this.media.seeking;
+            return Boolean(this.media.seeking);
         }
 
         /**
@@ -6934,7 +6939,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.volume;
+            return Number(this.media.volume);
         }
     }, {
         key: 'muted',
@@ -6963,7 +6968,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.muted;
+            return Boolean(this.media.muted);
         }
 
         /**
@@ -6983,12 +6988,12 @@ var Plyr = function () {
             }
 
             // 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)
          */
 
     }, {
@@ -7033,7 +7038,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.playbackRate;
+            return Number(this.media.playbackRate);
         }
 
         /**
@@ -7136,7 +7141,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.loop;
+            return Boolean(this.media.loop);
         }
 
         /**
@@ -7205,7 +7210,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.config.autoplay;
+            return Boolean(this.config.autoplay);
         }
     }, {
         key: 'language',

readme.md

@@ -13,13 +13,13 @@ A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo medi
 ## 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
@@ -152,6 +152,16 @@ If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for t
 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.20/plyr.svg`.
 
+## Ads
+
+Plyr has partnered up with [ai.vi](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
 
 ### SASS
@@ -284,6 +294,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `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
 
@@ -366,6 +377,7 @@ player.fullscreen.active; // false;
 | `paused`             | ✓      | -      | Returns a boolean indicating if the current player is paused.                                                                                                                        |
 | `playing`            | ✓      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                       |
 | `ended`              | ✓      | -      | Returns a boolean indicating if the current player has finished playback.                                                                                                            |
+| `buffered`           | ✓      | -      | Returns a float between 0 and 1 indicating how much of the media is buffered                                                                                                         |
 | `currentTime`        | ✓      | ✓      | Gets or sets the currentTime for the player. The setter accepts a float in seconds.                                                                                                  |
 | `seeking`            | ✓      | -      | Returns a boolean indicating if the current player is seeking.                                                                                                                       |
 | `duration`           | ✓      | -      | Returns the duration for the current media.                                                                                                                                          |

src/js/defaults.js

@@ -376,7 +376,7 @@ const defaults = {
     // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
         enabled: false,
-        publisherId: '918848828995742',
+        publisherId: '',
     },
 };
 

src/js/plyr.js

@@ -293,22 +293,22 @@ 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);
     }
 
     /**
@@ -339,21 +339,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);
     }
 
     /**
@@ -434,11 +434,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);
     }
 
     /**
@@ -503,7 +524,7 @@ class Plyr {
      * Get the current player volume
      */
     get volume() {
-        return this.media.volume;
+        return Number(this.media.volume);
     }
 
     /**
@@ -552,7 +573,7 @@ class Plyr {
      * Get current muted state
      */
     get muted() {
-        return this.media.muted;
+        return Boolean(this.media.muted);
     }
 
     /**
@@ -569,12 +590,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;
@@ -615,7 +640,7 @@ class Plyr {
      * Get current playback speed
      */
     get speed() {
-        return this.media.playbackRate;
+        return Number(this.media.playbackRate);
     }
 
     /**
@@ -715,7 +740,7 @@ class Plyr {
      * Get current loop state
      */
     get loop() {
-        return this.media.loop;
+        return Boolean(this.media.loop);
     }
 
     /**
@@ -772,7 +797,7 @@ class Plyr {
      * Get the current autoplay state
      */
     get autoplay() {
-        return this.config.autoplay;
+        return Boolean(this.config.autoplay);
     }
 
     /**

src/js/ui.js

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

@@ -671,6 +671,7 @@ const utils = {
         if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
             return 0;
         }
+
         return (current / max * 100).toFixed(2);
     },