-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
244 lines (227 loc) · 20.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<html>
<head>
<title>YooYo Slider</title>
<style>
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?17438358');
src: url('../font/fontello.eot?17438358#iefix') format('embedded-opentype'),
url('../font/fontello.svg?17438358#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fontello';
src: url('data:application/octet-stream;base64,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') format('woff'),
url('data:application/octet-stream;base64,AAEAAAAPAIAAAwBwR1NVQiCLJXoAAAD8AAAAVE9TLzJGLlC8AAABUAAAAFZjbWFwsIn0twAAAagAAAF+Y3Z0IAbV/wQAAAeEAAAAIGZwZ22KkZBZAAAHpAAAC3BnYXNwAAAAEAAAB3wAAAAIZ2x5ZqhBDzYAAAMoAAAAumhlYWQUNixxAAAD5AAAADZoaGVhBz0DVQAABBwAAAAkaG10eAlZAAAAAARAAAAADGxvY2EAPABdAAAETAAAAAhtYXhwAKcLqgAABFQAAAAgbmFtZcydHyEAAAR0AAACzXBvc3Tm9zjkAAAHRAAAADZwcmVw5UErvAAAExQAAACGAAEAAAAKADAAPgACREZMVAAObGF0bgAaAAQAAAAAAAAAAQAAAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAEDHgGQAAUAAAJ6ArwAAACMAnoCvAAAAeAAMQECAAACAAUDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBmRWQAQPAO8A8DUv9qAFoDUgCWAAAAAQAAAAAAAAAAAAUAAAADAAAALAAAAAQAAAFWAAEAAAAAAFAAAwABAAAALAADAAoAAAFWAAQAJAAAAAQABAABAADwD///AADwDv//AAAAAQAEAAAAAQACAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAoAAAAAAAAAAIAAPAOAADwDgAAAAEAAPAPAADwDwAAAAIAAAACAAD/xALfAvgADwAfABVAEgMBAQABbwIBAABmNTU1MgQFGCs1FBY7ATI2NxE0JicjIgYHARQWOwEyNjURNCYnIyIGByYafxskASYafxskAQHgJhp/GiYmGn8bJAEFGyYmGwKzGyQBJhr9TRsmJhsCsxskASYaAAABAAD/ywKTAvEADgAGsw0DAS0rNRE0NhcBFhUUBg8BAQYmLB8CNBQKBQX9zB8sCwKlJxoV/qMOEwkSAwT+oxQaAAAAAAEAAAABAACdo1GvXw889QALA+gAAAAA2Jd0aAAAAADYl3RoAAD/xAPoAvgAAAAIAAIAAAAAAAAAAQAAA1L/agAAA+gAAP//A+gAAQAAAAAAAAAAAAAAAAAAAAMD6AAAAt8AAAKSAAAAAAAAADwAXQABAAAAAwAgAAIAAAAAAAIACAAYAHMAAAAmC3AAAAAAAAAAEgDeAAEAAAAAAAAANQAAAAEAAAAAAAEACAA1AAEAAAAAAAIABwA9AAEAAAAAAAMACABEAAEAAAAAAAQACABMAAEAAAAAAAUACwBUAAEAAAAAAAYACABfAAEAAAAAAAoAKwBnAAEAAAAAAAsAEwCSAAMAAQQJAAAAagClAAMAAQQJAAEAEAEPAAMAAQQJAAIADgEfAAMAAQQJAAMAEAEtAAMAAQQJAAQAEAE9AAMAAQQJAAUAFgFNAAMAAQQJAAYAEAFjAAMAAQQJAAoAVgFzAAMAAQQJAAsAJgHJQ29weXJpZ2h0IChDKSAyMDE5IGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb21mb250ZWxsb1JlZ3VsYXJmb250ZWxsb2ZvbnRlbGxvVmVyc2lvbiAxLjBmb250ZWxsb0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQA5ACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQBmAG8AbgB0AGUAbABsAG8AUgBlAGcAdQBsAGEAcgBmAG8AbgB0AGUAbABsAG8AZgBvAG4AdABlAGwAbABvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AbgB0AGUAbABsAG8ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAFcGF1c2UEcGxheQAAAAAAAQAB//8ADwAAAAAAAAAAAAAAAAAAAAAAGAAYABgAGANS/2oDUv9qsAAsILAAVVhFWSAgS7gADlFLsAZTWliwNBuwKFlgZiCKVViwAiVhuQgACABjYyNiGyEhsABZsABDI0SyAAEAQ2BCLbABLLAgYGYtsAIsIGQgsMBQsAQmWrIoAQpDRWNFUltYISMhG4pYILBQUFghsEBZGyCwOFBYIbA4WVkgsQEKQ0VjRWFksChQWCGxAQpDRWNFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwAStZWSOwAFBYZVlZLbADLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbAELCMhIyEgZLEFYkIgsAYjQrEBCkNFY7EBCkOwAWBFY7ADKiEgsAZDIIogirABK7EwBSWwBCZRWGBQG2FSWVgjWSEgsEBTWLABKxshsEBZI7AAUFhlWS2wBSywB0MrsgACAENgQi2wBiywByNCIyCwACNCYbACYmawAWOwAWCwBSotsAcsICBFILALQ2O4BABiILAAUFiwQGBZZrABY2BEsAFgLbAILLIHCwBDRUIqIbIAAQBDYEItsAkssABDI0SyAAEAQ2BCLbAKLCAgRSCwASsjsABDsAQlYCBFiiNhIGQgsCBQWCGwABuwMFBYsCAbsEBZWSOwAFBYZVmwAyUjYUREsAFgLbALLCAgRSCwASsjsABDsAQlYCBFiiNhIGSwJFBYsAAbsEBZI7AAUFhlWbADJSNhRESwAWAtsAwsILAAI0KyCwoDRVghGyMhWSohLbANLLECAkWwZGFELbAOLLABYCAgsAxDSrAAUFggsAwjQlmwDUNKsABSWCCwDSNCWS2wDywgsBBiZrABYyC4BABjiiNhsA5DYCCKYCCwDiNCIy2wECxLVFixBGREWSSwDWUjeC2wESxLUVhLU1ixBGREWRshWSSwE2UjeC2wEiyxAA9DVVixDw9DsAFhQrAPK1mwAEOwAiVCsQwCJUKxDQIlQrABFiMgsAMlUFixAQBDYLAEJUKKiiCKI2GwDiohI7ABYSCKI2GwDiohG7EBAENgsAIlQrACJWGwDiohWbAMQ0ewDUNHYLACYiCwAFBYsEBgWWawAWMgsAtDY7gEAGIgsABQWLBAYFlmsAFjYLEAABMjRLABQ7AAPrIBAQFDYEItsBMsALEAAkVUWLAPI0IgRbALI0KwCiOwAWBCIGCwAWG1EBABAA4AQkKKYLESBiuwcisbIlktsBQssQATKy2wFSyxARMrLbAWLLECEystsBcssQMTKy2wGCyxBBMrLbAZLLEFEystsBossQYTKy2wGyyxBxMrLbAcLLEIEystsB0ssQkTKy2wHiwAsA0rsQACRVRYsA8jQiBFsAsjQrAKI7ABYEIgYLABYbUQEAEADgBCQopgsRIGK7ByKxsiWS2wHyyxAB4rLbAgLLEBHistsCEssQIeKy2wIiyxAx4rLbAjLLEEHistsCQssQUeKy2wJSyxBh4rLbAmLLEHHistsCcssQgeKy2wKCyxCR4rLbApLCA8sAFgLbAqLCBgsBBgIEMjsAFgQ7ACJWGwAWCwKSohLbArLLAqK7AqKi2wLCwgIEcgILALQ2O4BABiILAAUFiwQGBZZrABY2AjYTgjIIpVWCBHICCwC0NjuAQAYiCwAFBYsEBgWWawAWNgI2E4GyFZLbAtLACxAAJFVFiwARawLCqwARUwGyJZLbAuLACwDSuxAAJFVFiwARawLCqwARUwGyJZLbAvLCA1sAFgLbAwLACwAUVjuAQAYiCwAFBYsEBgWWawAWOwASuwC0NjuAQAYiCwAFBYsEBgWWawAWOwASuwABa0AAAAAABEPiM4sS8BFSotsDEsIDwgRyCwC0NjuAQAYiCwAFBYsEBgWWawAWNgsABDYTgtsDIsLhc8LbAzLCA8IEcgsAtDY7gEAGIgsABQWLBAYFlmsAFjYLAAQ2GwAUNjOC2wNCyxAgAWJSAuIEewACNCsAIlSYqKRyNHI2EgWGIbIVmwASNCsjMBARUUKi2wNSywABawBCWwBCVHI0cjYbAJQytlii4jICA8ijgtsDYssAAWsAQlsAQlIC5HI0cjYSCwBCNCsAlDKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgsAhDIIojRyNHI2EjRmCwBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2EjICCwBCYjRmE4GyOwCENGsAIlsAhDRyNHI2FgILAEQ7ACYiCwAFBYsEBgWWawAWNgIyCwASsjsARDYLABK7AFJWGwBSWwAmIgsABQWLBAYFlmsAFjsAQmYSCwBCVgZCOwAyVgZFBYIRsjIVkjICCwBCYjRmE4WS2wNyywABYgICCwBSYgLkcjRyNhIzw4LbA4LLAAFiCwCCNCICAgRiNHsAErI2E4LbA5LLAAFrADJbACJUcjRyNhsABUWC4gPCMhG7ACJbACJUcjRyNhILAFJbAEJUcjRyNhsAYlsAUlSbACJWG5CAAIAGNjIyBYYhshWWO4BABiILAAUFiwQGBZZrABY2AjLiMgIDyKOCMhWS2wOiywABYgsAhDIC5HI0cjYSBgsCBgZrACYiCwAFBYsEBgWWawAWMjICA8ijgtsDssIyAuRrACJUZSWCA8WS6xKwEUKy2wPCwjIC5GsAIlRlBYIDxZLrErARQrLbA9LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrErARQrLbA+LLA1KyMgLkawAiVGUlggPFkusSsBFCstsD8ssDYriiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSsBFCuwBEMusCsrLbBALLAAFrAEJbAEJiAuRyNHI2GwCUMrIyA8IC4jOLErARQrLbBBLLEIBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAlDKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7ACYiCwAFBYsEBgWWawAWNgILABKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwAmIgsABQWLBAYFlmsAFjYbACJUZhOCMgPCM4GyEgIEYjR7ABKyNhOCFZsSsBFCstsEIssDUrLrErARQrLbBDLLA2KyEjICA8sAQjQiM4sSsBFCuwBEMusCsrLbBELLAAFSBHsAAjQrIAAQEVFBMusDEqLbBFLLAAFSBHsAAjQrIAAQEVFBMusDEqLbBGLLEAARQTsDIqLbBHLLA0Ki2wSCywABZFIyAuIEaKI2E4sSsBFCstsEkssAgjQrBIKy2wSiyyAABBKy2wSyyyAAFBKy2wTCyyAQBBKy2wTSyyAQFBKy2wTiyyAABCKy2wTyyyAAFCKy2wUCyyAQBCKy2wUSyyAQFCKy2wUiyyAAA+Ky2wUyyyAAE+Ky2wVCyyAQA+Ky2wVSyyAQE+Ky2wViyyAABAKy2wVyyyAAFAKy2wWCyyAQBAKy2wWSyyAQFAKy2wWiyyAABDKy2wWyyyAAFDKy2wXCyyAQBDKy2wXSyyAQFDKy2wXiyyAAA/Ky2wXyyyAAE/Ky2wYCyyAQA/Ky2wYSyyAQE/Ky2wYiywNysusSsBFCstsGMssDcrsDsrLbBkLLA3K7A8Ky2wZSywABawNyuwPSstsGYssDgrLrErARQrLbBnLLA4K7A7Ky2waCywOCuwPCstsGkssDgrsD0rLbBqLLA5Ky6xKwEUKy2wayywOSuwOystsGwssDkrsDwrLbBtLLA5K7A9Ky2wbiywOisusSsBFCstsG8ssDorsDsrLbBwLLA6K7A8Ky2wcSywOiuwPSstsHIsswkEAgNFWCEbIyFZQiuwCGWwAyRQeLABFTAtAEu4AMhSWLEBAY5ZsAG5CAAIAGNwsQAFQrIAAQAqsQAFQrMKAgEIKrEABUKzDgABCCqxAAZCugLAAAEACSqxAAdCugBAAAEACSqxAwBEsSQBiFFYsECIWLEDZESxJgGIUVi6CIAAAQRAiGNUWLEDAERZWVlZswwCAQwquAH/hbAEjbECAEQAAA==') format('truetype');
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
}
.icon-pause:before { content: '\f00e'; } /* '' */
.icon-play:before { content: '\f00f'; } /* '' */
html, body {
margin: 0;
padding: 0;
}
#videoplayer {
widows: 480px;
display: block;
margin: 20px 50px;
background: green;
padding: 120px 0 30px 0;
}
#yooyo-slider {}
#yooyo-slider-path {
width: 80%;
height: 7px;
margin: 0 auto;
display: block;
position: relative;
border-radius: 3px;
background: #e1e4e9;
}
#yooyo-slider-tooltip {
background: rgb(129, 54, 61);
}
#yooyo-slider-knob {
-webkit-transition: transform 300ms ease-in-out;
-moz-transition: transform 300ms ease-in-out;
-ms-transition: transform 300ms ease-in-out;
-o-transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
top: -175%;
width: 30px;
height: 30px;
display: block;
font-size: 23px;
cursor: pointer;
margin-left: -16px;
position: absolute;
text-align: center;
border-radius: 30px;
transform: scale(1.85);
color: rgba(255, 255, 255, 1);
background: rgba(237, 85, 101, 0.9);
border: 1px solid rgba(218, 68, 83, 1);
}
#yooyo-slider-knob:hover {
background: rgba(237, 85, 101, 1);
}
#yooyo-slider-knob:active {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#yooyo-slider-knob span {}
#yooyo-slider-knob span:before {
line-height: 29px;
}
#yooyo-slider-knob span.moved {
font-size: 12px;
line-height: 29px;
font-family: sans-serif;
}
#yooyo-slider-knob.moved {
transform: scale(1.25);
}
input[type="range"] {
display: none;
}
</style>
</head>
<body>
<div id="videoplayer">
<input id="slide" type="range" min="1" max="5" step="1" value="3" onchange="updateSlider(this.value)" onclick="klik()">
<div id="yooyo-slider">
<!-- Slider -->
<div id="yooyo-slider-path">
<!-- Tooltip -->
<div id="yooyo-slider-tooltip"></div>
<!-- Knob -->
<div id="yooyo-slider-knob">
<span class="icon-play"></span>
</div>
</div>
</div>
<div id="sliderAmount"></div>
<div id="playerStatus"></div>
</div>
<script type="text/javascript">
// Slider
var slider = document.querySelector('#yooyo-slider')
var sliderStops = 5
var sliderStopActive = Math.floor(sliderStops / 2)
var sliderStopPositions = []
var sliderStopPositionsWidth = Math.round(slider.offsetWidth / sliderStops)
var singleStop = 0
// Set slider stops
for (var i = 0; i < sliderStops; i++) {
sliderStopPositions.push(singleStop) // Setting just X coordinate, Y is always 0, so no need for X,Y system.
singleStop += sliderStopPositionsWidth
}
// console.log(sliderStopPositions)
// Knob
var knob = slider.querySelector('#yooyo-slider-knob')
var knobWidth = knob.getBoundingClientRect().width
var knobWidthOffset = knobWidth / 2
var knobPosition = knob.style
// Get and Set start knob position
knobPosition.left = sliderStopPositions[sliderStopActive] + 'px'
// var knobPos = []
var isKnobActive = false
knob.addEventListener('mousedown', (e) => {
isKnobActive = true
}, true)
knob.addEventListener('mouseup', () => {
isKnobActive = false
}, true)
// console.log(sliderStopPositions[3] - knobWidthOffset)
// console.log(sliderStopPositions[3] + knobWidthOffset)
document.addEventListener('mousemove', (e) => {
var maxRight = sliderStopPositions[sliderStops - 1]
var maxLeft = 0
var mouseKnob = e.x - sliderStopPositionsWidth
var knobSpan = knob.querySelector('span')
// (mouseKnob > sliderStopPositions[3] - knobWidth - knobWidthOffset, mouseKnob, sliderStopPositions[3] - knobWidthOffset)
// &&
// (mouseKnob > sliderStopPositions[3] + knobWidthOffset)
// )
if (isKnobActive) {
// Max right
if (mouseKnob > maxRight) {
knobPosition.left = maxRight
}
// Max left
else if (mouseKnob < maxLeft) {
knobPosition.left = maxLeft
}
// Default
else {
if (mouseKnob >= (sliderStopPositions[0] - knobWidthOffset) && mouseKnob <= (sliderStopPositions[0] + knobWidthOffset)) {
knobPosition.left = sliderStopPositions[0]
knob.className = 'moved'
knobSpan.className = 'moved'
knobSpan.innerHTML = '0.25x'
// knobSpan.innerHTML = '1/4'
} else if (mouseKnob >= (sliderStopPositions[1] - knobWidthOffset) && mouseKnob <= (sliderStopPositions[1] + knobWidthOffset)) {
knobPosition.left = sliderStopPositions[1]
knob.className = 'moved'
knobSpan.className = 'moved'
knobSpan.innerHTML = '0.5x'
// knobSpan.innerHTML = '1/2'
} else if (mouseKnob >= (sliderStopPositions[2] - knobWidthOffset) && mouseKnob <= (sliderStopPositions[2] + knobWidthOffset)) {
knobPosition.left = sliderStopPositions[2]
knob.className = ''
knobSpan.className = 'icon-play'
knobSpan.innerHTML = ''
} else if (mouseKnob >= (sliderStopPositions[3] - knobWidthOffset) && mouseKnob <= (sliderStopPositions[3] + knobWidthOffset)) {
knobPosition.left = sliderStopPositions[3]
knob.className = 'moved'
knobSpan.className = 'moved'
knobSpan.innerHTML = '1.5x'
// knobSpan.innerHTML = '1.5/1'
} else if (mouseKnob >= (sliderStopPositions[4] - knobWidthOffset) && mouseKnob <= (sliderStopPositions[4] + knobWidthOffset)) {
knobPosition.left = sliderStopPositions[4]
knob.className = 'moved'
knobSpan.className = 'moved'
knobSpan.innerHTML = '2.0x'
// knobSpan.innerHTML = '2/1'
} else {
knobPosition.left = mouseKnob
}
}
}
}, true)
// var last = 3;
// var state = 0;
// function updateSlider(slideAmount) {
// var sliderDiv = document.getElementById("sliderAmount");
// sliderDiv.innerHTML = slideAmount;
// }
// function klik() {
// var playerStatus = document.getElementById("playerStatus");
// var slider = document.getElementById("slide");
// if (slider.value == last) {
// state = ! state;
// playerStatus.innerHTML = state == 0 ? "play" : "pause";
// }
// last = slider.value;
// }
// https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
</script>
</body>
</html>