CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml5-video
Androbaut
Androbaut

Reputation: 409

Use jQuery to playback video when mouse moves on x axis

I'm using this little bit of jQuery to scrub back & forth through a video when the cursor moves on the x axis.

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

But I've run into a few issues:

-Works as expected in Safari, but lags considerably in Chrome (haven't tested IE/Edge). I looked for questions that were similar to mine, and found this, but I'm unsure about how best to move forward. Do I need to create a div that covers the document and bind .mousemove() to that? Find a different solution? Create a tween using greensock?

Any advice, ideas on how to move forward, constructive criticism is much appreciated!

Upvotes: 0

Views: 1336

Answers (1)

axel.michel
axel.michel

Reputation: 5764

There are a bunch of issues with mousemove in Chrome. The event shows a serious lag on certain html elements (document is one of them - because the event it's not firing constantly). So moving the event listener to another element can help. It is also helpful to disable the user selection of the element which captures the mousemove. Finally in your case it seems to help to reduce the precision of the calculated time. The result is still not as smooth as in safari, but... well decide yourself: updated codepen demo here.

In Javascript it's just the modified selector and the rounding of the time.

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;
});

In CSS the syntax to avoid user selection.

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

Upvotes: 1

Related Questions