Главная > Блог > Web-разработка > JavaScript и TypeScript >

Отслеживание активности вкладки браузера

22.10.2018

Теги: JavaScript • Web-разработка • Вкладка • Событие

С недавнего времени в новых браузерах появилось Page Visibility API, которое позволяет узнать, находится ли страница в активной вкладке браузера. Свойство visibilityState объекта document может принимать значение visible, hidden или prerender. C visible и hidden все понятно, а prerender означает, что содержимое страницы в настоящее время находится в состоянии отрисовки.

Когда значение этого свойства изменяется, возникает событие visibilitychange:

document.addEventListener("visibilitychange", function() {
    console.log(document.visibilityState);
    console.log(document.hidden);
});

Как нетрудно догадаться, свойство hidden объекта document принимает значение true, если документ не видно вообще. Как правило, это означает, что документ свернули. Если свойство имеет значение false — любая часть документа открыта.

Приостановка воспроизведения видео

Код, который приостанавливает видео, когда происходит переключение на другую вкладку и воспроизводит снова, когда происходит возврат:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Visibility API</title>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var videoElement = document.getElementById('videoElement');
        // отслеживаем активность вкладки браузера
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) { // ставим видео на паузу
                videoElement.pause();
            } else { // продолжаем воспроизведение
                videoElement.play();
            }
        });
        // для наглядности изменим title при переключении вкладки
        videoElement.addEventListener('pause', function() {
            document.title = 'Видео на паузе';
        });
        videoElement.addEventListener('play', function() {
            document.title = 'Воспроизведение'; 
        });
    });
    </script>
</head>
<body>
    <h1>Page Visibility API</h1>
    <video id="videoElement" controls poster="thumbnail.jpg">
        <source src="....." type="video/mp4">
        <source src="....." type="video/webm">
        <p>Проблемы с воспроизведением видео, попробуйте другой браузер.</p>
    </video>
</body>
</html>

Поиск: JavaScript • PageVisibilityAPI • Web-разработка • pause • play • video • visibilityState • visibilitychange • Браузер • Видео • Вкладка • Событие