aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js125
-rw-r--r--src/less/plyr.less45
-rw-r--r--src/less/variables.less10
-rw-r--r--src/scss/plyr.scss39
-rw-r--r--src/scss/variables.scss8
5 files changed, 197 insertions, 30 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index b8e158e1..06173523 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v1.6.13
+// plyr.js v1.6.16
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@@ -26,10 +26,11 @@
/*global YT,$f*/
// Globals
- var fullscreen, api = {};
+ var fullscreen,
+ scroll = { x: 0, y: 0 },
// Default config
- var defaults = {
+ defaults = {
enabled: true,
debug: false,
autoplay: false,
@@ -41,8 +42,9 @@
volumeStep: 1,
duration: null,
displayDuration: true,
+ loadSprite: true,
iconPrefix: 'plyr',
- iconUrl: '',
+ iconUrl: 'https://cdn.plyr.io/1.6.16/plyr.svg',
clickToPlay: true,
hideControls: true,
showPosterOnEnd: false,
@@ -657,11 +659,20 @@
}
}
+ // Get icon URL
+ function _getIconUrl() {
+ return {
+ url: config.iconUrl,
+ external: (config.iconUrl.indexOf("http") === 0)
+ };
+ }
+
// Build the default HTML
function _buildControls() {
// Create html array
- var html = [],
- iconPath = config.iconUrl + '#' + config.iconPrefix;
+ var html = [],
+ iconUrl = _getIconUrl(),
+ iconPath = (!iconUrl.external ? iconUrl.url : '') + '#' + config.iconPrefix;
// Larger overlaid play button
if (_inArray(config.controls, 'play-large')) {
@@ -1162,6 +1173,20 @@
// Insert controls
function _injectControls() {
+ // Sprite
+ if (config.loadSprite) {
+ var iconUrl = _getIconUrl();
+
+ // Only load external sprite using AJAX
+ if (iconUrl.external) {
+ _log('Loading external SVG sprite');
+ loadSprite(iconUrl.url);
+ }
+ else {
+ _log('Sprite will be used inline');
+ }
+ }
+
// Make a copy of the html
var html = config.html;
@@ -1929,6 +1954,19 @@
_toggleControls(plyr.media.paused);
}
+ // Save scroll position
+ function _saveScrollPosition() {
+ scroll = {
+ x: window.pageXOffset || 0,
+ y: window.pageYOffset || 0
+ };
+ }
+
+ // Restore scroll position
+ function _restoreScrollPosition() {
+ window.scrollTo(scroll.x, scroll.y);
+ }
+
// Toggle fullscreen
function _toggleFullscreen(event) {
// Check for native support
@@ -1942,6 +1980,10 @@
else if (nativeSupport) {
// Request fullscreen
if (!fullscreen.isFullScreen(plyr.container)) {
+ // Save scroll position
+ _saveScrollPosition();
+
+ // Request full screen
fullscreen.requestFullScreen(plyr.container);
}
// Bail from fullscreen
@@ -1986,6 +2028,11 @@
// Trigger an event
_triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen');
+
+ // Restore scroll position
+ if (!plyr.isFullscreen && nativeSupport) {
+ _restoreScrollPosition();
+ }
}
// Bail from faux-fullscreen
@@ -2432,7 +2479,7 @@
}
}
else {
- show = false;
+ show = !_hasClass(plyr.container, config.classes.hideControls);
}
}
@@ -2443,21 +2490,26 @@
if (show || plyr.media.paused) {
_toggleClass(plyr.container, config.classes.hideControls, false);
- // Always show controls when paused
+ // Always show controls when paused or if touch
if (plyr.media.paused) {
return;
}
+
+ // Delay for hiding on touch
+ if (plyr.browser.touch) {
+ delay = 3000;
+ }
}
- // If toggle is false or if we're playing (regardless of toggle), then
- // set the timer to hide the controls
+ // If toggle is false or if we're playing (regardless of toggle),
+ // then set the timer to hide the controls
if (!show || !plyr.media.paused) {
plyr.timers.hover = window.setTimeout(function() {
// If the mouse is over the controls (and not entering fullscreen), bail
if (plyr.controls.active && !isEnterFullscreen) {
return;
}
-
+
_toggleClass(plyr.container, config.classes.hideControls, true);
}, delay);
}
@@ -2554,7 +2606,7 @@
}
// Check for support
- plyr.supported = api.supported(plyr.type);
+ plyr.supported = supported(plyr.type);
// Create new markup
switch(plyr.type) {
@@ -2863,6 +2915,11 @@
// On click play, pause ore restart
_on(wrapper, 'click', function() {
+ if (plyr.browser.touch && !plyr.media.paused) {
+ _toggleControls(true);
+ return;
+ }
+
if (plyr.media.paused) {
_play();
}
@@ -3000,7 +3057,7 @@
}
// Check for support
- plyr.supported = api.supported(plyr.type);
+ plyr.supported = supported(plyr.type);
// Add style hook
_toggleStyleHook();
@@ -3130,6 +3187,7 @@
toggleMute: _toggleMute,
toggleCaptions: _toggleCaptions,
toggleFullscreen: _toggleFullscreen,
+ toggleControls: _toggleControls,
isFullscreen: function() { return plyr.isFullscreen || false; },
support: function(mimeType) { return _supportMime(plyr, mimeType); },
destroy: _destroy,
@@ -3137,8 +3195,31 @@
};
}
+ // Load a sprite
+ function loadSprite(url) {
+ var x = new XMLHttpRequest();
+
+ // Check for CORS support
+ if ('withCredentials' in x) {
+ x.open('GET', url, true);
+ }
+ else {
+ return;
+ }
+
+ // Inject hidden div with sprite on load
+ x.onload = function() {
+ var c = document.createElement('div');
+ c.setAttribute('hidden', '');
+ c.innerHTML = x.responseText;
+ document.body.insertBefore(c, document.body.childNodes[0]);
+ }
+
+ x.send();
+ }
+
// Check for support
- api.supported = function(type) {
+ function supported(type) {
var browser = _browserSniff(),
oldIE = (browser.name === 'IE' && browser.version <= 9),
iPhone = /iPhone|iPod/i.test(navigator.userAgent),
@@ -3173,10 +3254,10 @@
basic: basic,
full: full
};
- };
+ }
- // Expose setup function
- api.setup = function(elements, options) {
+ // Setup function
+ function setup(elements, options) {
// Get the players
var instances = [];
@@ -3202,7 +3283,7 @@
// Bail if disabled or no basic support
// You may want to disable certain UAs etc
- if (!api.supported().basic || !elements.length) {
+ if (!supported().basic || !elements.length) {
return false;
}
@@ -3236,9 +3317,13 @@
}
return instances;
- };
+ }
- return api;
+ return {
+ setup: setup,
+ supported: supported,
+ loadSprite: loadSprite
+ };
}));
// Custom event polyfill
diff --git a/src/less/plyr.less b/src/less/plyr.less
index ca7b555a..3398b603 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -246,6 +246,11 @@
// Controls
// --------------------------------------------------------------
+// Hide native controls
+.plyr ::-webkit-media-controls {
+ display: none;
+}
+
// Playback controls
.plyr__controls {
display: flex;
@@ -280,7 +285,7 @@
flex-shrink: 0;
overflow: visible; // IE11
vertical-align: middle;
- padding: (@plyr-control-spacing * .7);
+ padding: @plyr-control-padding;
border: 0;
background: transparent;
border-radius: 3px;
@@ -289,8 +294,8 @@
color: inherit;
svg {
- width: 18px;
- height: 18px;
+ width: @plyr-control-icon-size;
+ height: @plyr-control-icon-size;
display: block;
fill: currentColor;
}
@@ -480,6 +485,40 @@
z-index: 3;
}
+// First tooltip
+.plyr__controls button:first-child .plyr__tooltip {
+ left: 0;
+ transform: translate(0, 10px) scale(.8);
+ transform-origin: 0 100%;
+
+ &::before {
+ left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+ }
+}
+
+// Last tooltip
+.plyr__controls button:last-child .plyr__tooltip {
+ right: 0;
+ transform: translate(0, 10px) scale(.8);
+ transform-origin: 100% 100%;
+
+ &::before {
+ left: auto;
+ right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+ transform: translateX(50%);
+ }
+}
+
+.plyr__controls button:first-child,
+.plyr__controls button:last-child {
+ &:hover .plyr__tooltip,
+ &.tab-focus:focus .plyr__tooltip,
+ .plyr__tooltip--visible {
+ transform: translate(0, 0) scale(1);
+ }
+}
+
+
// Playback progress
// --------------------------------------------------------------
// <progress> element
diff --git a/src/less/variables.less b/src/less/variables.less
index 0b2d0895..5798d496 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -16,14 +16,16 @@
@plyr-font-size-base: 16px;
// Captions
-@plyr-captions-bg: fade(#000, 70%);
-@plyr-captions-color: #fff;
+@plyr-captions-bg: fade(#000, 70%);
+@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls
+@plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px;
+@plyr-control-padding: (@plyr-control-spacing * .7);
@plyr-video-controls-bg: #000;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@@ -37,7 +39,7 @@
// Tooltips
@plyr-tooltip-bg: fade(#000, 70%);
-@plyr-tooltip-color: #fff;
+@plyr-tooltip-color: #fff;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
@@ -62,7 +64,7 @@
@plyr-range-thumb-active-scale: 1.25;
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
-@plyr-range-selected-bg: @plyr-color-main;
+@plyr-range-selected-bg: @plyr-color-main;
// Breakpoints
@plyr-bp-screen-sm: 480px;
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index c5e0bfaa..d886919f 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -245,6 +245,11 @@
// Controls
// --------------------------------------------------------------
+// Hide native controls
+.plyr ::-webkit-media-controls {
+ display: none;
+}
+
// Playback controls
.plyr__controls {
display: flex;
@@ -479,6 +484,40 @@
z-index: 3;
}
+// First tooltip
+.plyr__controls button:first-child .plyr__tooltip {
+ $tooltip-arrow-offset: ;
+ left: 0;
+ transform: translate(0, 10px) scale(.8);
+ transform-origin: 0 100%;
+
+ &::before {
+ left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+ }
+}
+
+// Last tooltip
+.plyr__controls button:last-child .plyr__tooltip {
+ right: 0;
+ transform: translate(0, 10px) scale(.8);
+ transform-origin: 100% 100%;
+
+ &::before {
+ left: auto;
+ right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+ transform: translateX(50%);
+ }
+}
+
+.plyr__controls button:first-child,
+.plyr__controls button:last-child {
+ &:hover .plyr__tooltip,
+ &.tab-focus:focus .plyr__tooltip,
+ .plyr__tooltip--visible {
+ transform: translate(0, 0) scale(1);
+ }
+}
+
// Playback progress
// --------------------------------------------------------------
// <progress> element
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 5aa0d629..5e0a16b3 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -17,14 +17,16 @@ $plyr-font-size-small: 14px !default;
$plyr-font-size-base: 16px !default;
// Captions
-$plyr-captions-bg: transparentize(#000, .3) !default;
-$plyr-captions-color: #fff !default;
+$plyr-captions-bg: transparentize(#000, .3) !default;
+$plyr-captions-color: #fff !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
// Controls
+$plyr-control-icon-size: 18px !default;
$plyr-control-spacing: 10px !default;
+$plyr-control-padding: ($plyr-control-spacing * .7) !default;
$plyr-video-controls-bg: #000 !default;
$plyr-video-control-color: #fff !default;
$plyr-video-control-color-hover: #fff !default;
@@ -63,7 +65,7 @@ $plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
$plyr-range-thumb-active-scale: 1.25 !default;
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
-$plyr-range-selected-bg: $plyr-color-main !default;
+$plyr-range-selected-bg: $plyr-color-main !default;
// Breakpoints
$plyr-bp-screen-sm: 480px !default;
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-04 18:43:03 +0000