javascript - 响应式视频浏览器不稳定，Safari 除外

Question

我有一个元素，其中我有一个视频作为背景，并且由于鼠标在屏幕上的 x 轴位置，该视频倒带。所以简而言之，如果你的光标在屏幕的左侧，视频在 00:00 (0%)，如果光标在中间，视频在 02:00 (50%)，等等......我已经使用此脚本进行了此操作:

    var mouseX;
    $(document).mousemove( function(e) {
        mouseX = e.pageX; 

        var timV = $(".video1").get(0).duration;
        var valV = (timV*mouseX/$(window).width());
        var valC = $(".video1").get(0).currentTime;

        $(".video1").get(0).currentTime = valV;
    });

我还创建了一支笔，所以你可以自己试试:https://codepen.io/honzis1364/pen/bvBZOB

但问题是，视频回放在某些浏览器上时断断续续，大部分浏览器都是如此。 Safari 非常完美，它可以让视频来回倒带，即使鼠标左右快速移动也没有问题。但是在 Chrome 上它开始倒带断断续续，就像每 20 帧左右。而 Firefox 是个灾难，只有在你停止光标移动后它才会倒带，你可以自己试试。

我可以从 Safari 上传视频，如果有人无法在 Safari 上进行测试，那就完美了。

我想这是浏览器的问题，比如它没有足够的内存来显示视频的每一帧之类的？

有人能告诉我如何(如果可以)解决这个问题，这样视频倒带在每个浏览器中都像 Safari 一样流畅吗？

非常感谢同事们!

Answer 1

这可能是因为您的 mousemove 事件触发太多，浏览器必须不断将视频光标移动到正确的值。你试过了吗throttling它？此外，也许将其四舍五入到最接近的 .1 值也有助于提高性能:

var mouseX;
$(document).mousemove($.throttle(100, function(e) {
  mouseX = e.pageX;

  var vid = $('.video1').get(0);

  var timV = vid.duration;
  var valV = timV * mouseX / $(window).width();
  vid.currentTime = valV.toFixed(1);
}));

概念验证示例，使用热链接的 mp4 视频(如果链接被删除，示例可能无法工作):

$(function() {
  var mouseX;
  $(document).mousemove($.throttle(100, function(e) {
    mouseX = e.pageX;

    var vid = $('.video1').get(0);

    var timV = vid.duration;
    var valV = timV * mouseX / $(window).width();
    vid.currentTime = valV.toFixed(1);
  }));
});

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #333;
  background-attachment: fixed;
  background-size: cover;
}

#video-background {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.js"></script>
<video muted loop id="video-background" class="video1">
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>