Почему я не могу пропустить кадры или искать на моем собственном видеоплеере? HTML и Javascript - PullRequest
1 голос
/ 02 мая 2019

Как я могу пропустить кадр на моем пользовательском видеоплеере?сейчас у меня есть это пользовательское видео.и у него есть оранжевая полоса, например индикатор выполнения, для продолжения движения вперед, но проблема в том, что я не могу пропустить кадры.

Как я могу пропустить кадры с моим пользовательским 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...