在Chrome和Firefox中，刷新HTML视频不稳定

Question

在Chrome或Firefox上使用范围输入进行清理时，HTML视频比在Safari，Internet Explorer 11或Edge上查看时更加笨拙。

有没有办法帮助Chrome＆amp; Firefox和其他浏览器一样流畅吗？

---更新---

奇怪的是，在发布时运行代码段时看起来比在代码段编辑器本身中显得更顺畅（不幸的是，在我尝试使用它的页面上）。

话虽如此，这里有几个例子，其中不同的浏览器行为更明显：

1）在CodePen中，我从中获取灵感：

https://codepen.io/ollieRogers/pen/lfeLc

2）关于JSFiddle：

https://jsfiddle.net/L9fdyg3j/42/

$(document).ready(function(){
  var vid = document.getElementById('vid'); 
  var playbackConst = 500; 
  var initialized = false;

  vid.addEventListener('loadedmetadata', function() {
    if (!initialized){
      var slider = $('#slide');
      // set slider max according to video length
      var lastFrame = Math.floor(vid.duration) * playbackConst;
      slider.attr('max', lastFrame);
      // set slider to middle position
      slider.attr('value', lastFrame/2);
      // also start video in the middle
      vid.currentTime  = lastFrame/(2 * playbackConst);
      // Pause the video immediately ...
      vid.pause();
      initialized = true;
    }
  });

  // set video to current position of the slider when slider input is modified
  $(document).on('input change', 'input', function() {
    vid.currentTime  = $(this).val()/playbackConst;
  });

});

#slide{
  width: 640px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="vid" muted playsinline autoplay="true" preload="auto" >
    <source type="video/mp4" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4">
  <p>Your browser does not support video playback</p>
</video>

<br>
<input id="slide" type="range" >
<br>