83 lines
3.2 KiB
Text
83 lines
3.2 KiB
Text
|
<script is:inline>
|
||
|
|
function Seek() {
|
||
|
|
var Player = document.querySelector('video')
|
||
|
|
const timeElapsed = document.getElementById("current");
|
||
|
|
const duration = document.getElementById("duration");
|
||
|
|
function formatTime(timeInSeconds) {
|
||
|
|
const result = new Date(timeInSeconds * 1e3)
|
||
|
|
.toISOString()
|
||
|
|
.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}`;
|
||
|
|
duration.setAttribute(
|
||
|
|
"datetime",
|
||
|
|
`${time.minutes}m ${time.seconds}s`,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
Player.addEventListener("loadedmetadata", initializeVideo);
|
||
|
|
function updateTimeElapsed() {
|
||
|
|
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");
|
||
|
|
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}`;
|
||
|
|
duration.setAttribute(
|
||
|
|
"datetime",
|
||
|
|
`${time.minutes}m ${time.seconds}s`,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function updateProgress() {
|
||
|
|
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");
|
||
|
|
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`;
|
||
|
|
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);
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
seek.addEventListener("input", skipAhead);
|
||
|
|
|
||
|
|
initializeVideo();
|
||
|
|
}
|
||
|
|
Seek();
|
||
|
|
</script>
|