Question

我有一个项目，我有一个视频作为背景，由于x轴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>

除Safari外，反应式视频浏览器不稳定

1 个答案: