Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use JavaScript to play a video on Mouse Hover and pause on Mouseout?
In this article, we will explore how to use event listeners to control video playback with mouse interactions. We'll use the mouseover and mouseout events to automatically play and pause a video when the user hovers over it.
The main functionality includes playing the video whenever the mouse hovers over the video element and pausing the video when the mouse leaves the video area.
How It Works
We attach event listeners to a video element in the DOM. When the browser detects a mouseover event, it triggers a JavaScript function to play the video. Similarly, when a mouseout event occurs, the video pauses automatically.
Example
In this example, we create a video element and attach mouse event listeners to control playback:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playing/Pausing Video on Hover</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.video-container {
text-align: center;
margin: 20px 0;
}
.video-element {
width: 500px;
height: 300px;
border: 3px solid #333;
border-radius: 8px;
}
.instructions {
margin: 20px 0;
padding: 15px;
background-color: #f0f8ff;
border-left: 4px solid #0066cc;
}
</style>
</head>
<body>
<h1 style="color: #0066cc;">Video Hover Control Demo</h1>
<div class="instructions">
<p><strong>Instructions:</strong> Hover over the video to play, move mouse away to pause.</p>
</div>
<div class="video-container">
<video
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
class="video-element"
muted
loop
preload="metadata">
Your browser does not support the video tag.
</video>
</div>
<script>
// Get the video element
const video = document.querySelector('.video-element');
// Add mouseover event listener to play video
video.addEventListener('mouseover', function() {
console.log('Mouse entered - playing video');
video.play();
});
// Add mouseout event listener to pause video
video.addEventListener('mouseout', function() {
console.log('Mouse left - pausing video');
video.pause();
});
// Optional: Add error handling
video.addEventListener('error', function() {
console.error('Error loading video');
});
</script>
</body>
</html>
Key Features Explained
Video Attributes:
-
muted- Required for autoplay in most browsers -
loop- Video restarts when it reaches the end -
preload="metadata"- Loads video metadata for faster playback
Event Listeners:
-
mouseover- Triggers when mouse enters the video element -
mouseout- Triggers when mouse leaves the video element
Enhanced Version with Visual Feedback
<!DOCTYPE html>
<html lang="en">
<head>
<title>Enhanced Video Hover Control</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-wrapper {
position: relative;
display: inline-block;
margin: 20px;
}
.video-element {
width: 400px;
height: 250px;
border: 2px solid #ddd;
transition: border-color 0.3s ease;
}
.video-element:hover {
border-color: #ff6b6b;
}
.status-indicator {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background: rgba(0,0,0,0.7);
color: white;
border-radius: 20px;
font-size: 12px;
}
.playing { background: rgba(76, 175, 80, 0.8); }
.paused { background: rgba(244, 67, 54, 0.8); }
</style>
</head>
<body>
<h1>Enhanced Video Hover Control</h1>
<div class="video-wrapper">
<video
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
class="video-element"
muted
loop>
</video>
<div class="status-indicator paused" id="status">PAUSED</div>
</div>
<script>
const video = document.querySelector('.video-element');
const statusIndicator = document.getElementById('status');
video.addEventListener('mouseover', function() {
video.play();
statusIndicator.textContent = 'PLAYING';
statusIndicator.className = 'status-indicator playing';
});
video.addEventListener('mouseout', function() {
video.pause();
statusIndicator.textContent = 'PAUSED';
statusIndicator.className = 'status-indicator paused';
});
</script>
</body>
</html>
Browser Compatibility Notes
Modern browsers require user interaction before allowing video autoplay. The muted attribute helps bypass this restriction. For production use, consider adding a play button as fallback for browsers with strict autoplay policies.
Conclusion
Using mouseover and mouseout event listeners provides an intuitive way to control video playback. The muted attribute is essential for autoplay functionality, and adding visual feedback enhances user experience.
6K+ Views
