Compare commits

...

26 Commits

Author SHA1 Message Date
2c8a337f26 v3.4.7
-   Fix for Vimeo fullscreen with non native aspect ratios (fixes #854)
2018-11-08 23:34:10 +11:00
c24e52d97d Package updates 2018-11-08 23:29:54 +11:00
574f40949c Merge branch 'master' into develop 2018-11-08 23:19:57 +11:00
cf3848fbd5 Merge branch 'develop' of github.com:sampotts/plyr into develop 2018-11-08 23:19:26 +11:00
a19ad69038 Fix for Vimeo fullscreen with non 16:9 aspect ratios 2018-11-08 23:19:11 +11:00
d6f20e2756 Package upgrades 2018-11-08 23:18:23 +11:00
e2fc20ca76 Styling tweaks 2018-11-08 23:18:04 +11:00
37c3f7109d Additional listener for checking for audio tracks 2018-11-08 23:17:44 +11:00
99d5211a33 Merge pull request #1247 from danielcgold/patch-1
[Edit README] Halfhalftravel uses Plyr!
2018-11-06 10:17:55 +11:00
b97f143195 Halfhalftravel uses Plyr!
https://www.halfhalftravel.com/events/medellin-photo-walk.html
https://www.halfhalftravel.com/travel-guides/how-to-travel-to-santa-fe-de-antioquia-colombia.html
2018-11-05 10:57:23 -05:00
e8da4326b6 Prevent scroll on focus 2018-11-03 21:17:46 +11:00
67f908aa8d Load media after UI is built 2018-11-03 21:17:32 +11:00
65eb5c1b8b Fix support check 2018-11-03 21:16:40 +11:00
7d484c6e09 Merge pull request #1232 from tocsinde/patch-1
Readme: Add missing annotation to PIP support
2018-10-26 08:37:33 +11:00
8252e13eb9 Readme: Add missing annotation to PIP support
PIP only works on HTML videos, so I added the number of the (already existing) annotation.
2018-10-25 23:35:20 +02:00
1a9b860e68 v3.4.6
-   Added picture-in-picture support for Chrome 70+
-   Fixed issue with versioning the SVG sprite in the gulp build script
2018-10-25 09:44:40 +11:00
cede7d0f35 Fix gulp build 2018-10-25 09:21:37 +11:00
fe26d383f1 Added support for picture-in-picture in Chrome 2018-10-25 09:17:15 +11:00
df4bc268dc Merge branch 'master' into develop 2018-10-25 00:14:14 +11:00
67b7262764 Revert PR #1211 2018-10-24 23:00:54 +11:00
88528ef979 Merge pull request #1197 from TechGuard/fix-html5-quality-settings
Fix html5 quality settings
2018-10-24 22:39:34 +11:00
b6175b1ca9 Merge branch 'develop' into fix-html5-quality-settings 2018-10-24 22:39:10 +11:00
aa20ebaa9c Merge pull request #1211 from melbahja/develop
duration after changing video quality
2018-10-24 22:37:49 +11:00
06db3f702d Update plyr.js 2018-10-13 13:23:42 +01:00
a2a82a96a6 fix: continue with the current duration after changing video quality 2018-10-13 12:59:59 +01:00
a86bbae851 Only save quality setting when it's updated by the user. Fixes bug in html5 player where it would override the settings if the current video does not support the given quality. 2018-09-29 21:23:10 +02:00
29 changed files with 2694 additions and 1225 deletions

File diff suppressed because it is too large Load Diff

2
demo/dist/demo.css vendored

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,8 @@
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-light;
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
}
@font-face {
@ -33,7 +34,8 @@
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-bold;
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
}
@font-face {
@ -41,5 +43,6 @@
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-black;
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
}

View File

@ -11,6 +11,9 @@ $plyr-font-size-small: 12px;
$plyr-font-size-time: 11px;
$plyr-font-size-badges: 9px;
// Other
$plyr-font-smoothing: true;
// Captions
$plyr-font-size-captions-base: $plyr-font-size-base;
$plyr-font-size-captions-small: $plyr-font-size-small;

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

155
dist/plyr.js vendored
View File

@ -570,15 +570,12 @@ typeof navigator === "object" && (function (global, factory) {
} // Element matches selector
function matches(element, selector) {
var prototype = {
Element: Element
};
function match() {
return Array.from(document.querySelectorAll(selector)).includes(this);
}
var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
var matches = match;
return matches.call(element, selector);
} // Find all elements
@ -634,7 +631,9 @@ typeof navigator === "object" && (function (global, factory) {
} // Set regular focus
element.focus(); // If we want to mimic keyboard focus via tab
element.focus({
preventScroll: true
}); // If we want to mimic keyboard focus via tab
if (tabFocus) {
toggleClass(element, this.config.classNames.tabFocus);
@ -705,9 +704,25 @@ typeof navigator === "object" && (function (global, factory) {
};
},
// Picture-in-picture support
// Safari only currently
// Safari & Chrome only currently
pip: function () {
return !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode);
if (browser.isIPhone) {
return false;
} // Safari
// https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
if (is.function(createElement('video').webkitSetPresentationMode)) {
return true;
} // Chrome
// https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
return true;
}
return false;
}(),
// Airplay support
// Safari only currently
@ -723,26 +738,20 @@ typeof navigator === "object" && (function (global, factory) {
_inputType$split2 = _slicedToArray(_inputType$split, 1),
mediaType = _inputType$split2[0];
var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
if (!this.isHTML5 || mediaType !== this.type) {
return false;
}
} // Add codec if required
var type;
if (inputType && inputType.includes('codecs=')) {
// Use input directly
type = inputType;
} else if (inputType === 'audio/mpeg') {
// Skip codec
type = 'audio/mpeg;';
} else if (inputType in defaultCodecs) {
// Use codec
type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
if (Object.keys(defaultCodecs).includes(type)) {
type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
}
try {
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
} catch (err) {
} catch (e) {
return false;
}
},
@ -840,10 +849,6 @@ typeof navigator === "object" && (function (global, factory) {
triggerEvent.call(player, player.media, 'qualitychange', false, {
quality: input
}); // Save to storage
player.storage.set({
quality: input
});
}
});
@ -3180,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.3.12/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
// Quality default
@ -3444,6 +3449,14 @@ typeof navigator === "object" && (function (global, factory) {
}
};
// ==========================================================================
// Plyr states
// ==========================================================================
var pip = {
active: 'picture-in-picture',
inactive: 'inline'
};
// ==========================================================================
// Plyr supported types and providers
// ==========================================================================
@ -4295,7 +4308,7 @@ typeof navigator === "object" && (function (global, factory) {
}); // Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
on.call(player, player.media, 'canplay', function () {
on.call(player, player.media, 'canplay loadeddata', function () {
toggleHidden(elements.volume, !player.hasAudio);
toggleHidden(elements.buttons.mute, !player.hasAudio);
}); // Handle the media finishing
@ -4690,9 +4703,7 @@ typeof navigator === "object" && (function (global, factory) {
var loadjs_umd = createCommonjsModule(function (module, exports) {
(function(root, factory) {
if (typeof undefined === 'function' && undefined.amd) {
undefined([], factory);
} else {
{
module.exports = factory();
}
}(commonjsGlobal, function() {
@ -5049,12 +5060,13 @@ typeof navigator === "object" && (function (global, factory) {
// Set aspect ratio
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
setAspectRatio: function setAspectRatio(input) {
var _split = (is.string(input) ? input : this.config.ratio).split(':'),
_split2 = _slicedToArray(_split, 2),
x = _split2[0],
y = _split2[1];
var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number),
_split$map2 = _slicedToArray(_split$map, 2),
x = _split$map2[0],
y = _split$map2[1];
var padding = 100 / x * y;
vimeo.padding = padding;
this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
if (this.supported.ui) {
@ -5258,8 +5270,8 @@ typeof navigator === "object" && (function (global, factory) {
}); // Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
var ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(_this2, ratio);
vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(_this2, vimeo.ratio);
}); // Set autopause
player.embed.setAutopause(player.config.autopause).then(function (state) {
@ -5350,6 +5362,24 @@ typeof navigator === "object" && (function (global, factory) {
player.embed.on('error', function (detail) {
player.media.error = detail;
triggerEvent.call(player, player.media, 'error');
}); // Set height/width on fullscreen
player.on('enterfullscreen exitfullscreen', function (event) {
var target = player.fullscreen.target; // Ignore for iOS native
if (target !== player.elements.container) {
return;
}
var toggle = event.type === 'enterfullscreen';
var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
_vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
x = _vimeo$ratio$split$ma2[0],
y = _vimeo$ratio$split$ma2[1];
var dimension = x > y ? 'width' : 'height';
target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
}); // Rebuild UI
setTimeout(function () {
@ -6527,18 +6557,20 @@ typeof navigator === "object" && (function (global, factory) {
if (_this2.isHTML5) {
// Setup captions
if ('tracks' in input) {
if (Object.keys(input).includes('tracks')) {
source.insertElements.call(_this2, 'track', input.tracks);
} // Load HTML5 sources
_this2.media.load();
}
} // If HTML5 or embed but not fully supported, setupInterface and call ready now
if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
// Setup interface
ui.build.call(_this2);
}
if (_this2.isHTML5) {
// Load HTML5 sources
_this2.media.load();
} // Update the fullscreen support
@ -7429,17 +7461,26 @@ typeof navigator === "object" && (function (global, factory) {
}
var quality = [!is.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is.number);
var updateStorage = true;
if (!options.includes(quality)) {
var value = closest(options, quality);
this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
quality = value;
quality = value; // Don't update storage if quality is not supported
updateStorage = false;
} // Update config
config.selected = quality; // Set quality
this.media.quality = quality;
this.media.quality = quality; // Save to storage
if (updateStorage) {
this.storage.set({
quality: quality
});
}
}
/**
* Get current quality level
@ -7618,19 +7659,27 @@ typeof navigator === "object" && (function (global, factory) {
}, {
key: "pip",
set: function set(input) {
var states = {
pip: 'picture-in-picture',
inline: 'inline'
}; // Bail if no support
// Bail if no support
if (!support.pip) {
return;
} // Toggle based on current state if not passed
var toggle = is.boolean(input) ? input : this.pip === states.inline; // Toggle based on current state
var toggle = is.boolean(input) ? input : !this.pip; // Toggle based on current state
// Safari
this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
if (is.function(this.media.webkitSetPresentationMode)) {
this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
} // Chrome
if (is.function(this.media.requestPictureInPicture)) {
if (!this.pip && toggle) {
this.media.requestPictureInPicture();
} else if (this.pip && !toggle) {
document.exitPictureInPicture();
}
}
}
/**
* Get the current picture-in-picture state
@ -7639,9 +7688,15 @@ typeof navigator === "object" && (function (global, factory) {
get: function get() {
if (!support.pip) {
return null;
}
} // Safari
return this.media.webkitPresentationMode;
if (!is.empty(this.media.webkitPresentationMode)) {
return this.media.webkitPresentationMode === pip.active;
} // Chrome
return this.media === document.pictureInPictureElement;
}
}], [{
key: "supported",

2
dist/plyr.js.map vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1480,7 +1480,7 @@ typeof navigator === "object" && (function (global, factory) {
// Set @@toStringTag to native iterators
_setToStringTag(IteratorPrototype, TAG, true);
// fix for some old engines
if (typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
if (!_library && typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
}
}
// fix Array#{values, @@iterator}.name in V8 / FF
@ -1489,7 +1489,7 @@ typeof navigator === "object" && (function (global, factory) {
$default = function values() { return $native.call(this); };
}
// Define iterator
if (BUGGY || VALUES_BUG || !proto[ITERATOR$3]) {
if ((!_library || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR$3])) {
_hide(proto, ITERATOR$3, $default);
}
// Plug for library
@ -2650,7 +2650,7 @@ typeof navigator === "object" && (function (global, factory) {
return capability.promise;
}
});
_export(_export.S + _export.F * (!USE_NATIVE), PROMISE, {
_export(_export.S + _export.F * (_library || !USE_NATIVE), PROMISE, {
// 25.4.4.6 Promise.resolve(x)
resolve: function resolve(x) {
return _promiseResolve(_library && this === Wrapper ? $Promise : this, x);
@ -3195,15 +3195,12 @@ typeof navigator === "object" && (function (global, factory) {
} // Element matches selector
function matches(element, selector) {
var prototype = {
Element: Element
};
function match() {
return Array.from(document.querySelectorAll(selector)).includes(this);
}
var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
var matches = match;
return matches.call(element, selector);
} // Find all elements
@ -3259,7 +3256,9 @@ typeof navigator === "object" && (function (global, factory) {
} // Set regular focus
element.focus(); // If we want to mimic keyboard focus via tab
element.focus({
preventScroll: true
}); // If we want to mimic keyboard focus via tab
if (tabFocus) {
toggleClass(element, this.config.classNames.tabFocus);
@ -3329,9 +3328,25 @@ typeof navigator === "object" && (function (global, factory) {
};
},
// Picture-in-picture support
// Safari only currently
// Safari & Chrome only currently
pip: function () {
return !browser.isIPhone && is$1.function(createElement('video').webkitSetPresentationMode);
if (browser.isIPhone) {
return false;
} // Safari
// https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
if (is$1.function(createElement('video').webkitSetPresentationMode)) {
return true;
} // Chrome
// https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
return true;
}
return false;
}(),
// Airplay support
// Safari only currently
@ -3347,26 +3362,20 @@ typeof navigator === "object" && (function (global, factory) {
_inputType$split2 = _slicedToArray(_inputType$split, 1),
mediaType = _inputType$split2[0];
var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
if (!this.isHTML5 || mediaType !== this.type) {
return false;
}
} // Add codec if required
var type;
if (inputType && inputType.includes('codecs=')) {
// Use input directly
type = inputType;
} else if (inputType === 'audio/mpeg') {
// Skip codec
type = 'audio/mpeg;';
} else if (inputType in defaultCodecs) {
// Use codec
type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
if (Object.keys(defaultCodecs).includes(type)) {
type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
}
try {
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
} catch (err) {
} catch (e) {
return false;
}
},
@ -3463,10 +3472,6 @@ typeof navigator === "object" && (function (global, factory) {
triggerEvent.call(player, player.media, 'qualitychange', false, {
quality: input
}); // Save to storage
player.storage.set({
quality: input
});
}
});
@ -5843,7 +5848,7 @@ typeof navigator === "object" && (function (global, factory) {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.3.12/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
// Quality default
@ -6107,6 +6112,14 @@ typeof navigator === "object" && (function (global, factory) {
}
};
// ==========================================================================
// Plyr states
// ==========================================================================
var pip = {
active: 'picture-in-picture',
inactive: 'inline'
};
// ==========================================================================
// Plyr supported types and providers
// ==========================================================================
@ -6968,7 +6981,7 @@ typeof navigator === "object" && (function (global, factory) {
}); // Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
on.call(player, player.media, 'canplay', function () {
on.call(player, player.media, 'canplay loadeddata', function () {
toggleHidden(elements.volume, !player.hasAudio);
toggleHidden(elements.buttons.mute, !player.hasAudio);
}); // Handle the media finishing
@ -7384,9 +7397,7 @@ typeof navigator === "object" && (function (global, factory) {
var loadjs_umd = createCommonjsModule(function (module, exports) {
(function(root, factory) {
if (typeof undefined === 'function' && undefined.amd) {
undefined([], factory);
} else {
{
module.exports = factory();
}
}(commonjsGlobal, function() {
@ -7742,12 +7753,13 @@ typeof navigator === "object" && (function (global, factory) {
// Set aspect ratio
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
setAspectRatio: function setAspectRatio(input) {
var _split = (is$1.string(input) ? input : this.config.ratio).split(':'),
_split2 = _slicedToArray(_split, 2),
x = _split2[0],
y = _split2[1];
var _split$map = (is$1.string(input) ? input : this.config.ratio).split(':').map(Number),
_split$map2 = _slicedToArray(_split$map, 2),
x = _split$map2[0],
y = _split$map2[1];
var padding = 100 / x * y;
vimeo.padding = padding;
this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
if (this.supported.ui) {
@ -7951,8 +7963,8 @@ typeof navigator === "object" && (function (global, factory) {
}); // Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
var ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(_this2, ratio);
vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(_this2, vimeo.ratio);
}); // Set autopause
player.embed.setAutopause(player.config.autopause).then(function (state) {
@ -8043,6 +8055,24 @@ typeof navigator === "object" && (function (global, factory) {
player.embed.on('error', function (detail) {
player.media.error = detail;
triggerEvent.call(player, player.media, 'error');
}); // Set height/width on fullscreen
player.on('enterfullscreen exitfullscreen', function (event) {
var target = player.fullscreen.target; // Ignore for iOS native
if (target !== player.elements.container) {
return;
}
var toggle = event.type === 'enterfullscreen';
var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
_vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
x = _vimeo$ratio$split$ma2[0],
y = _vimeo$ratio$split$ma2[1];
var dimension = x > y ? 'width' : 'height';
target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
}); // Rebuild UI
setTimeout(function () {
@ -9217,18 +9247,20 @@ typeof navigator === "object" && (function (global, factory) {
if (_this2.isHTML5) {
// Setup captions
if ('tracks' in input) {
if (Object.keys(input).includes('tracks')) {
source.insertElements.call(_this2, 'track', input.tracks);
} // Load HTML5 sources
_this2.media.load();
}
} // If HTML5 or embed but not fully supported, setupInterface and call ready now
if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
// Setup interface
ui.build.call(_this2);
}
if (_this2.isHTML5) {
// Load HTML5 sources
_this2.media.load();
} // Update the fullscreen support
@ -10119,17 +10151,26 @@ typeof navigator === "object" && (function (global, factory) {
}
var quality = [!is$1.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is$1.number);
var updateStorage = true;
if (!options.includes(quality)) {
var value = closest(options, quality);
this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
quality = value;
quality = value; // Don't update storage if quality is not supported
updateStorage = false;
} // Update config
config.selected = quality; // Set quality
this.media.quality = quality;
this.media.quality = quality; // Save to storage
if (updateStorage) {
this.storage.set({
quality: quality
});
}
}
/**
* Get current quality level
@ -10308,19 +10349,27 @@ typeof navigator === "object" && (function (global, factory) {
}, {
key: "pip",
set: function set(input) {
var states = {
pip: 'picture-in-picture',
inline: 'inline'
}; // Bail if no support
// Bail if no support
if (!support.pip) {
return;
} // Toggle based on current state if not passed
var toggle = is$1.boolean(input) ? input : this.pip === states.inline; // Toggle based on current state
var toggle = is$1.boolean(input) ? input : !this.pip; // Toggle based on current state
// Safari
this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
if (is$1.function(this.media.webkitSetPresentationMode)) {
this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
} // Chrome
if (is$1.function(this.media.requestPictureInPicture)) {
if (!this.pip && toggle) {
this.media.requestPictureInPicture();
} else if (this.pip && !toggle) {
document.exitPictureInPicture();
}
}
}
/**
* Get the current picture-in-picture state
@ -10329,9 +10378,15 @@ typeof navigator === "object" && (function (global, factory) {
get: function get() {
if (!support.pip) {
return null;
}
} // Safari
return this.media.webkitPresentationMode;
if (!is$1.empty(this.media.webkitPresentationMode)) {
return this.media.webkitPresentationMode === pip.active;
} // Chrome
return this.media === document.pictureInPictureElement;
}
}], [{
key: "supported",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -12,7 +12,6 @@ const concat = require('gulp-concat');
const filter = require('gulp-filter');
const sass = require('gulp-sass');
const cleancss = require('gulp-clean-css');
const run = require('run-sequence');
const header = require('gulp-header');
const prefix = require('gulp-autoprefixer');
const gitbranch = require('git-branch');
@ -106,13 +105,15 @@ const babelrc = (polyfill = false) => ({
});
// Clean out /dist
gulp.task('clean', () => {
gulp.task('clean', done => {
const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
// Don't delete the mp4
dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
del(dirs);
done();
});
const build = {
@ -201,31 +202,25 @@ build.sass(bundles.demo.sass, 'demo');
build.js(bundles.demo.js, 'demo', { format: 'iife' });
// Build all JS
gulp.task('js', () => {
run(tasks.js);
});
gulp.task('js', () => gulp.parallel(tasks.js));
// Watch for file changes
gulp.task('watch', () => {
// Plyr core
gulp.watch(paths.plyr.src.js, tasks.js);
gulp.watch(paths.plyr.src.sass, tasks.sass);
gulp.watch(paths.plyr.src.sprite, tasks.sprite);
gulp.watch(paths.plyr.src.js, gulp.parallel(tasks.js));
gulp.watch(paths.plyr.src.sass, gulp.parallel(tasks.sass));
gulp.watch(paths.plyr.src.sprite, gulp.parallel(tasks.sprite));
// Demo
gulp.watch(paths.demo.src.js, tasks.js);
gulp.watch(paths.demo.src.sass, tasks.sass);
gulp.watch(paths.demo.src.js, gulp.parallel(tasks.js));
gulp.watch(paths.demo.src.sass, gulp.parallel(tasks.sass));
});
// Build distribution
gulp.task('build', () => {
run(tasks.clean, tasks.js, tasks.sass, tasks.sprite);
});
gulp.task('build', gulp.series(tasks.clean, gulp.parallel(tasks.js, tasks.sass, tasks.sprite)));
// Default gulp task
gulp.task('default', () => {
run('build', 'watch');
});
gulp.task('default', gulp.series('build', 'watch'));
// Publish a version to CDN and demo
// --------------------------------------------
@ -308,13 +303,13 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
console.log(`Updating versions to '${version}'...`);
// Replace versioned URLs in source
const files = ['plyr.js', 'plyr.polyfilled.js', 'defaults.js'];
const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
return gulp
.src(files.map(file => path.join(root, `src/js/${file}`)))
.src(files.map(file => path.join(root, `src/js/${file}`)), { base: '.' })
.pipe(replace(semver, `v${version}`))
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
.pipe(gulp.dest(path.join(root, 'src/js/')));
.pipe(gulp.dest('./'));
});
// Publish version to CDN bucket
@ -452,7 +447,16 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
});
// Do everything
gulp.task('deploy', () =>
run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'purge', 'demo', 'open'),
gulp.task(
'deploy',
gulp.series(
'version',
tasks.clean,
gulp.parallel(tasks.js, tasks.sass, tasks.sprite),
'cdn',
'demo',
'purge',
'open',
),
);
}

View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "3.4.5",
"version": "3.4.7",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io",
"author": "Sam Potts <sam@potts.es>",
@ -35,19 +35,19 @@
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"@babel/core": "^7.1.5",
"babel-eslint": "^10.0.1",
"@babel/preset-env": "^7.1.0",
"@babel/preset-env": "^7.1.5",
"del": "^3.0.0",
"eslint": "^5.7.0",
"eslint": "^5.8.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-import": "^2.14.0",
"fastly-purge": "^1.0.1",
"git-branch": "^2.0.1",
"gulp": "^3.9.1",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-better-rollup": "^3.3.0",
"gulp-better-rollup": "^3.4.0",
"gulp-clean-css": "^3.10.0",
"gulp-concat": "^2.6.1",
"gulp-filter": "^5.1.0",
@ -64,23 +64,22 @@
"gulp-svgstore": "^7.0.0",
"gulp-uglify-es": "^1.0.4",
"gulp-util": "^3.0.8",
"postcss-custom-properties": "^8.0.8",
"postcss-custom-properties": "^8.0.9",
"prettier-eslint": "^8.8.2",
"prettier-stylelint": "^0.4.2",
"remark-cli": "^5.0.0",
"remark-cli": "^6.0.0",
"remark-validate-links": "^7.1.0",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-node-resolve": "^3.4.0",
"run-sequence": "^2.2.1",
"stylelint": "^9.6.0",
"stylelint": "^9.7.1",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-recommended": "^2.1.0",
"stylelint-config-sass-guidelines": "^5.2.0",
"stylelint-order": "^1.0.0",
"stylelint-scss": "^3.3.2",
"stylelint-scss": "^3.4.0",
"stylelint-selector-bem-pattern": "^2.0.0",
"through2": "^2.0.3"
"through2": "^3.0.0"
},
"dependencies": {
"core-js": "^2.5.7",

View File

@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
```html
<script src="https://cdn.plyr.io/3.4.5/plyr.js"></script>
<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>
```
...or...
```html
<script src="https://cdn.plyr.io/3.4.5/plyr.polyfilled.js"></script>
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
```
### CSS
@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.5/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
```
### SVG Sprite
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.5/plyr.svg`.
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.7/plyr.svg`.
## Ads
@ -417,7 +417,7 @@ player.fullscreen.active; // false;
| `language` | ✓ | ✓ | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
| `fullscreen.active` | ✓ | - | Returns a boolean indicating if the current player is in fullscreen mode. |
| `fullscreen.enabled` | ✓ | - | Returns a boolean indicating if the current player has fullscreen enabled. |
| `pip` | ✓ | ✓ | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+. |
| `pip`&sup2; | ✓ | ✓ | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+. |
1. YouTube only. HTML5 will follow.
2. HTML5 only
@ -714,6 +714,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
- [Oscar Radio](http://oscar-radio.xyz/)
- [Sparkk TV](https://www.sparkktv.com/)
- [@halfhalftravel](https://www.halfhalftravel.com/)
Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)

View File

@ -60,7 +60,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.3.12/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

10
src/js/config/states.js Normal file
View File

@ -0,0 +1,10 @@
// ==========================================================================
// Plyr states
// ==========================================================================
export const pip = {
active: 'picture-in-picture',
inactive: 'inline',
};
export default { pip };

View File

@ -82,9 +82,6 @@ const html5 = {
triggerEvent.call(player, player.media, 'qualitychange', false, {
quality: input,
});
// Save to storage
player.storage.set({ quality: input });
},
});
},

View File

@ -317,7 +317,7 @@ class Listeners {
// Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
on.call(player, player.media, 'canplay', () => {
on.call(player, player.media, 'canplay loadeddata', () => {
toggleHidden(elements.volume, !player.hasAudio);
toggleHidden(elements.buttons.mute, !player.hasAudio);
});

View File

@ -70,8 +70,9 @@ const vimeo = {
// Set aspect ratio
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
setAspectRatio(input) {
const [x, y] = (is.string(input) ? input : this.config.ratio).split(':');
const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number);
const padding = (100 / x) * y;
vimeo.padding = padding;
this.elements.wrapper.style.paddingBottom = `${padding}%`;
if (this.supported.ui) {
@ -299,8 +300,8 @@ const vimeo = {
// Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
const ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(this, ratio);
vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(this, vimeo.ratio);
});
// Set autopause
@ -404,6 +405,22 @@ const vimeo = {
triggerEvent.call(player, player.media, 'error');
});
// Set height/width on fullscreen
player.on('enterfullscreen exitfullscreen', event => {
const { target } = player.fullscreen;
// Ignore for iOS native
if (target !== player.elements.container) {
return;
}
const toggle = event.type === 'enterfullscreen';
const [x, y] = vimeo.ratio.split(':').map(Number);
const dimension = x > y ? 'width' : 'height';
target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
});
// Rebuild UI
setTimeout(() => ui.build.call(player), 0);
},

View File

@ -1,12 +1,13 @@
// ==========================================================================
// Plyr
// plyr.js v3.4.5
// plyr.js v3.4.7
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
import captions from './captions';
import defaults from './config/defaults';
import { pip } from './config/states';
import { getProviderByUrl, providers, types } from './config/types';
import Console from './console';
import controls from './controls';
@ -695,10 +696,15 @@ class Plyr {
config.default,
].find(is.number);
let updateStorage = true;
if (!options.includes(quality)) {
const value = closest(options, quality);
this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
quality = value;
// Don't update storage if quality is not supported
updateStorage = false;
}
// Update config
@ -706,6 +712,11 @@ class Plyr {
// Set quality
this.media.quality = quality;
// Save to storage
if (updateStorage) {
this.storage.set({ quality });
}
}
/**
@ -886,21 +897,28 @@ class Plyr {
* TODO: detect outside changes
*/
set pip(input) {
const states = {
pip: 'picture-in-picture',
inline: 'inline',
};
// Bail if no support
if (!support.pip) {
return;
}
// Toggle based on current state if not passed
const toggle = is.boolean(input) ? input : this.pip === states.inline;
const toggle = is.boolean(input) ? input : !this.pip;
// Toggle based on current state
this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
// Safari
if (is.function(this.media.webkitSetPresentationMode)) {
this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
}
// Chrome
if (is.function(this.media.requestPictureInPicture)) {
if (!this.pip && toggle) {
this.media.requestPictureInPicture();
} else if (this.pip && !toggle) {
document.exitPictureInPicture();
}
}
}
/**
@ -911,7 +929,13 @@ class Plyr {
return null;
}
return this.media.webkitPresentationMode;
// Safari
if (!is.empty(this.media.webkitPresentationMode)) {
return this.media.webkitPresentationMode === pip.active;
}
// Chrome
return this.media === document.pictureInPictureElement;
}
/**

View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr Polyfilled Build
// plyr.js v3.4.5
// plyr.js v3.4.7
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================

View File

@ -114,12 +114,9 @@ const source = {
// HTML5 stuff
if (this.isHTML5) {
// Setup captions
if ('tracks' in input) {
if (Object.keys(input).includes('tracks')) {
source.insertElements.call(this, 'track', input.tracks);
}
// Load HTML5 sources
this.media.load();
}
// If HTML5 or embed but not fully supported, setupInterface and call ready now
@ -128,6 +125,11 @@ const source = {
ui.build.call(this);
}
if (this.isHTML5) {
// Load HTML5 sources
this.media.load();
}
// Update the fullscreen support
this.fullscreen.update();
},

View File

@ -36,8 +36,26 @@ const support = {
},
// Picture-in-picture support
// Safari only currently
pip: (() => !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode))(),
// Safari & Chrome only currently
pip: (() => {
if (browser.isIPhone) {
return false;
}
// Safari
// https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
if (is.function(createElement('video').webkitSetPresentationMode)) {
return true;
}
// Chrome
// https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
return true;
}
return false;
})(),
// Airplay support
// Safari only currently
@ -52,25 +70,21 @@ const support = {
// Related: http://www.leanbackplayer.com/test/h5mt.html
mime(inputType) {
const [mediaType] = inputType.split('/');
let type = inputType;
// Verify we're using HTML5 and there's no media type mismatch
if (!this.isHTML5 || mediaType !== this.type) {
return false;
}
let type;
if (inputType && inputType.includes('codecs=')) {
// Use input directly
type = inputType;
} else if (inputType === 'audio/mpeg') {
// Skip codec
type = 'audio/mpeg;';
} else if (inputType in defaultCodecs) {
// Use codec
type = `${inputType}; codecs="${defaultCodecs[inputType]}"`;
// Add codec if required
if (Object.keys(defaultCodecs).includes(type)) {
type += `; codecs="${defaultCodecs[inputType]}"`;
}
try {
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
} catch (err) {
} catch (e) {
return false;
}
},

View File

@ -293,7 +293,7 @@ export function setFocus(element = null, tabFocus = false) {
}
// Set regular focus
element.focus();
element.focus({ preventScroll: true });
// If we want to mimic keyboard focus via tab
if (tabFocus) {

View File

@ -12,7 +12,7 @@ $plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
// Track
$plyr-range-track-height: 6px !default;
$plyr-range-track-height: 4px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
// Fill

View File

@ -17,4 +17,4 @@ $plyr-font-weight-bold: 600 !default;
$plyr-line-height: 1.7 !default;
$plyr-font-smoothing: true !default;
$plyr-font-smoothing: false !default;

2988
yarn.lock

File diff suppressed because it is too large Load Diff