Question

我正在使用这一点jQuery来擦洗＆amp;当光标在x轴上移动时，通过视频。

var mouseX;

$(document).mousemove( function moveFunc(e) {
mouseX = e.clientX;
var timV = $("#deko_vid").get(0).duration;
var valV = (timV*mouseX/$(document).width());
$("#deko_vid").get(0).currentTime = valV;

});

Codepen Example

但我遇到了一些问题：

-Works正如Safari中所期望的那样，但在Chrome中却相当滞后（尚未测试IE / Edge）。我查找了与我类似的问题，并找到this，但我不确定如何向前推进。我是否需要创建一个覆盖文档的div并将.mousemove（）绑定到该文件？查找其他解决方案？使用greensock创建补间？

非常感谢任何有关如何前进，建设性批评的建议和想法！

Answer 1

Chrome中有一些关于mousemove的问题。事件显示某些html元素严重滞后（文档就是其中之一 - 因为事件不是经常发生）。因此，将事件侦听器移动到另一个元素可以提供帮助。禁用用户选择捕获mousemove的元素也很有帮助。最后在您的情况下，它似乎有助于降低计算时间的精度。结果仍然不如野生动物园那么顺利，但是......好好决定自己：updated codepen demo here。

在Javascript中，它只是修改后的选择器和时间的四舍五入。

var mouseX;
// using the video element instead of the complete document 
$('video').mousemove( function moveFunc(e) {
    mouseX = e.clientX;
    var valV = (timV * mouseX/ $(document).width()),
        timV = $("#deko_vid").get(0).duration;
    // reducing the precision of calculation
    valV = Math.round(valV * 100) / 100;
    $("#deko_vid").get(0).currentTime = valV;
});

在CSS中用于避免用户选择的语法。

video  {
  display: block;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select:none;
   ::selection: none;  
}

当鼠标在x轴上移动时，使用jQuery播放视频

但我遇到了一些问题：

1 个答案: