Adding a mousemove listener to the controls of a video element with Javascript

Question

basically I've got a basic video element

<video width="320" height="240" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Is there a non-jQuery way to add a listener to the controls of a video element? the controls, as you know, will look like this on different browsers:

All I need is a function to run once a user hover over that.

Edit: I also need a function that will run once a user moves out of the controls

Answer 1

To add a mouse over event to an object, you can use the following code:

yourobject.addEventListener("mouseover", function() {
    //whatever you want to do
}); 

To add a mouse out event to an object, you can use the following code:

yourobject.addEventListener("mouseout", function() {
    //whatever you want to do
}); 

---

References:

• Mouseover Event
• Mouseout Event