Like 0
Fork 0

Last active 1743636566

Revision 140d0cc015805803c812418dd992c92ccce3ab2b

index.html Raw
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
77<script>
78 // Set variables
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 ///////////////////////////////////
146 // Convert the video duration to a readable format
147 Number.prototype.VideoReadableFormat = function () {
148 let seconds = Math.floor(this), hours = Math.floor(seconds / 3600)
149 seconds -= hours*3600
150 let minutes = Math.floor(seconds / 60)
151 seconds -= minutes*60
152 if (hours < 10) {hours = "0"+hours}
153 if (minutes < 10) {minutes = "0"+minutes}
154 if (seconds < 10) {seconds = "0"+seconds}
155 if (hours === '00') {
156 // Hide 'hour' if the video not over an hour long
157 return minutes+':'+seconds
158 } else {
159 return hours+':'+minutes+':'+seconds
160 }
161 }
162 // When the video is playing, automatically update the 'Current Time' text
163 VideoElement.addEventListener('timeupdate', Live)
164 VideoElement.addEventListener('timeupdate', UpdateSeekbar)
165 function Live() {document.getElementById('text-live').innerText = `${VideoElement.currentTime.VideoReadableFormat()}`}
166 // Post the video's full duration
167 VideoElement.onloadedmetadata = function() {document.getElementById('text-full').innerText = `${VideoElement.duration.VideoReadableFormat()}`}
168</script>

Powered by Opengist ⋅ Load: 47ms⋅

English
⋅ Privacy Policy