逐渐将视频放慢下来，

Question

我正在一个项目中，视频在后台播放，并且需要在视频中的某些点触发事件。此时，在事件显示之前，视频需要逐渐放慢并停止播放。

到目前为止，我是通过获取帧频来实现这一点的，并且它越快，视频播放的速度就越慢，但是，它非常不稳定，并且跳得非常快，我希望可以使输出更平滑。同样，目前，当您随后要重播视频时，它会落在帧的减速区域中，并在开始再次播放之前开始减速。为了演示的目的，我在实际视频中放了不同的视频，因此实际上只有一个事件会触发，这是因为视频很小，但是在视频的不同点需要有多个事件。

var currentFrame = $('#currentFrame');
var video = VideoFrame({
  id: 'video',
  frameRate: 29.97,
  callback: function(frame) {
    currentFrame.html(frame);
    if ((frame > 60) && (frame < 135) || (frame > 875) && (frame < 952) || (frame > 1700) && (frame < 1798)) {
      decrease_rate(frame);
    } else {
      reset_frames_rate();
    }
  }
});

$('#play-pause').click(function() {
  ChangeButtonText();
});


window.decrease_rate = decrease_rate;
var frame_on_start = 0,
  frame_rate_dif,
  new_speed;

function decrease_rate(frame) {

  if (frame_on_start == 0) {
    console.log("frame rate reset");
    frame_on_start = frame;
  } else {
    frame_rate_dif = frame - frame_on_start;
    new_speed = 1 - (frame_rate_dif / 100);
    document.querySelector('video').playbackRate = new_speed;
    if (frame_rate_dif > 65) {
      reset_frames_rate();
      video.video.pause();
      video.stopListen();
      $("#play-pause").html('Play');
      show_event();

    }
  }


}


window.show_event = show_event;

function show_event() {
  $('.event1').removeClass('hide_event');

}

window.reset_frames_rate = reset_frames_rate;

function reset_frames_rate() {
  frame_on_start = 0;
  frame_rate_dif = 0;

  document.querySelector('video').playbackRate = 1;


}

function ChangeButtonText() {
  if (video.video.paused) {
    video.video.play();
    video.listen('frame');
    $("#play-pause").html('Pause');
    $('.event1').addClass('hide_event');
  } else {
    video.video.pause();
    video.stopListen();
    $("#play-pause").html('Play');
  }
}

#container {
  position: relative;
}

.hide_event {
  display: none;
}

.event1 {
  position: absolute;
  top: 40%;
  left: 0px;
  background-color: white;
  width: 100%;
  text-align: center;
}

<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <video height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>
  <div id="event1" class="event1 hide_event">
    <p>Display event</p>
  </div>
</div>
<div class="frame">
  <span id="currentFrame">0</span>
</div>
<div id="controls">
  <button id="play-pause">Play</button>
</div>