No ; in sight
This commit is contained in:
parent
53ac2d61c0
commit
16be696f91
|
|
@ -10,7 +10,7 @@
|
|||
* redistribute it and/or modify it under the terms of the GNU
|
||||
* General Public License (GNU GPL) as published by the Free Software
|
||||
* Foundation, either version 3 of the License, or (at your option)
|
||||
* any later version. The code is distributed WITHOUT ANY WARRANTY;
|
||||
* any later version. The code is distributed WITHOUT ANY WARRANTY
|
||||
* without even the implied warranty of MERCHANTABILITY or FITNESS
|
||||
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
|
||||
*
|
||||
|
|
@ -26,83 +26,83 @@
|
|||
*/
|
||||
function Seek() {
|
||||
var Player = document.querySelector('video')
|
||||
const timeElapsed = document.getElementById("current");
|
||||
const duration = document.getElementById("duration");
|
||||
const timeElapsed = document.getElementById("current")
|
||||
const duration = document.getElementById("duration")
|
||||
function formatTime(timeInSeconds) {
|
||||
const result = new Date(timeInSeconds * 1e3)
|
||||
.toISOString()
|
||||
.substr(11, 8);
|
||||
.substr(11, 8)
|
||||
return {
|
||||
minutes: result.substr(3, 2),
|
||||
seconds: result.substr(6, 2),
|
||||
};
|
||||
}
|
||||
}
|
||||
function initializeVideo() {
|
||||
const videoDuration = Math.round(Player.duration);
|
||||
const time = formatTime(videoDuration);
|
||||
duration.innerText = `${time.minutes}:${time.seconds}`;
|
||||
const videoDuration = Math.round(Player.duration)
|
||||
const time = formatTime(videoDuration)
|
||||
duration.innerText = `${time.minutes}:${time.seconds}`
|
||||
duration.setAttribute(
|
||||
"datetime",
|
||||
`${time.minutes}m ${time.seconds}s`,
|
||||
);
|
||||
)
|
||||
}
|
||||
Player.addEventListener("loadedmetadata", initializeVideo);
|
||||
Player.addEventListener("loadedmetadata", initializeVideo)
|
||||
function updateTimeElapsed() {
|
||||
const time = formatTime(Math.round(Player.currentTime));
|
||||
timeElapsed.innerText = `${time.minutes}:${time.seconds}`;
|
||||
const time = formatTime(Math.round(Player.currentTime))
|
||||
timeElapsed.innerText = `${time.minutes}:${time.seconds}`
|
||||
timeElapsed.setAttribute(
|
||||
"datetime",
|
||||
`${time.minutes}m ${time.seconds}s`,
|
||||
);
|
||||
)
|
||||
}
|
||||
Player.addEventListener("timeupdate", updateTimeElapsed);
|
||||
const progressBar = document.querySelector(".vc-progress-bar");
|
||||
const seek = document.getElementById("seek");
|
||||
Player.addEventListener("timeupdate", updateTimeElapsed)
|
||||
const progressBar = document.querySelector(".vc-progress-bar")
|
||||
const seek = document.getElementById("seek")
|
||||
function initializeVideo() {
|
||||
const videoDuration = Math.round(Player.duration);
|
||||
seek.setAttribute("max", videoDuration);
|
||||
progressBar.setAttribute("max", videoDuration);
|
||||
const time = formatTime(videoDuration);
|
||||
duration.innerText = `${time.minutes}:${time.seconds}`;
|
||||
const videoDuration = Math.round(Player.duration)
|
||||
seek.setAttribute("max", videoDuration)
|
||||
progressBar.setAttribute("max", videoDuration)
|
||||
const time = formatTime(videoDuration)
|
||||
duration.innerText = `${time.minutes}:${time.seconds}`
|
||||
duration.setAttribute(
|
||||
"datetime",
|
||||
`${time.minutes}m ${time.seconds}s`,
|
||||
);
|
||||
)
|
||||
}
|
||||
function updateProgress() {
|
||||
seek.value = Math.floor(Player.currentTime);
|
||||
seek.value = Math.floor(Player.currentTime)
|
||||
document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
|
||||
}
|
||||
Player.addEventListener("timeupdate", updateProgress);
|
||||
const seekTooltip = document.getElementById("seek-tooltip");
|
||||
Player.addEventListener("timeupdate", updateProgress)
|
||||
const seekTooltip = document.getElementById("seek-tooltip")
|
||||
function updateSeekTooltip(event) {
|
||||
const skipTo = Math.round(
|
||||
(event.offsetX / event.target.clientWidth) *
|
||||
parseInt(event.target.getAttribute("max"), 10),
|
||||
);
|
||||
seek.setAttribute("data-seek", skipTo);
|
||||
const t = formatTime(skipTo);
|
||||
seekTooltip.textContent = `${t.minutes}:${t.seconds}`;
|
||||
const rect = Player.getBoundingClientRect();
|
||||
seekTooltip.style.left = `${event.pageX - rect.left}px`;
|
||||
)
|
||||
seek.setAttribute("data-seek", skipTo)
|
||||
const t = formatTime(skipTo)
|
||||
seekTooltip.textContent = `${t.minutes}:${t.seconds}`
|
||||
const rect = Player.getBoundingClientRect()
|
||||
seekTooltip.style.left = `${event.pageX - rect.left}px`
|
||||
seekTooltip.style.opacity = '1'
|
||||
document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
|
||||
seek.addEventListener('mouseleave', () => {
|
||||
seekTooltip.style.opacity = '0'
|
||||
})
|
||||
}
|
||||
seek.addEventListener("mousemove", updateSeekTooltip);
|
||||
seek.addEventListener("mousemove", updateSeekTooltip)
|
||||
function skipAhead(event) {
|
||||
const skipTo = event.target.dataset.seek
|
||||
? event.target.dataset.seek
|
||||
: event.target.value;
|
||||
Player.currentTime = skipTo;
|
||||
progressBar.value = skipTo;
|
||||
seek.value = skipTo;
|
||||
: event.target.value
|
||||
Player.currentTime = skipTo
|
||||
progressBar.value = skipTo
|
||||
seek.value = skipTo
|
||||
}
|
||||
seek.addEventListener("input", skipAhead);
|
||||
seek.addEventListener("input", skipAhead)
|
||||
|
||||
initializeVideo();
|
||||
initializeVideo()
|
||||
}
|
||||
Seek();
|
||||
Seek()
|
||||
</script>
|
||||
Loading…
Reference in a new issue