Скрытие видео контента мобильного браузера при блокировке экрана - PullRequest
Новая
       23

Скрытие видео контента мобильного браузера при блокировке экрана

0 голосов
/ 15 января 2020

Я хочу скрыть видеоконтент, когда экран заблокирован.

Красный кружок на рисунке ниже - это то, что я хочу скрыть.

Если быть точным, я хочу, чтобы красный кружок не появляются, когда document.visibilityState == 'hidden'.

Вот мой код. 

$(document).on('visibilitychange', function(){
			if(document.visibilityState == 'hidden'){
				video.pause();
			}
		})

Как мне изменить мой код?

enter image description here

Я использую обычное видео отметьте как это.

<video muted id="video" poster="" src="" webkit-playsinline playsinline> </video>

1 Ответ

0 голосов
/ 15 января 2020

Вот пример того, как скрыть элемент при запуске какого-либо события. Я использую событие 'click', но вы также можете заменить его в своем коде. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hide Element</title>

  <style type="text/css">
    .hide {
      display: none;
    }
  </style>

</head>
<body>

  <h1>Hide Me</h1>
  <button>Click to Mimic Visibility Change</button>

  <script>

    const button = document.querySelector('button');
    const h1 = document.querySelector('h1');

    button.addEventListener('click', () => {
      h1.classList.toggle('hide');
    });

  </script>
</body>
</html>

Вот JSFiddle , который вы можете использовать, чтобы опробовать его.

...