there is a code

$(document).ready(function () { $("body").on("mouseover", "video", function(){ this.play(); }); $("body").on("mouseleave", "video", function(){ this.pause(); this.currentTime = 0; // this.load(); }) })

First you need to native js

 var video = document.getElementsByTagName("video"); video.onmousemove = function(){ this.play(); }; video.onmouseout = function(){ video.pause(); video.currentTime = 0; };

the point is that when you make a video it plays and when you move the cursor it returns to the beginning on Jquery works normally with any amount of video, and on the native it only works with one video ... Tell me how to do it correctly

2 answers 2

This code does not work as you think.

  $("body").on("mouseover", "video", function(){ this.play(); });

on will add a lister not on the video elements but on the body and will filter all the events that are dubbed before it.

On vanilla js, it will look like this:

 document.body.addEventListener('mouseover', function( ev ){ if( ev.target.nodeName === 'VIDEO' ){ ev.target.play() } });

Similarly for mouseout

    The problem is that getElementsByTagName returns you a whole HTMLCollection with all the nodes with the video tag.

    Alternatively, you can go over the resulting collection and add a handler to the event for each node.