Page Visibility API Demo

The Page Visibility API provides events to know when a document becomes visible or hidden, allowing you to pause/resume activities, save resources, and improve user experience.

Page Visibility API: checking...

👁

VISIBLE

document.visibilityState: visible

0s

Time Visible

0s

Time Hidden

0

State Changes

0

Times Hidden

Timer Demo (Pauses When Hidden)

This timer pauses when the page is hidden and resumes when visible. Try switching to another tab or minimizing the window.

00:00:00 Start TimerPauseResetTimer stopped

Video Simulation (Pauses When Hidden)

Simulated video player that automatically pauses when you switch tabs.

PlayPauseVideo paused

Use Cases

Common Applications

• Pause media playback - Stop videos/audio when tab is hidden
• Stop animations - Pause CSS/JS animations to save CPU
• Defer updates - Skip DOM updates while hidden
• Analytics - Track actual time spent viewing content
• Save resources - Stop polling/WebSocket activity
• Show notifications - Alert users to updates when they return

API Support

Event Log

Clear Log Visibility events will be logged here... Try switching tabs, minimizing the window, or switching to another application.