Like 0
Fork 0

Last active 1743636566

Korbs's Avatar Korbs revised this gist 1743636565. Go to revision

1 file changed, 3 insertions, 3 deletions

index.html

@@ -13,7 +13,7 @@
13 13
14 14 <style>
15 15 body {
16 - font-family: arial;
16 + font-family: arial,sans-serif;
17 17 }
18 18 .full-seekbar {
19 19 display: flex;
@@ -84,7 +84,7 @@
84 84
85 85
86 86 ////////////////////////////////
87 - // Video Seekbar and Toolip //
87 + // Video Seekbar and Tooltip //
88 88 ////////////////////////////////
89 89 // Set max attribute to the range input
90 90 VideoElement.addEventListener('loadedmetadata', () => {
@@ -115,7 +115,7 @@
115 115 (event.offsetX / event.target.clientWidth) *
116 116 parseInt(event.target.getAttribute("max"), 10),
117 117 )
118 - SeekbarElementInput.setAttribute("data-seek", skipTo)
118 + SeekbarElementInput.setAttribute("data-seek", skipTo.toString())
119 119
120 120 const t = TooltipFormat(skipTo)
121 121 if (t.hours === "00") {SeekbarTooltip.textContent = `${t.minutes}:${t.seconds}`}

Korbs's Avatar Korbs revised this gist 1743636353. Go to revision

1 file changed, 13 insertions, 13 deletions

index.html

@@ -1,4 +1,4 @@
1 - <video controls style="width: 50%" src="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"></video>
1 + <video controls style="width: 100%; margin-bottom: 24px;" src="./vid.mp4"></video>
2 2 <div class="full-seekbar">
3 3 <div class="video-timestamp">
4 4 <span id="text-live">--:--</span>
@@ -64,6 +64,7 @@
64 64 padding: 4px 8px;
65 65 font-size: 12px;
66 66 border: 6px white solid;
67 + transition: 0.3s font-size;
67 68 }
68 69 .seekbar-current-progress {
69 70 background: red;
@@ -87,7 +88,7 @@
87 88 ////////////////////////////////
88 89 // Set max attribute to the range input
89 90 VideoElement.addEventListener('loadedmetadata', () => {
90 - const VideoMaxLength = Math.round(VideoElement.duration)
91 + const VideoMaxLength = Math.round(VideoElement.duration).toString()
91 92 SeekbarElementInput.setAttribute("max", VideoMaxLength)
92 93 })
93 94
@@ -95,18 +96,16 @@
95 96 function UpdateSeekbar() {
96 97 SeekbarElementInput.value = Math.floor(VideoElement.currentTime)
97 98 SeekbarProgressbarElement.style.width = VideoElement.currentTime / VideoElement.duration * 100 + '%'
99 + SeekbarTooltip.style.left = VideoElement.currentTime / VideoElement.duration * 100 + '%'
98 100 }
99 101
100 102 // Format timestamp for Seekbar Tooltip
101 - function formatTime(timeInSeconds) { /* Replace 'substr' with 'substring' */
102 - const result = new Date(timeInSeconds * 1e3)
103 - .toISOString()
104 - .substr(11, 8)
105 -
103 + function TooltipFormat(Second) {
104 + const result = new Date(Second * 1e3).toISOString().slice(11, 19)
106 105 return {
107 - hours: result.substr(0, 2),
108 - minutes: result.substr(3, 2),
109 - seconds: result.substr(6, 2),
106 + hours: result.slice(0, 2),
107 + minutes: result.slice(3, 5),
108 + seconds: result.slice(6, 8),
110 109 }
111 110 }
112 111
@@ -118,15 +117,16 @@
118 117 )
119 118 SeekbarElementInput.setAttribute("data-seek", skipTo)
120 119
121 - const t = formatTime(skipTo)
120 + const t = TooltipFormat(skipTo)
122 121 if (t.hours === "00") {SeekbarTooltip.textContent = `${t.minutes}:${t.seconds}`}
123 122 else {SeekbarTooltip.textContent = `${t.hours}:${t.minutes}:${t.seconds}`}
124 123
125 124 const rect = SeekbarProgressbarElement.getBoundingClientRect()
126 125 SeekbarTooltip.style.left = `${event.pageX - rect.left}px`
127 - SeekbarTooltip.style.opacity = '1'
126 + SeekbarTooltip.style.fontSize = '12'
128 127 SeekbarElementInput.addEventListener('mouseleave', () => {
129 - SeekbarTooltip.style.opacity = '0'
128 + SeekbarTooltip.style.fontSize = '0'
129 + SeekbarTooltip.style.left = VideoElement.currentTime / VideoElement.duration * 100 + '%'
130 130 })
131 131 }
132 132

Korbs's Avatar Korbs revised this gist 1743628431. Go to revision

2 files changed, 144 insertions, 7 deletions

TODO.md (file deleted)

@@ -1,3 +0,0 @@
1 - # TODO
2 - - [ ] Add seekbar
3 - - [ ] Add tooltip to seekbar

index.html

@@ -1,9 +1,148 @@
1 - <video src="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"></video>
2 - <p>Current Time: <span id="text-live">--:--</span></p>
3 - <p>Duration: <span id="text-full">--:--</span></p>
1 + <video controls style="width: 50%" src="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"></video>
2 + <div class="full-seekbar">
3 + <div class="video-timestamp">
4 + <span id="text-live">--:--</span>
5 + <span id="text-full">--:--</span>
6 + </div>
7 + <div class="seekbar">
8 + <span class="seekbar-current-progress"></span>
9 + <span class="seekbar-tooltip"></span>
10 + <input id="seek" name="seekbar" type="range"/>
11 + </div>
12 + </div>
13 +
14 + <style>
15 + body {
16 + font-family: arial;
17 + }
18 + .full-seekbar {
19 + display: flex;
20 + flex-direction: row-reverse;
21 + align-items: center;
22 + gap: 6px;
23 + }
24 + .video-timestamp {
25 + background: gray;
26 + border-radius: 3rem;
27 + color: white;
28 + display: flex;
29 + flex-direction: row;
30 + align-items: center;
31 + width: min-content;
32 + padding: 4px 12px 4px 4px;
33 + font-size: 14px;
34 + gap: 6px;
35 + }
36 + #text-live {
37 + width: max-content;
38 + background: #414141;
39 + border-radius: 3rem;
40 + padding: 4px 12px;
41 + }
42 + .seekbar {
43 + width: 100%;
44 + position: relative;
45 + background: gray;
46 + border-radius: 3rem;
47 + height: 6px;
48 + display: flex;
49 + align-items: center;
50 + }
51 + .seekbar input {
52 + position: absolute;
53 + left: 0;
54 + width: 100%;
55 + accent-color: red;
56 + opacity: 0;
57 + }
58 + .seekbar-tooltip {
59 + position: absolute;
60 + background: #d3d3d3;
61 + color: black;
62 + border-radius: 3rem;
63 + transform: translate(-24px, 0px);
64 + padding: 4px 8px;
65 + font-size: 12px;
66 + border: 6px white solid;
67 + }
68 + .seekbar-current-progress {
69 + background: red;
70 + border-radius: 3rem;
71 + height: 6px;
72 + display: flex;
73 + align-items: center;
74 + }
75 + </style>
76 +
4 77 <script>
5 - // Set variable for video tag
78 + // Set variables
6 79 const VideoElement = document.querySelector('video')
80 + const SeekbarTooltip = document.querySelector('.seekbar-tooltip')
81 + const SeekbarElementInput = document.querySelector('#seek')
82 + const SeekbarProgressbarElement = document.querySelector('.seekbar .seekbar-current-progress')
83 +
84 +
85 + ////////////////////////////////
86 + // Video Seekbar and Toolip //
87 + ////////////////////////////////
88 + // Set max attribute to the range input
89 + VideoElement.addEventListener('loadedmetadata', () => {
90 + const VideoMaxLength = Math.round(VideoElement.duration)
91 + SeekbarElementInput.setAttribute("max", VideoMaxLength)
92 + })
93 +
94 + // Update progress bar and live timestamp
95 + function UpdateSeekbar() {
96 + SeekbarElementInput.value = Math.floor(VideoElement.currentTime)
97 + SeekbarProgressbarElement.style.width = VideoElement.currentTime / VideoElement.duration * 100 + '%'
98 + }
99 +
100 + // Format timestamp for Seekbar Tooltip
101 + function formatTime(timeInSeconds) { /* Replace 'substr' with 'substring' */
102 + const result = new Date(timeInSeconds * 1e3)
103 + .toISOString()
104 + .substr(11, 8)
105 +
106 + return {
107 + hours: result.substr(0, 2),
108 + minutes: result.substr(3, 2),
109 + seconds: result.substr(6, 2),
110 + }
111 + }
112 +
113 + // Tooltip
114 + function updateSeekTooltip(event) {
115 + const skipTo = Math.round(
116 + (event.offsetX / event.target.clientWidth) *
117 + parseInt(event.target.getAttribute("max"), 10),
118 + )
119 + SeekbarElementInput.setAttribute("data-seek", skipTo)
120 +
121 + const t = formatTime(skipTo)
122 + if (t.hours === "00") {SeekbarTooltip.textContent = `${t.minutes}:${t.seconds}`}
123 + else {SeekbarTooltip.textContent = `${t.hours}:${t.minutes}:${t.seconds}`}
124 +
125 + const rect = SeekbarProgressbarElement.getBoundingClientRect()
126 + SeekbarTooltip.style.left = `${event.pageX - rect.left}px`
127 + SeekbarTooltip.style.opacity = '1'
128 + SeekbarElementInput.addEventListener('mouseleave', () => {
129 + SeekbarTooltip.style.opacity = '0'
130 + })
131 + }
132 +
133 + // If end-users clicks anywhere on the seekbar, skip video current time to the point
134 + SeekbarElementInput.addEventListener("mousemove", updateSeekTooltip)
135 + function skipAhead(event) {
136 + const skipTo = event.target.dataset.seek ? event.target.dataset.seek : event.target.value
137 + VideoElement.currentTime = skipTo
138 + SeekbarProgressbarElement.value = skipTo
139 + SeekbarElementInput.value = skipTo
140 + }
141 + SeekbarElementInput.addEventListener("input", skipAhead)
142 +
143 + ///////////////////////////////////
144 + // Video Duration and Timestamp //
145 + ///////////////////////////////////
7 146 // Convert the video duration to a readable format
8 147 Number.prototype.VideoReadableFormat = function () {
9 148 let seconds = Math.floor(this), hours = Math.floor(seconds / 3600)
@@ -22,6 +161,7 @@
22 161 }
23 162 // When the video is playing, automatically update the 'Current Time' text
24 163 VideoElement.addEventListener('timeupdate', Live)
164 + VideoElement.addEventListener('timeupdate', UpdateSeekbar)
25 165 function Live() {document.getElementById('text-live').innerText = `${VideoElement.currentTime.VideoReadableFormat()}`}
26 166 // Post the video's full duration
27 167 VideoElement.onloadedmetadata = function() {document.getElementById('text-full').innerText = `${VideoElement.duration.VideoReadableFormat()}`}

Korbs's Avatar Korbs revised this gist 1743577505. Go to revision

2 files changed, 31 insertions

TODO.md(file created)

@@ -0,0 +1,3 @@
1 + # TODO
2 + - [ ] Add seekbar
3 + - [ ] Add tooltip to seekbar

index.html(file created)

@@ -0,0 +1,28 @@
1 + <video src="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"></video>
2 + <p>Current Time: <span id="text-live">--:--</span></p>
3 + <p>Duration: <span id="text-full">--:--</span></p>
4 + <script>
5 + // Set variable for video tag
6 + const VideoElement = document.querySelector('video')
7 + // Convert the video duration to a readable format
8 + Number.prototype.VideoReadableFormat = function () {
9 + let seconds = Math.floor(this), hours = Math.floor(seconds / 3600)
10 + seconds -= hours*3600
11 + let minutes = Math.floor(seconds / 60)
12 + seconds -= minutes*60
13 + if (hours < 10) {hours = "0"+hours}
14 + if (minutes < 10) {minutes = "0"+minutes}
15 + if (seconds < 10) {seconds = "0"+seconds}
16 + if (hours === '00') {
17 + // Hide 'hour' if the video not over an hour long
18 + return minutes+':'+seconds
19 + } else {
20 + return hours+':'+minutes+':'+seconds
21 + }
22 + }
23 + // When the video is playing, automatically update the 'Current Time' text
24 + VideoElement.addEventListener('timeupdate', Live)
25 + function Live() {document.getElementById('text-live').innerText = `${VideoElement.currentTime.VideoReadableFormat()}`}
26 + // Post the video's full duration
27 + VideoElement.onloadedmetadata = function() {document.getElementById('text-full').innerText = `${VideoElement.duration.VideoReadableFormat()}`}
28 + </script>
Newer Older

Powered by Opengist ⋅ Load: 80ms⋅

English
⋅ Privacy Policy