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

Tweaks

Browse Source
This commit is contained in:
Sam Potts 2019-01-26 22:45:47 +11:00
parent dc54eba8f8
commit 1d51b28701
16 changed files with 149 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/src/js/demo.js
View File

@ -85,9 +85,6 @@ import Raven from 'raven-js';
'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
],
},
vimeo: {
transparent: true,
},
});
// Expose for tinkering in the console

80
dist/plyr.js vendored
View File

@ -303,20 +303,22 @@ typeof navigator === "object" && (function (global, factory) {
} // Bind once-only event handler
function once(element) {
var _this2 = this;
var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var callback = arguments.length > 2 ? arguments[2] : undefined;
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
function onceCallback() {
var onceCallback = function onceCallback() {
off(element, events, onceCallback, passive, capture);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
callback.apply(this, args);
}
callback.apply(_this2, args);
};
toggleListener.call(this, element, events, onceCallback, true, passive, capture);
} // Trigger event
@ -356,10 +358,10 @@ typeof navigator === "object" && (function (global, factory) {
} // Run method when / if player is ready
function ready() {
var _this2 = this;
var _this3 = this;
return new Promise(function (resolve) {
return _this2.ready ? setTimeout(resolve, 0) : on.call(_this2, _this2.elements.container, 'ready', resolve);
return _this3.ready ? setTimeout(resolve, 0) : on.call(_this3, _this3.elements.container, 'ready', resolve);
}).then(function () {});
}
@ -3469,12 +3471,31 @@ typeof navigator === "object" && (function (global, factory) {
publisherId: '',
tagUrl: ''
},
// YouTube nocookies mode
noCookie: false,
// Preview Thumbnails plugin
previewThumbnails: {
enabled: false,
src: ''
},
// Vimeo plugin
vimeo: {
byline: false,
portrait: false,
title: false,
speed: true,
transparent: false
},
// YouTube plugin
youtube: {
noCookie: false,
// Whether to use an alternative version of YouTube without cookies
rel: 0,
// No related vids
showinfo: 0,
// Hide info
iv_load_policy: 3,
// Hide annotations
modestbranding: 1 // Hide logos as much as possible (they still show one in the corner when paused)
}
};
@ -5214,21 +5235,16 @@ typeof navigator === "object" && (function (global, factory) {
ready: function ready$$1() {
var _this2 = this;
var player = this; // Get Vimeo params for the iframe
var player = this;
var config = player.config.vimeo; // Get Vimeo params for the iframe
var options = {
var params = buildUrlParams(extend({}, {
loop: player.config.loop.active,
autoplay: player.autoplay,
muted: player.muted,
byline: false,
portrait: false,
title: false,
speed: true,
transparent: 0,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative
};
var params = buildUrlParams(options); // Get the source URL or ID
}, config)); // Get the source URL or ID
var source = player.media.getAttribute('src'); // Get from <div> if needed
@ -5642,38 +5658,30 @@ typeof navigator === "object" && (function (global, factory) {
if (!posterSrc.includes('maxres')) {
player.elements.poster.style.backgroundSize = 'cover';
}
}).catch(function () {}); // Setup instance
}).catch(function () {});
var config = player.config.youtube; // Setup instance
// https://developers.google.com/youtube/iframe_api_reference
player.embed = new window.YT.Player(id, {
videoId: videoId,
host: player.config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
playerVars: {
host: config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
playerVars: extend({}, {
autoplay: player.config.autoplay ? 1 : 0,
// Autoplay
hl: player.config.hl,
// iframe interface language
controls: player.supported.ui ? 0 : 1,
// Only show controls if not fully supported
rel: 0,
// No related vids
showinfo: 0,
// Hide info
iv_load_policy: 3,
// Hide annotations
modestbranding: 1,
// Hide logos as much as possible (they still show one in the corner when paused)
disablekb: 1,
// Disable keyboard as we handle it
playsinline: 1,
playsinline: !player.config.fullscreen.iosNative ? 1 : 0,
// Allow iOS inline playback
// Tracking for stats
// origin: window ? `${window.location.protocol}//${window.location.host}` : null,
widget_referrer: window ? window.location.href : null,
// Captions are flaky on YouTube
cc_load_policy: player.captions.active ? 1 : 0,
cc_lang_pref: player.config.captions.language
},
cc_lang_pref: player.config.captions.language,
// Tracking for stats
widget_referrer: window ? window.location.href : null
}, config),
events: {
onError: function onError(event) {
// YouTube may fire onError twice, so only handle it once
@ -6801,8 +6809,8 @@ typeof navigator === "object" && (function (global, factory) {
}); // Show scrubbing preview
on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) {
// Only act on left mouse button (0), or touch device (!event.button)
if (!event.button || event.button === 0) {
// Only act on left mouse button (0), or touch device (event.button is false)
if (event.button === false || event.button === 0) {
_this4.mouseDown = true; // Wait until media has a duration
if (_this4.player.media.duration) {
@ -7502,7 +7510,7 @@ typeof navigator === "object" && (function (global, factory) {
if (this.isYouTube) {
this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
} else {
this.config.playsinline = true;
}

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

80
dist/plyr.polyfilled.js vendored
View File

@ -3321,20 +3321,22 @@ typeof navigator === "object" && (function (global, factory) {
} // Bind once-only event handler
function once(element) {
var _this2 = this;
var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var callback = arguments.length > 2 ? arguments[2] : undefined;
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
function onceCallback() {
var onceCallback = function onceCallback() {
off(element, events, onceCallback, passive, capture);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
callback.apply(this, args);
}
callback.apply(_this2, args);
};
toggleListener.call(this, element, events, onceCallback, true, passive, capture);
} // Trigger event
@ -3374,10 +3376,10 @@ typeof navigator === "object" && (function (global, factory) {
} // Run method when / if player is ready
function ready() {
var _this2 = this;
var _this3 = this;
return new Promise(function (resolve) {
return _this2.ready ? setTimeout(resolve, 0) : on.call(_this2, _this2.elements.container, 'ready', resolve);
return _this3.ready ? setTimeout(resolve, 0) : on.call(_this3, _this3.elements.container, 'ready', resolve);
}).then(function () {});
}
@ -6532,12 +6534,31 @@ typeof navigator === "object" && (function (global, factory) {
publisherId: '',
tagUrl: ''
},
// YouTube nocookies mode
noCookie: false,
// Preview Thumbnails plugin
previewThumbnails: {
enabled: false,
src: ''
},
// Vimeo plugin
vimeo: {
byline: false,
portrait: false,
title: false,
speed: true,
transparent: false
},
// YouTube plugin
youtube: {
noCookie: false,
// Whether to use an alternative version of YouTube without cookies
rel: 0,
// No related vids
showinfo: 0,
// Hide info
iv_load_policy: 3,
// Hide annotations
modestbranding: 1 // Hide logos as much as possible (they still show one in the corner when paused)
}
};
@ -8331,21 +8352,16 @@ typeof navigator === "object" && (function (global, factory) {
ready: function ready$$1() {
var _this2 = this;
var player = this; // Get Vimeo params for the iframe
var player = this;
var config = player.config.vimeo; // Get Vimeo params for the iframe
var options = {
var params = buildUrlParams(extend({}, {
loop: player.config.loop.active,
autoplay: player.autoplay,
muted: player.muted,
byline: false,
portrait: false,
title: false,
speed: true,
transparent: 0,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative
};
var params = buildUrlParams(options); // Get the source URL or ID
}, config)); // Get the source URL or ID
var source = player.media.getAttribute('src'); // Get from <div> if needed
@ -8757,38 +8773,30 @@ typeof navigator === "object" && (function (global, factory) {
if (!posterSrc.includes('maxres')) {
player.elements.poster.style.backgroundSize = 'cover';
}
}).catch(function () {}); // Setup instance
}).catch(function () {});
var config = player.config.youtube; // Setup instance
// https://developers.google.com/youtube/iframe_api_reference
player.embed = new window.YT.Player(id, {
videoId: videoId,
host: player.config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
playerVars: {
host: config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
playerVars: extend({}, {
autoplay: player.config.autoplay ? 1 : 0,
// Autoplay
hl: player.config.hl,
// iframe interface language
controls: player.supported.ui ? 0 : 1,
// Only show controls if not fully supported
rel: 0,
// No related vids
showinfo: 0,
// Hide info
iv_load_policy: 3,
// Hide annotations
modestbranding: 1,
// Hide logos as much as possible (they still show one in the corner when paused)
disablekb: 1,
// Disable keyboard as we handle it
playsinline: 1,
playsinline: !player.config.fullscreen.iosNative ? 1 : 0,
// Allow iOS inline playback
// Tracking for stats
// origin: window ? `${window.location.protocol}//${window.location.host}` : null,
widget_referrer: window ? window.location.href : null,
// Captions are flaky on YouTube
cc_load_policy: player.captions.active ? 1 : 0,
cc_lang_pref: player.config.captions.language
},
cc_lang_pref: player.config.captions.language,
// Tracking for stats
widget_referrer: window ? window.location.href : null
}, config),
events: {
onError: function onError(event) {
// YouTube may fire onError twice, so only handle it once
@ -9929,8 +9937,8 @@ typeof navigator === "object" && (function (global, factory) {
}); // Show scrubbing preview
on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) {
// Only act on left mouse button (0), or touch device (!event.button)
if (!event.button || event.button === 0) {
// Only act on left mouse button (0), or touch device (event.button is false)
if (event.button === false || event.button === 0) {
_this4.mouseDown = true; // Wait until media has a duration
if (_this4.player.media.duration) {
@ -10630,7 +10638,7 @@ typeof navigator === "object" && (function (global, factory) {
if (this.isYouTube) {
this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
} else {
this.config.playsinline = true;
}

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

6
readme.md
View File

@ -335,8 +335,10 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
| `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 advertisements. `publisherId`: Your unique [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) publisher ID. |
| `urls` | Object | See source. | If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button. |
| `vimeo` | Object | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }` | `byline`: Wheather to show the vimeo uploader. `portrait`: Wheather to show the vimeo portrait (avatar). `title`: Wheather to show the vimeo title. `speed`: Wheather to show speed controls. `transparent`: Makes the background transparent. Might be helpful to add your custom styles. |
| `previewThumbnails` | Object | `{ enabled: false, src: '' }` | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. |
| `vimeo` | Object | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }` | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline` |
| `youtube` | Object | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }` | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer` |
| `previewThumbnails` | Object | `{ enabled: false, src: '' }` | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. |
1. Vimeo only

12
src/js/config/defaults.js
View File

@ -407,9 +407,6 @@ const defaults = {
tagUrl: '',
},
// YouTube nocookies mode
noCookie: false,
// Preview Thumbnails plugin
previewThumbnails: {
enabled: false,
@ -424,6 +421,15 @@ const defaults = {
speed: true,
transparent: false,
},
// YouTube plugin
youtube: {
noCookie: false, // Whether to use an alternative version of YouTube without cookies
rel: 0, // No related vids
showinfo: 0, // Hide info
iv_load_policy: 3, // Hide annotations
modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)
},
};
export default defaults;

4
src/js/plugins/previewThumbnails.js
View File

@ -223,8 +223,8 @@ class PreviewThumbnails {
// Show scrubbing preview
on.call(this.player, this.player.elements.progress, 'mousedown touchstart', event => {
// Only act on left mouse button (0), or touch device (!event.button)
if (!event.button || event.button === 0) {
// Only act on left mouse button (0), or touch device (event.button is false)
if (event.button === false || event.button === 0) {
this.mouseDown = true;
// Wait until media has a duration
if (this.player.media.duration) {

28
src/js/plugins/vimeo.js
View File

@ -10,6 +10,7 @@ import { triggerEvent } from '../utils/events';
import fetch from '../utils/fetch';
import is from '../utils/is';
import loadScript from '../utils/loadScript';
import { extend } from '../utils/objects';
import { format, stripHTML } from '../utils/strings';
import { setAspectRatio } from '../utils/style';
import { buildUrlParams } from '../utils/urls';
@ -64,21 +65,22 @@ const vimeo = {
// API Ready
ready() {
const player = this;
const config = player.config.vimeo;
// Get Vimeo params for the iframe
const options = {
loop: player.config.loop.active,
autoplay: player.autoplay,
muted: player.muted,
byline: player.config.vimeo.byline,
portrait: player.config.vimeo.portrait,
title: player.config.vimeo.title,
speed: player.config.vimeo.speed,
transparent: player.config.vimeo.transparent === true ? 1 : 0,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative,
};
const params = buildUrlParams(options);
const params = buildUrlParams(
extend(
{},
{
loop: player.config.loop.active,
autoplay: player.autoplay,
muted: player.muted,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative,
},
config,
),
);
// Get the source URL or ID
let source = player.media.getAttribute('src');

40
src/js/plugins/youtube.js
View File

@ -9,6 +9,7 @@ import fetch from '../utils/fetch';
import is from '../utils/is';
import loadImage from '../utils/loadImage';
import loadScript from '../utils/loadScript';
import { extend } from '../utils/objects';
import { format, generateId } from '../utils/strings';
import { setAspectRatio } from '../utils/style';
@ -144,30 +145,29 @@ const youtube = {
})
.catch(() => {});
const config = player.config.youtube;
// Setup instance
// https://developers.google.com/youtube/iframe_api_reference
player.embed = new window.YT.Player(id, {
videoId,
host: player.config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
playerVars: {
autoplay: player.config.autoplay ? 1 : 0, // Autoplay
hl: player.config.hl, // iframe interface language
controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
rel: 0, // No related vids
showinfo: 0, // Hide info
iv_load_policy: 3, // Hide annotations
modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)
disablekb: 1, // Disable keyboard as we handle it
playsinline: 1, // Allow iOS inline playback
// Tracking for stats
// origin: window ? `${window.location.protocol}//${window.location.host}` : null,
widget_referrer: window ? window.location.href : null,
// Captions are flaky on YouTube
cc_load_policy: player.captions.active ? 1 : 0,
cc_lang_pref: player.config.captions.language,
},
host: config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
playerVars: extend(
{},
{
autoplay: player.config.autoplay ? 1 : 0, // Autoplay
hl: player.config.hl, // iframe interface language
controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
disablekb: 1, // Disable keyboard as we handle it
playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
// Captions are flaky on YouTube
cc_load_policy: player.captions.active ? 1 : 0,
cc_lang_pref: player.config.captions.language,
// Tracking for stats
widget_referrer: window ? window.location.href : null,
},
config,
),
events: {
onError(event) {
// YouTube may fire onError twice, so only handle it once

2
src/js/plyr.js
View File

@ -188,7 +188,7 @@ class Plyr {
// YouTube requires the playsinline in the URL
if (this.isYouTube) {
this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
} else {
this.config.playsinline = true;
}

8
src/js/utils/events.js
View File

@ -73,10 +73,10 @@ export function off(element, events = '', callback, passive = true, capture = fa
// Bind once-only event handler
export function once(element, events = '', callback, passive = true, capture = false) {
function onceCallback(...args) {
const onceCallback = (...args) => {
off(element, events, onceCallback, passive, capture);
callback.apply(this, args);
}
};
toggleListener.call(this, element, events, onceCallback, true, passive, capture);
}
@ -114,7 +114,7 @@ export function unbindListeners() {
// Run method when / if player is ready
export function ready() {
return new Promise(
resolve => (this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)),
return new Promise(resolve =>
this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),
).then(() => {});
}