最近浏览B站发现一个小功能的实现。我们在看视频的时候，如果切到其他tab或者最小化，视频会自动暂停；切换回来后，视频会继续播放，同样的音频也是如此。那这是怎么实现的呢？查找资料，自己整理了一下。
-
document.hidden 属性
document.hidden属性，是显示页面是否为用户当前观看的页面，值为布尔类型，true或false。
-
visibilitychange 事件
该事件会监听页面显示和隐藏，可以在事件的回调函数中进行逻辑处理。
Chrome和Firefox是支持的。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换网页操作音视频</title>
</head>
<body>
<audio id="audio" controls="controls"><source src="test.mp3" type="audio/mp3" /></audio>
<video id="video" width="320" height="240" controls><source src="test.mp4" type="video/mp4" /></video>
</body>
<script>
let title = ''
const audioDom = document.querySelector('#audio')
const videoDom = document.querySelector('#video')
document.addEventListener('DOMContentLoaded', () => {
title = document.title
})
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
document.title = '自动暂停'
audioDom.pause()
videoDom.pause()
} else {
document.title = '恢复播放'
audioDom.play()
videoDom.play()
setTimeout(() => {
document.title = title
}, 1500)
}
})
</script>
</html>