HTML Video with smooth rewind

Question

I'm trying setup HTML5 Video Player with seek buttons and smooth on rewind function. But in some other devices it feels like skipping when the video is on rewind. I tried to use video.playbackRate but still not working. Is there any way to improve my work?

const video = document.getElementsByTagName('video')[0];
video.load();
const start_time = [0, 10, 15, 30];
const pause_time = [10, 15, 30, video.duration - 1];
var intervalRewind;

jQuery('.btn-seek').click(function() {
  clearInterval(intervalRewind);
  var SelectedVideoID = $(this).attr('vid-id');
  var CurrentVidID = $('#slide-data').attr('slide-id');
  video.play(); // workaround
  var NextSlide;
  if (start_time.length - 1 > SelectedVideoID) {
    NextSlide = Number(SelectedVideoID) + Number(1);
  } else {
    NextSlide = Number(SelectedVideoID);
  }

  if (CurrentVidID > SelectedVideoID) {
    rewind(0.9, start_time[SelectedVideoID], SelectedVideoID, NextSlide);
  } else {
    clearInterval(intervalRewind);
    video.addEventListener("timeupdate", pausing_function);
  }
  $('#slide-data').attr('slide-id', NextSlide);
  $('#slide-data').attr('slide-pause', SelectedVideoID);
});

function pausing_function() {
  var CurrentSlideID = $('#slide-data').attr('slide-pause');
  if (this.currentTime >= pause_time[CurrentSlideID]) {
    this.pause();
    this.removeEventListener("timeupdate", pausing_function);
  }
};

function pausing_rewind() {
  var CurrentSlideID = $('#slide-data').attr('slide-id');
  if (this.currentTime >= start_time[CurrentSlideID]) {
    this.pause();
    this.removeEventListener("timeupdate", pausing_rewind);
  }
};


function isInArray(value, array) {
  return array.indexOf(value) > -1;
}

function rewind(RewindSpeed, get_pause_time, SelectedVideoID, NextSlide) {
  video.playbackRate = 1.0;
  var startSystemTime = new Date().getTime();
  var startVideoTime = video.currentTime;

  $('#slide-data').attr('slide-id', SelectedVideoID);
  $('#slide-data').attr('slide-pause', SelectedVideoID);

  intervalRewind = setInterval(function() {
    if (video.currentTime <= get_pause_time) {
      clearInterval(intervalRewind);
      video.pause();
    } else {
      var elapsed = new Date().getTime() - startSystemTime;
      video.currentTime = Math.max(startVideoTime - elapsed * RewindSpeed / 1000.0, 0);
    }
  }, 30);
}

.vjs-loading-spinner {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.4.6/video.js"></script>

<video id="my-video" class="video-js" preload="auto" width="450" height="250" data-setup="{}" type="video/mp4"><source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /></video>

<button class="btn-seek" id="seek_btn1" vid-id="0">Seek 1</button>
<button class="btn-seek" id="seek_btn" vid-id="1">Seek 2</button>
<button class="btn-seek" id="seek_btn" vid-id="2">Seek 3</button>
<button class="btn-seek" id="seek_btn" vid-id="3">Seek 4</button>

<div id="slide-data" slide-id="0" slide-pause=""></div>

This is where I play around my code - https://codepen.io/pj-villanueva/pen/qBVeXev