屏幕锁定时隐藏移动浏览器视频内容

【问题标题】：Hide mobile browser video content when screen lock屏幕锁定时隐藏移动浏览器视频内容
【发布时间】：2020-01-15 02:52:09
【问题描述】：

我想在屏幕锁定时隐藏视频内容。

下图中的红圈是我要隐藏的。

确切地说，我希望红色圆圈在 document.visibilityState == 'hidden' 时不出现。

这是我的代码。

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

我应该如何更改我的代码？

我正在使用这样的普通视频标签。

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

【问题讨论】：

你能发布相关组件的 HTML 吗？

标签： javascript jquery html google-chrome html5-video

【解决方案1】：

这是一个如何在某些事件运行时隐藏元素的示例。我正在使用“点击”事件，但您也可以在代码中替换。

<!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，您可以尝试一下。

【讨论】：