Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The Page Visibility API tells you when the user switches tabs or minimizes the browser. Perfect for pausing videos, stopping animations, or saving battery!
Switch tabs to see it work!
<div style="max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<h2 style="color: #0891b2; margin-bottom: 20px;">👁️ Page Visibility Demo</h2>
<div style="background: #cffafe; padding: 30px; border-radius: 12px; border: 3px solid #06b6d4; text-align: center; margin-bottom: 20px;">
<div id="status" style="font-size: 48px; margin-bottom: 15px;">👁️</div>
<h3 id="statusText" style="color: #0e7490; margin: 0;">Page is Visible</h3>
</div>
<div style="background: #f0f9ff; padding: 20px; border-radius: 8px; border-left: 4px solid #0891b2; margin-bottom: 20px;">
<h4 style="color: #0c4a6e; margin-top: 0;">Statistics:</h4>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; font-size: 14px; color: #164e63;">
<div>
<strong>Times Hidden:</strong>
<div id="hideCount" style="font-size: 24px; color: #0891b2; font-weight: bold;">0</div>
</div>
<div>
<strong>Times Visible:</strong>
<div id="showCount" style="font-size: 24px; color: #0891b2; font-weight: bold;">0</div>
</div>
</div>
</div>
<div style="padding: 15px; background: #fef3c7; border-radius: 6px; border-left: 4px solid #f59e0b;">
<strong style="color: #92400e;">💡 Try This:</strong>
<span style="color: #78350f;"> Switch to another tab and come back to see the counter update!</span>
</div>
</div>Loading preview...
// Listen for visibility changes
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
console.log('User left the page');
// Page is hidden (tab switched, minimized, etc.)
// Pause video
document.getElementById('video').pause();
// Stop animations
stopAnimations();
} else {
console.log('User returned to page');
// Page is visible again
// Resume video
document.getElementById('video').play();
// Resume animations
startAnimations();
}
});
// Check current state anytime
const isHidden = document.hidden;
console.log('Page hidden?', isHidden); // true or false
// 🎯 Saves battery and improves performance!// Auto-pause video when user switches tabs
const video = document.getElementById('myVideo');
let wasPlaying = false;
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// User left - pause if playing
if (!video.paused) {
wasPlaying = true;
video.pause();
console.log('Video auto-paused');
}
} else {
// User returned - resume if it was playing
if (wasPlaying) {
video.play();
wasPlaying = false;
console.log('Video auto-resumed');
}
}
});
// 🎯 Better user experience - saves data/battery
// Common in YouTube, Netflix, etc.Auto-pause when tab hidden
Pause game when user leaves
Stop polling for new messages
Track engagement time accurately
const isHidden = document.hidden; // true or falsedocument.addEventListener('visibilitychange', () => {
if (document.hidden) {
// Page hidden - pause activities
} else {
// Page visible - resume
}
});🔋 Save Resources: Pause videos/animations when hidden
Boolean property
True when hidden
Event fires on change
Tab switch, minimize
Pause when hidden
Better battery life
Auto-pause videos
Stop animations