WIP on better seeking
This commit is contained in:
Sam Potts
@ -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);
|
||||
});
|
||||
|
||||
// Playing progress
|
||||
_on(player.media, "timeupdate", _updateProgress);
|
||||
// Seek
|
||||
_on(player.buttons.seek, "change input", function(event) {
|
||||
// Update progress elements
|
||||
_updateProgress(event);
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
&-buffer,
|
||||
&-played {
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user