Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use JavaScript to play a video on Mouse Hover and pause on Mouseout?
In this article, we will be exploring the event listeners and how to use them for pausing and playing a video. We will be using the mouse over and the mouseout events to control the video.
The main element of this article includes playing the video whenever the mouse hovers over the video and stopping/pausing the video when the mouse is taken out of that div.
For achieving this specific purpose, we will be using JavaScript that will record the events and play/pause the video.
Approach
We will attach a video to our HTML DOM element and then apply the mouse over and mouse out event listener. Whenever the DOM listens to this event it will trigger the JavaScript function that will tell the template to start or stop the video.
Example
In the below example, we are using the mouse event listeners to play and pause the video when required.
# index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Playing/Pausing Video</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1 style="color: green;">Welcome to Tutorials Point</h1> <!-- Video element --> <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted class="vid" loop style="border: solid; width: 550px;"> </video> <script> // Listening to the video element let clip = document.querySelector(".vid") /* Adding the event listeners on the video to play/pause the video. */ clip.addEventListener("mouseover", function (e) { clip.play(); }) /* Applying the mouse out event to pause the video */ clip.addEventListener("mouseout", function (e) { clip.pause(); }) </script> </body> </html>
Output
5K+ Views
