Add waveform marker for current video position

pull/237/head
ElementalAlchemist 3 years ago committed by Mike Lang
parent 609597a547
commit 94e1ecdd6d

@ -42,7 +42,10 @@
<video id="video" class="video-js" controls preload="auto"></video>
<div id="clip-bar"></div>
<img id="waveform" alt="Waveform for the video" />
<div id="waveform-container">
<img id="waveform" alt="Waveform for the video" />
<div id="waveform-marker"></div>
</div>
<div id="editor-help">
<a href="#" id="editor-help-link">Help</a>

@ -370,6 +370,13 @@ async function initializeVideoInfo() {
rangeDataUpdated();
}
});
player.on("timeupdate", () => {
const player = getVideoJS();
const currentTime = player.currentTime();
const duration = player.duration();
const timePercent = (currentTime / duration) * 100;
document.getElementById("waveform-marker").style.left = `${timePercent}%`;
});
}
function updateWaveform() {

@ -90,6 +90,10 @@ a,
height: 100%;
}
#waveform-container {
position: relative;
}
#waveform {
width: 100%;
@ -100,6 +104,14 @@ a,
max-height: 100px;
}
#waveform-marker {
width: 1px;
height: 100%;
background: #dd8800a0;
position: absolute;
top: 0;
}
#editor-help {
z-index: 1;
}

Loading…
Cancel
Save