Utilize jQuery to trigger video playback based on the horizontal movement of the mouse

Utilizing this jQuery script to navigate back and forth in a video as the cursor moves along 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;

});

Example on Codepen

Encountering some challenges:

-Works well on Safari but experiences lag in Chrome (yet to test IE/Edge). Research led me to this post, but unsure about best way forward. Should I create a covering div for the document and bind .mousemove() to it? Seek an alternative solution? Implement a tween using greensock?

Open to advice, new ideas, and constructive feedback on how to progress!

javascriptjqueryhtmlcsshtml5-video

Answer №1

Chrome has some issues with mousemove events, causing lag on certain HTML elements such as the document. One solution is to move the event listener to a different element and disable user selection on the capturing element. To improve performance, you can also reduce the precision of calculated time. While this may not achieve the same smoothness as Safari, you can try it out for yourself in this updated CodePen demo.

In Javascript, modify the selector and round the time:

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

In CSS, prevent user selection:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss

What is the best way to invoke a custom hook that returns a value within the useEffect hook?

I have a unique situation where I am using a custom hook that returns an object based on the parameter it receives. I now need to modify this behavior by recreating the object with updated parameters within the useEffect function. The challenge is that I c ...

javascriptreactjsreact-hooks

Problematic response design

On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...

htmlcssresponsive-design

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

Tips for handling attributes of an HTML element when the HTML content is stored within a variable

Here is a sample HTML code stored in a variable: var sHtml='' sHtml='<div class="diagnostic_picture"><img src="test1.gif" /></div>'; sHtml=sHtml + '<div class="diagnostic_picture"><img src="test2.gif" /& ...

jquery

Identifying a flaw in an HTML5 video

I am attempting to identify when an error occurs while playing an HTML5 video. Specifically, I am encountering a situation where I am trying to play an HLS video on a MAC (where "canPlayType" is at least "maybe"), but the video will not play for unknown r ...

javascripthtmlvideo

When using setState in the onRowSelection event with React's Material-ui tableRow, the selection cannot be properly controlled

Currently, I am working with a material-ui table https://i.stack.imgur.com/JIzLT.png and my goal is to pass selected rows to a function when the DELETE button is clicked. constructor(props) { super(props); this.state = { selecte ...

javascriptreactjsmaterial-designstate

Exploring a collection of objects housed in a json document

Currently, I'm looking to retrieve a collection of objects using JavaScript from a JSON file that resides on my website. While I could easily embed the array of objects directly into my JavaScript code, I am interested in understanding how to work wit ...

javascriptjqueryjson

Create Vuetify components dynamically through programming

My goal is to dynamically create Vuetify components and insert them into the DOM. I've had success with simple components like v-card or v-dialogue, but I'm running into issues with v-data-tables. To demonstrate the problem, I set up a codesandb ...

javascriptvue.jscomponentsvuetify.js

What is preventing me from loading Google Maps within my Angular 2 component?

Below is the TypeScript code for my component: import {Component, OnInit, Output, EventEmitter} from '@angular/core'; declare var google: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', st ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3angular

Issue with publishing npm package using yarn package manager

I'm currently in the process of releasing a fresh package. Utilizing ES6, I've been transpiling my files through babel to start with. However, I've hit a roadblock at this particular stage: https://i.stack.imgur.com/iIVp6.png This part se ...

javascriptnode.jsnpmyarnpkg

What steps can I take to resolve the issue of encountering the error message "Module '@endb/sqlite' not found"?

Currently, I am facing a challenge while attempting to set up a database for my discord bot using node.js with sql/sqlite 3. I have installed the necessary dependencies such as 'endb', sql, and sqlite3 through npm install. However, upon completio ...

javascriptnode.jssqlitenpmdiscord.js

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

There are two image divs stacked on top of each other, positioned beside a fluid header logo (.svg) also contained in a div. The HTML: <header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div cla ...

javascriptjqueryhtmlcssresponsive-design

Contrasts between the storage of data in a static function versus a static object

Trying to figure out the best way to reset a react class component back to its initial state, I came across two different implementations. In my own version, I created an object with initial values and set the component's state equal to it: // My imp ...

javascriptreactjsecmascript-6

Fixing the height of the body padding with JS or JQuery for a

I have a rather straightforward question that pertains to an issue I am facing while building a website using BS4. Specifically, my problem revolves around a fixed-top navbar with the class "fixed-top". The challenge stems from not knowing the actual heig ...

javascriptjqueryhtmltwitter-bootstrap

The UI in an angular directive is not getting refreshed due to issues with the

Check out this fiddle http://jsfiddle.net/3jos4pLb/ I have a problem where my directive communicates with the parent controller scope by setting the finalValue. However, when the window is resized, the scope.finalValue updates in the console but the UI d ...

javascriptangularjs

transfer the information from a particular key in JavaScript to Vue

Just starting out with Vue and working on a web app. I have some data in the JavaScript that includes keys like title, author, etc. I'm looking to pass the value associated with the title key to Vue. How can I achieve this? I attempted using book.tit ...

javascriptvue.js

Exploring the Benefits of jQuery History Plugin, Optimizing with Google Sitemap and

Despite searching online, I have yet to find a precise solution to my query. On my index.php page, there are two specific DIV's: #post-title and #post-content, whose content is dynamically loaded through a jQuery function triggered by clicking a link ...

javascriptjqueryhtmlajaxseo

What is the significance of a listener signaling an asynchronous response with a return of true, only to have the communication channel close before the response could be received?

Currently, I am developing a React application that involves the use of various npm modules. One of these modules is a self-built NPM package called modale-react-rm (available at this link). This package serves as a simple modal component that utilizes the ...

javascriptreactjsnpm

Tutorial on React JS and Python Django: Understanding the concept of an infinite loop in componentDidUpdate

I'm currently going through an online video tutorial that teaches how to create a CRUD full-stack app using React, Django, and SQLite. However, I've encountered an issue with fetching table data causing an infinite loop. It appears that the probl ...

javascriptreactjsdjangosqlite