Воспроизведение видео вперед и назад, как бумеранг с функцией паузы, чтобы сохранить текущий кадр

Question

Все, что мне нужно, это когда я нажимаю паузу (пользовательская кнопка для приостановки видео, а не пауза на самом проигрывателе), она будет приостановлена, как показано ниже 1. Если видео идет вперед, то оно приостанавливается на текущем кадреи будет воспроизводиться с текущего кадра, где я приостановил его.2. Если видео идет в обратном направлении, оно будет просто продолжать реверсирование до тех пор, пока оно не достигнет нуля или времени начала.

Я уже пытался приостановить его, но реверс все еще идет (если идет назад).

Here is my html tag


<div id="qqx64h8yp1">
    <div class="videos">
        <div class="element-wrap">
            <video crossorigin="anonymous" style="" class="b_forward">
                <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>


Now here is my jquery/javascript

function boomerangForward(targetId){
    var videoX = document.getElementById(targetId).getElementsByTagName('video')[0],
        audioContent = $('#' + targetId).find('source').attr('src'),
        splitTime = audioContent.split('#')[1],
        endTime = splitTime.split(',')[1];

    $('#' + targetId).find('video').addClass('b_forward');

    videoX.play();

    if ($('#' + targetId).find('video').hasClass('b_forward')) {
        videoX.ontimeupdate = function() {
            checkEndTime(2.5, videoX, targetId);
        };
    }
}

function checkEndTime(endTime, videoX, targetId){
    var videoStatus  = videoX.paused,
        videoCurrent = videoX.currentTime;

    if (videoCurrent >= endTime) {
        videoX.pause();
        if (videoStatus) {
            console.log('Video Reached 2.5');
            boomBackward(videoX, targetId);
        }
    }
}

function boomBackward(videoX, targetId){
    $('#' + targetId).find('video').removeClass('b_forward');
    intervalRewind = setInterval(function(){
        if(videoX.currentTime > 0){
            $('#' + targetId).find('video').addClass('b_reverse');
            videoX.currentTime += -.1;
        }else{
            $('#' + targetId).find('video').removeClass('b_reverse');
            clearBoomerangIntervals(videoX, targetId);
        }
    },100);
}

function clearBoomerangIntervals(videoX, targetId){
    var videoX = document.getElementById(targetId).getElementsByTagName('video')[0];
    clearInterval(intervalRewind);
    if (videoX.currentTime == 0) {
        boomerangForward(targetId);
    } 
}

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