aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js53
-rw-r--r--src/less/plyr.less4
-rw-r--r--src/sass/plyr.scss16
3 files changed, 38 insertions, 35 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 8722b62f..3d78c58c 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,13 +1,13 @@
// ==========================================================================
// Plyr
-// plyr.js v1.5.17
+// plyr.js v1.5.21
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
// ==========================================================================
-(function(root, factory) {
+;(function(root, factory) {
'use strict';
/*global define,module*/
@@ -1242,7 +1242,7 @@
// Toggle style hook
function _toggleStyleHook() {
- _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
+ _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
}
// Toggle native controls
@@ -1319,12 +1319,6 @@
// Clean up
plyr.embedId = null;
}
- else {
- // Autoplay
- if (config.autoplay) {
- _play();
- }
- }
}
// Setup YouTube/Vimeo
@@ -1415,14 +1409,14 @@
// When embeds are ready
function _embedReady() {
+ // Store reference to API
+ plyr.container.plyr.embed = plyr.embed;
+
// Setup the UI
_setupInterface();
// Set title
_setTitle(_getElement('iframe'));
-
- // Store reference to API
- plyr.container.plyr.embed = plyr.embed;
}
// Handle YouTube API ready
@@ -1438,7 +1432,7 @@
plyr.embed = new YT.Player(container.id, {
videoId: videoId,
playerVars: {
- autoplay: 0,
+ autoplay: (config.autoplay ? 1 : 0),
controls: (plyr.supported.full ? 0 : 1),
rel: 0,
showinfo: 0,
@@ -1626,12 +1620,12 @@
});
// Always seek to 0
- //plyr.embed.api('seekTo', 0);
+ // plyr.embed.api('seekTo', 0);
- // Prevent autoplay if needed (seek will play)
- //if (!config.autoplay) {
- // plyr.embed.api('pause');
- //}
+ // Autoplay
+ if (config.autoplay) {
+ plyr.embed.api('play');
+ }
});
}
@@ -2277,6 +2271,11 @@
// Inject the new element
_prependChild(plyr.container, plyr.media);
+ // Autoplay the new source?
+ if (typeof source.autoplay !== 'undefined') {
+ config.autoplay = source.autoplay;
+ }
+
// Set attributes for audio video
if (_inArray(config.types.html5, plyr.type)) {
if (config.crossorigin) {
@@ -2301,9 +2300,6 @@
_toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
_toggleStyleHook();
- // Autoplay the new source?
- config.autoplay = (source.autoplay || config.autoplay);
-
// Set new sources for html5
if (_inArray(config.types.html5, plyr.type)) {
_insertChildElements('source', source.sources);
@@ -2329,11 +2325,6 @@
_displayDuration();
}
- // Play if autoplay attribute is present
- if (config.autoplay) {
- _play();
- }
-
// Set aria title and iframe title
config.title = source.title;
_setTitle();
@@ -2668,6 +2659,11 @@
// Set title on button and frame
_setTitle();
+
+ // Autoplay
+ if (config.autoplay) {
+ _play();
+ }
}
// Successful setup
@@ -2730,6 +2726,9 @@
// Display duration
_displayDuration();
+
+ // Ready event
+ _triggerEvent(plyr.container, 'ready');
}
// Initialize instance
@@ -2831,7 +2830,7 @@
}
// Create a player instance for each element
- for (var i = elements.length - 1; i >= 0; i--) {
+ for (var i = 0; i < elements.length; i++) {
// Get the current element
var element = elements[i];
diff --git a/src/less/plyr.less b/src/less/plyr.less
index c5caeb65..f27023bc 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -11,7 +11,7 @@
@plyr-gray-dark: #343F4A;
@plyr-gray: #565D64;
@plyr-gray-light: #6B7D86;
-@plyr-gray-lighter: #CBD0D3;
+@plyr-gray-lighter: #CBD0D3;
@plyr-off-white: #D6DADD;
// Font sizes
@@ -130,6 +130,7 @@
position: relative;
max-width: 100%;
min-width: 290px;
+ font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -342,6 +343,7 @@
bottom: 100%;
margin-bottom: @plyr-tooltip-padding;
padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
+ pointer-events: none;
opacity: 0;
background: @plyr-tooltip-bg;
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 0a6d653f..8de9af6e 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -44,8 +44,8 @@ $plyr-control-bg-hover: $plyr-blue !default;
// Tooltips
$plyr-tooltip-bg: $plyr-controls-bg !default;
-$plyr-tooltip-border-color: transparentize(darken($plyr-controls-bg, 75%), .1) !default;
-$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-controls-bg, 75%), .2) !default;
+$plyr-tooltip-border-color: transparentize(darken($plyr-controls-bg, 75%), .9) !default;
+$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-controls-bg, 75%), .8) !default;
$plyr-tooltip-border-width: 1px;
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
@@ -55,11 +55,11 @@ $plyr-tooltip-arrow-size: 6px !default;
$plyr-tooltip-radius: 3px !default;
// Progress
-$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
+$plyr-progress-bg: transparentize($plyr-gray, .8) !default;
$plyr-progress-playing-bg: $plyr-blue !default;
-$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
+$plyr-progress-buffered-bg: transparentize($plyr-gray, .75) !default;
$plyr-progress-loading-size: 40px !default;
-$plyr-progress-loading-bg: transparentize(#000, .15) !default;
+$plyr-progress-loading-bg: transparentize(#000, .85) !default;
// Volume
$plyr-volume-track-height: 6px !default;
@@ -130,6 +130,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to th
position: relative;
max-width: 100%;
min-width: 290px;
+ font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -218,7 +219,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to th
span {
border-radius: 2px;
padding: 3px 10px;
- background: transparentize(#000, .9);
+ background: transparentize(#000, .1);
}
span:empty {
display: none;
@@ -243,7 +244,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to th
background: $plyr-controls-bg;
line-height: 1;
text-align: center;
- box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .2);
+ box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8);
// Clear floats
&::after {
@@ -342,6 +343,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to th
bottom: 100%;
margin-bottom: $plyr-tooltip-padding;
padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
+ pointer-events: none;
opacity: 0;
background: $plyr-tooltip-bg;
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-15 00:33:58 +0000