如何跳过自定义视频播放器上的帧?现在我有这个自定义视频。并且它有一个橙色的栏(例如进度栏),可以在持续时间内向前移动,但问题是我无法跳过帧。
如何使用自定义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;
}