I've got a project, where I have a video as background and that video rewinds due to mouse position on screen on axis x. So in a nutshell, if your cursor is on the left side of screen, video is on 00:00 (0%), if cursor is in the middle, video is on 02:00 (50%), etc... I've got this working with this script:
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; }); I've also created a pen, so you can try that yourself: https://codepen.io/honzis1364/pen/bvBZOB
But the problem is, that video rewind is choppy on some browsers, well most of them. Safari is perfect, it is flow video rewind backwards and forwards, no problem even with fast mouse movements from left to right and back. But on Chrome it starts rewinding choppy, like every 20 frame or so. And Firefox is disaster, it rewinds only after you stop cursor movement, you can try it yourself.
I can upload a video from Safari, if somebody can't test on Safari, it's a perfection in there.
I guess it's a problem of browsers, something like it hasn't got enough memory to show every frame of the video or something like that?
Could somebody please tell me how can I (if so) fix that, so the video rewind would be smooth in every browser like in Safari?
Thanks a lot colleagues!
1 Answers
Answers 1
That's probably because your mousemove event is firing too much, and the browser has to keep moving the video cursor to the correct value. Have you tried throttling it? Also, perhaps rounding it to the nearest .1 value will help with performance, too:
var mouseX; $(document).mousemove($.throttle(100, 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.toFixed(1); })); 
0 comments:
Post a Comment