Hi everybody. After a pause in the Web APIs series to learn about other miscellaneous things, I’m back today. And my article today will take a look at the Page Visibility API, something we pay little attention to. So what is it, let’s see. Go Go!
Intro
The Page Visibility API provides several events that help to track when the document (current window) is visible or hidden .
The Page Visibility API helps in saving resources and improving performance by avoiding the web site from performing unnecessary tasks when the document hidden (when users switch tabs, minimize the browser). We can also use it to count access times, for example.
Brower support
The API is supported in most browsers (including IE10 and IE11 
) 
Demo
http://daniemon.com/tech/webapps/page-visibility/
In this example, the video will stop when you switch to another tab and play again when you return to that tab, it will be processed in the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <span class="token comment">// Set the name of the hidden property and the change event for visibility</span> <span class="token keyword">var</span> hidden <span class="token punctuation">,</span> visibilityChange <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> document <span class="token punctuation">.</span> hidden <span class="token operator">!==</span> <span class="token string">"undefined"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Opera 12.10 and Firefox 18 and later support </span> hidden <span class="token operator">=</span> <span class="token string">"hidden"</span> <span class="token punctuation">;</span> visibilityChange <span class="token operator">=</span> <span class="token string">"visibilitychange"</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> document <span class="token punctuation">.</span> msHidden <span class="token operator">!==</span> <span class="token string">"undefined"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> hidden <span class="token operator">=</span> <span class="token string">"msHidden"</span> <span class="token punctuation">;</span> visibilityChange <span class="token operator">=</span> <span class="token string">"msvisibilitychange"</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> document <span class="token punctuation">.</span> webkitHidden <span class="token operator">!==</span> <span class="token string">"undefined"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> hidden <span class="token operator">=</span> <span class="token string">"webkitHidden"</span> <span class="token punctuation">;</span> visibilityChange <span class="token operator">=</span> <span class="token string">"webkitvisibilitychange"</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> videoElement <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"videoElement"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// If the page is hidden, pause the video;</span> <span class="token comment">// if the page is shown, play the video</span> <span class="token keyword">function</span> <span class="token function">handleVisibilityChange</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> document <span class="token punctuation">[</span> hidden <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> videoElement <span class="token punctuation">.</span> <span class="token function">pause</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> videoElement <span class="token punctuation">.</span> <span class="token function">play</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Warn if the browser doesn't support addEventListener or the Page Visibility API</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> document <span class="token punctuation">.</span> addEventListener <span class="token operator">===</span> <span class="token string">"undefined"</span> <span class="token operator">||</span> hidden <span class="token operator">===</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// Handle page visibility change </span> document <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> visibilityChange <span class="token punctuation">,</span> handleVisibilityChange <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// When the video pauses, set the title.</span> <span class="token comment">// This shows the paused</span> videoElement <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"pause"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> document <span class="token punctuation">.</span> title <span class="token operator">=</span> <span class="token string">'Paused'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// When the video plays, set the title.</span> videoElement <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"play"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> document <span class="token punctuation">.</span> title <span class="token operator">=</span> <span class="token string">'Playing'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Conclude
Today’s article is so short. Hope to be helpful to everyone in some upcoming project. Wished everyone success 
Refer
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API