平滑倒带的 HTML 视频

Question

我正在尝试设置带有搜索按钮和平滑倒带功能的 HTML5 视频播放器。但在其他一些设备中，当视频倒带时，感觉像是在跳过。我尝试使用 video.playbackRate 但仍然无法正常工作。有什么办法可以改善我的工作吗？

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>

这是我玩代码的地方 - https://codepen.io/pj-villanueva/pen /qBVeXev