Adjust bounding correctly and fix invalid date error
This commit is contained in:
parent
0c7d506ddb
commit
d60188a96c
1 changed files with 13 additions and 12 deletions
|
@ -30,19 +30,12 @@ const {
|
|||
* for the JavaScript code in this page.
|
||||
*
|
||||
*/
|
||||
|
||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||
Player.addEventListener('durationchange', (event) => {Seek()})
|
||||
function Seek() {
|
||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||
const timeElapsed = document.querySelector('#zorn-player-' + PlayerName + ' #current')
|
||||
const duration = document.querySelector('#zorn-player-' + PlayerName + ' #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)
|
||||
|
@ -52,6 +45,15 @@ function Seek() {
|
|||
`${time.minutes}m ${time.seconds}s`,
|
||||
)
|
||||
}
|
||||
function formatTime(timeInSeconds) {
|
||||
const result = new Date(timeInSeconds * 1e3)
|
||||
.toISOString()
|
||||
.substr(11, 8)
|
||||
return {
|
||||
minutes: result.substr(3, 2),
|
||||
seconds: result.substr(6, 2),
|
||||
}
|
||||
}
|
||||
Player.addEventListener("loadedmetadata", initializeVideo)
|
||||
function updateTimeElapsed() {
|
||||
const time = formatTime(Math.round(Player.currentTime))
|
||||
|
@ -89,7 +91,7 @@ function Seek() {
|
|||
seek.setAttribute("data-seek", skipTo)
|
||||
const t = formatTime(skipTo)
|
||||
seekTooltip.textContent = `${t.minutes}:${t.seconds}`
|
||||
const rect = Player.getBoundingClientRect()
|
||||
const rect = progressBar.getBoundingClientRect()
|
||||
seekTooltip.style.left = `${event.pageX - rect.left}px`
|
||||
seekTooltip.style.opacity = '1'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
|
||||
|
@ -110,5 +112,4 @@ function Seek() {
|
|||
|
||||
initializeVideo()
|
||||
}
|
||||
setTimeout(() => {Seek()}, 1000) // Prevent invalid date error
|
||||
</script>
|
Loading…
Add table
Reference in a new issue