Как я могу пропустить кадр на моем пользовательском видеоплеере?сейчас у меня есть это пользовательское видео.и у него есть оранжевая полоса, например индикатор выполнения, для продолжения движения вперед, но проблема в том, что я не могу пропустить кадры.
Как я могу пропустить кадры с моим пользовательским VID-плеером?вот что у меня в моих кодах
HTML
<div class="container"> <!--Holds the Video-->
<div class="c-video">
<video class="video" src="images/videoplayback.mp4"></video>
<div class="controls"> <!--Make it all a custom controls like play pause vol etc for the video player-->
<div class="orange-bar"> <!--Oranger Bar Holder-->
<div class="orange-juice"></div> <!--Seek Bar made it like a progress bar-->
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
</div>
</div>
</div>
Javascript
var video = document.querySelector('.video');
var juice = document.querySelector('.orange-juice');
var btn = document.getElementById('play-pause');
function togglePlayPause(){
if (video.paused) {
btn.className = "pause";
video.play();
}else{
btn.className = "play";
video.pause();
}
}
//Play the video player
btn.onclick = function(){
togglePlayPause();
};
//When play button click, the orange bar will move forward, acting like the progress bar
video.addEventListener('timeupdate', function(){
var juicePos = video.currentTime / video.duration;
juice.style.width = juicePos * 100 + "%";
//When the video ends the pause button will change to play
if (video.ended) {
btn.className = "play";
}
});
//Trying to make the seek bar or trying to skip frame
function vidSeek(){
var seekto = video.duration * (juice.value / 100);
video.currentTime = seekto;
}