|
32 | 32 | |26 | [getBoundingClientRect](#getBoundingClientRect)| |
33 | 33 | |27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| |
34 | 34 | |28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| |
| 35 | +|29 | [Detect if Browser Tab is in the view](#Detect-if-Browser-Tab-is-in-the-view)| |
35 | 36 |
|
36 | 37 |
|
37 | 38 |
|
@@ -592,6 +593,23 @@ const observer = new ResizeObserver((entries) => { |
592 | 593 | }); |
593 | 594 | observer.observe(foo); |
594 | 595 |
|
| 596 | +``` |
| 597 | +**[⬆ Back to Top](#table-of-contents)** |
| 598 | +### Detect if Browser Tab is in the view |
| 599 | +play/pause video accordingly |
| 600 | +see our codepen: https://codepen.io/JSsnippets/pen/gOapPzq |
| 601 | +```javascript |
| 602 | + |
| 603 | + |
| 604 | +const video = document.getElementById("my-video"); |
| 605 | + |
| 606 | +const onVisibilitychange =()=>{ |
| 607 | + return document.hidden |
| 608 | + ? video.pause() |
| 609 | + : video.play(); |
| 610 | +} |
| 611 | + |
| 612 | +document.addEventListener("visibilitychange", onVisibilitychange) |
595 | 613 |
|
596 | 614 | ``` |
597 | 615 | |
|
0 commit comments