当光标在 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;
});
但我遇到了一些问题:
- 在 Safari 中按预期工作,但在 Chrome 中明显滞后(尚未测试 IE/Edge)。 我查找了与我类似的问题,并找到了 this ,但我不确定如何最好地前进。我是否需要创建一个覆盖文档的 div 并将 .mousemove() 绑定(bind)到它?寻找不同的解决方案?使用 greensock 创建补间?
非常感谢任何关于如何前进的建议、想法和建设性的批评!
最佳答案
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;
}
关于javascript - 当鼠标在 x 轴上移动时使用 jQuery 播放视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39983037/