ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added buffered getter

Browse Source
This commit is contained in:
Sam Potts 2018-03-17 23:27:40 +11:00
parent 5cb1628cd8
commit 5db73b1327
19 changed files with 7598 additions and 1092 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/dist/demo.js vendored
View File

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

2
demo/dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js vendored
View File

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

2
demo/dist/demo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
demo/src/js/demo.js
View File

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

85
dist/plyr.js vendored
View File

@ -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 () {
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);
ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
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',

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2738
dist/plyr.polyfilled.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/plyr.polyfilled.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

14
readme.md
View File

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

2
src/js/defaults.js
View File

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

59
src/js/plyr.js
View File

@ -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);
}
/**

16
src/js/ui.js
View File

@ -255,21 +255,7 @@ const ui = {
// Check buffer status
case 'playing':
case 'progress':
value = (() => {
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);
ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
break;

1
src/js/utils.js
View File

@ -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);
},

5753
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff