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

Question

当光标在 x 轴上移动时，我正在使用这一点 jQuery 在视频中来回移动。

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

但我运行遇到了一些问题：

-在 Safari 中按预期工作，但在 Chrome 中明显滞后（尚未测试 IE/Edge）。我查找了与我的问题类似的问题，并找到了 this，但我不确定如何最好地继续前进。我是否需要创建一个覆盖文档的 div 并将 .mousemove() 绑定到它？寻找不同的解决方案？使用 greensock 创建补间？

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

Answer 1

Chrome 中的 mousemove 存在大量问题。该事件在某些 html 元素上显示出严重滞后（文档是其中之一 - 因为事件不会持续触发）。因此，将事件侦听器移动到另一个元素会有所帮助。禁用用户选择捕获鼠标移动的元素也很有帮助。最后，在您的情况下，它似乎有助于降低计算时间的精度。结果仍然不如 safari 中那么顺利，但是......你自己决定吧：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 播放视频

Use jQuery to playback video when mouse moves on x axis

html

javascript

css

jquery

html5-video

但我运行遇到了一些问题：

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

Use jQuery to playback video when mouse moves on x axis

html

javascript

css

jquery

html5-video

但我 运行 遇到了一些问题：

但我运行遇到了一些问题：