除 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>