aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js89
-rw-r--r--src/less/plyr.less171
2 files changed, 155 insertions, 105 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index f91985ae..86144e9d 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -24,6 +24,7 @@
container: ".player",
controls: ".player-controls",
buttons: {
+ seek: "[data-player='seek']",
play: "[data-player='play']",
pause: "[data-player='pause']",
restart: "[data-player='restart']",
@@ -40,8 +41,7 @@
played: ".player-progress-played"
},
captions: ".player-captions",
- duration: ".player-duration",
- seekTime: ".player-seek-time"
+ duration: ".player-duration"
},
classes: {
video: "player-video",
@@ -72,6 +72,8 @@
html: (function() {
return ["<div class='player-controls'>",
"<div class='player-progress'>",
+ "<label for='seek{id}' class='sr-only'>Seek</label>",
+ "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
"<progress class='player-progress-played' max='100' value='0'>",
"<span>0</span>% played",
"</progress>",
@@ -86,7 +88,7 @@
"</button>",
"<button type='button' data-player='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>",
- "<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
+ "<span class='sr-only'>Rewind {seektime} seconds</span>",
"</button>",
"<button type='button' data-player='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>",
@@ -98,7 +100,7 @@
"</button>",
"<button type='button' data-player='fast-forward'>",
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
- "<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
+ "<span class='sr-only'>Fast forward {seektime} seconds</span>",
"</button>",
"<span class='player-time'>",
"<span class='sr-only'>Time</span>",
@@ -275,33 +277,6 @@
return Math.floor((current / max) * 100);
}
- // Get click position relative to parent
- // http://www.kirupa.com/html5/getting_mouse_click_position.htm
- function _getClickPosition(event) {
- var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget);
-
- return {
- x: event.clientX - parentPosition.x,
- y: event.clientY - parentPosition.y
- };
- }
- // Get element position
- function _getPosition(element) {
- var xPosition = 0;
- var yPosition = 0;
-
- while (element) {
- xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
- yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
- element = element.offsetParent;
- }
-
- return {
- x: xPosition,
- y: yPosition
- };
- }
-
// Deep extend/merge two Objects
// http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
// Removed call to arguments.callee (used explicit function name instead)
@@ -509,6 +484,7 @@
// Buttons
player.buttons = {};
+ player.buttons.seek = _getElement(config.selectors.buttons.seek);
player.buttons.play = _getElement(config.selectors.buttons.play);
player.buttons.pause = _getElement(config.selectors.buttons.pause);
player.buttons.restart = _getElement(config.selectors.buttons.restart);
@@ -757,13 +733,6 @@
}
}
- // Setup seeking
- function _setupSeeking() {
- // Update number of seconds in rewind and fast forward buttons
- player.seekTime[0].innerHTML = config.seekTime;
- player.seekTime[1].innerHTML = config.seekTime;
- }
-
// Setup fullscreen
function _setupFullscreen() {
if(player.type === "video" && config.fullscreen.enabled) {
@@ -973,8 +942,21 @@
progress = player.progress.played.bar;
text = player.progress.played.text;
value = _getPercentage(player.media.currentTime, player.media.duration);
+
+ // Set seeking value
+ player.buttons.seek.value = value;
+
break;
+ // Seeking
+ case "change":
+ case "input":
+ progress = player.progress.played.bar;
+ text = player.progress.played.text;
+ value = event.target.value;
+ break;
+
+
// Check buffer status
case "playing":
case "progress":
@@ -996,6 +978,8 @@
progress.value = value;
text.innerHTML = value;
}
+
+ //_log(event);
}
// Update the displayed play time
@@ -1066,17 +1050,25 @@
});
}
- // Duration
- _on(player.media, "timeupdate", _updateTimeDisplay);
+ // Time change on media
+ _on(player.media, "timeupdate", function(event) {
+ // Duration
+ _updateTimeDisplay();
+ // Playing progress
+ _updateProgress(event);
+ });
+
+ // Seek
+ _on(player.buttons.seek, "change input", function(event) {
+ // Update progress elements
+ _updateProgress(event);
- // Playing progress
- _on(player.media, "timeupdate", _updateProgress);
+ // Update the text label
+ _updateTimeDisplay();
+
+ // Seek to the selected time
+ player.media.currentTime = ((this.value / this.max) * player.media.duration);
- // Skip when clicking progress bar
- _on(player.progress.played.bar, "click", function(event) {
- player.pos = _getClickPosition(event).x / this.offsetWidth;
- player.media.currentTime = player.pos * player.media.duration;
-
// Special handling for "manual" captions
if (!player.isTextTracks && player.type === "video") {
_adjustManualCaptions(player);
@@ -1154,9 +1146,6 @@
// Setup fullscreen
_setupFullscreen();
- // Seeking
- _setupSeeking();
-
// Listeners
_listeners();
}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 9a53715b..11bcd701 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -21,7 +21,6 @@
@control-bg-hover: @blue;
@control-color: @gray-light;
@control-color-inactive: @gray;
-@control-color-focus: #fff;
@control-color-hover: #fff;
// Progress
@@ -29,13 +28,13 @@
@progress-playing-bg: @blue;
@progress-buffered-bg: @gray;
-// Range
-@range-track-height: 6px;
-@range-track-bg: @gray;
-@range-thumb-height: (@range-track-height * 2);
-@range-thumb-width: (@range-track-height * 2);
-@range-thumb-bg: @control-color;
-@range-thumb-bg-focus: @control-bg-hover;
+// Volume
+@volume-track-height: 6px;
+@volume-track-bg: @gray;
+@volume-thumb-height: (@volume-track-height * 2);
+@volume-thumb-width: (@volume-track-height * 2);
+@volume-thumb-bg: @control-color;
+@volume-thumb-bg-focus: @control-bg-hover;
// Breakpoints
@bp-control-split: 560px; // When controls split into left/right
@@ -64,25 +63,35 @@
// Tab focus styles
.tab-focus() {
outline: thin dotted #000;
- outline-offset: 1px;
+ outline-offset: 0;
}
// Range styling
// ---------------------------------------
-.range-thumb() {
- height: @range-thumb-height;
- width: @range-thumb-width;
- background: @range-thumb-bg;
+.volume-thumb() {
+ height: @volume-thumb-height;
+ width: @volume-thumb-width;
+ background: @volume-thumb-bg;
border: 0;
- border-radius: (@range-thumb-height / 2);
+ border-radius: (@volume-thumb-height / 2);
transition: background .3s ease;
cursor: ew-resize;
}
-.range-track() {
- height: @range-track-height;
- background: @range-track-bg;
+.volume-track() {
+ height: @volume-track-height;
+ background: @volume-track-bg;
+ border: 0;
+ border-radius: (@volume-track-height / 2);
+}
+.seek-thumb() {
+ background: transparent;
+ border: 0;
+ width: 2px;
+ height: @control-spacing;
+}
+.seek-track() {
+ background: none;
border: 0;
- border-radius: (@range-track-height / 2);
}
// Font smoothing
@@ -210,16 +219,18 @@
background: transparent;
overflow: hidden;
}
- [type="checkbox"]:focus + label,
- button:focus {
- .tab-focus();
- color: @control-color-focus;
- }
+
+ button:focus,
button:hover,
+ [type="checkbox"]:focus + label,
[type="checkbox"] + label:hover {
background: @control-bg-hover;
color: @control-color-hover;
}
+ button:focus,
+ [type="checkbox"]:focus + label {
+ outline: 0;
+ }
.icon-exit-fullscreen,
.icon-muted,
.icon-captions-on {
@@ -248,43 +259,93 @@
background: @progress-bg;
&-buffer,
- &-played {
+ &-played,
+ &-seek[type=range] {
position: absolute;
left: 0;
top: 0;
width: 100%;
- height: 100%;
+ height: @control-spacing;
margin: 0;
+ padding: 0;
vertical-align: top;
-
- &[value] {
- -webkit-appearance: none;
- border: none;
- background: transparent;
- &::-webkit-progress-bar {
- background: transparent;
- }
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ border: none;
+ background: transparent;
+ }
+ &-buffer,
+ &-played {
+ &::-webkit-progress-bar {
+ background: transparent;
+ }
- // Inherit from currentColor;
- &::-webkit-progress-value {
- background: currentColor;
- }
- &::-moz-progress-bar {
- background: currentColor;
- }
+ // Inherit from currentColor;
+ &::-webkit-progress-value {
+ background: currentColor;
+ }
+ &::-moz-progress-bar {
+ background: currentColor;
}
}
&-played {
z-index: 2;
}
- &-played[value] {
- cursor: pointer;
+ &-played{
color: @progress-playing-bg;
}
- &-buffer[value] {
+ &-buffer {
color: @progress-buffered-bg;
}
+
+ // Seek control
+ // <input[type='range']> element
+ // Specificity is for bootstrap compatibility
+ &-seek[type=range] {
+ z-index: 3;
+ cursor: pointer;
+ outline: 0;
+
+ // Webkit
+ &::-webkit-slider-runnable-track {
+ .seek-track();
+ }
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ .seek-thumb();
+ }
+
+ // Mozilla
+ &::-moz-range-track {
+ .seek-track();
+ }
+ &::-moz-range-thumb {
+ -moz-appearance: none;
+ .seek-thumb();
+ }
+
+ // Microsoft
+ &::-ms-track {
+ color: transparent;
+ .seek-track();
+ }
+ &::-ms-fill-lower,
+ &::-ms-fill-upper {
+ .seek-track();
+ }
+ &::-ms-thumb {
+ .seek-thumb();
+ }
+
+ &:focus {
+ //.tab-focus();
+ outline: 0;
+ }
+ &::-moz-focus-outer {
+ border: 0;
+ }
+ }
}
// States
@@ -312,49 +373,49 @@
// Webkit
&::-webkit-slider-runnable-track {
- .range-track();
+ .volume-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
- margin-top: -((@range-thumb-height - @range-track-height) / 2);
- .range-thumb();
+ margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
+ .volume-thumb();
}
// Mozilla
&::-moz-range-track {
- .range-track();
+ .volume-track();
}
&::-moz-range-thumb {
- .range-thumb();
+ .volume-thumb();
}
// Microsoft
&::-ms-track {
- height: @range-track-height;
+ height: @volume-track-height;
background: transparent;
border-color: transparent;
- border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
+ border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0;
color: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
- .range-track();
+ .volume-track();
}
&::-ms-thumb {
- .range-thumb();
+ .volume-thumb();
}
&:focus {
outline: 0;
&::-webkit-slider-thumb {
- background: @range-thumb-bg-focus;
+ background: @volume-thumb-bg-focus;
}
&::-moz-range-thumb {
- background: @range-thumb-bg-focus;
+ background: @volume-thumb-bg-focus;
}
&::-ms-thumb {
- background: @range-thumb-bg-focus;
+ background: @volume-thumb-bg-focus;
}
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-09 13:34:09 +0000