起因, 目的:
我有2个显示器。 某视频网站,我想一边播放视频,一边搞其他。但是,当我把鼠标移动到浏览器外面,点击一下别处, 视频就会自动暂停. 这个叫做 事件监听!
- blur, 在元素或窗口失去焦点时触发
- focus, 与 blur 相反。
- visibilitychange
1. 自己先写个播放视频的例子。
html + css + js , 一个文件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 10px;
}
video {
width: 100%;
max-width: 1800px;
height: auto;
margin-bottom: 3px;
}
p {
color: #555;
}
</style>
</head>
<body>
<h1>Video Player: a.mp4</h1>
<video id="myVideo" controls>
<source src="a.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p id="status">The video is playing...</p>
<script>
const video = document.getElementById('myVideo');
const status = document.getElementById('status');
// 当窗口失去焦点时暂停视频
window.addEventListener('blur', () => {
video.pause();
status.textContent = 'The video is paused because the window lost focus.';
});
// 当窗口重新获得焦点时恢复播放
window.addEventListener('focus', () => {
video.play();
status.textContent = 'The video is playing...';
});
// 当页面变为不可见时暂停视频
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
video.pause();
status.textContent = 'The video is paused because the page is not visible.';
} else {
video.play();
status.textContent = 'The video is playing...';
}
});
</script>
</body>
</html>
播放效果:
2. 浏览器中,执行下面这段 js 代码,会移除这3个事件监听函数。
js
// 获取窗口的 blur 和 focus 事件监听器
const blurListeners = getEventListeners(window).blur;
const focusListeners = getEventListeners(window).focus;
// 获取文档的 visibilitychange 事件监听器
const visibilityListeners = getEventListeners(document).visibilitychange;
// 移除 blur 事件监听器
blurListeners.forEach(listener => {
window.removeEventListener('blur', listener.listener);
});
// 移除 focus 事件监听器
focusListeners.forEach(listener => {
window.removeEventListener('focus', listener.listener);
});
// 移除 visibilitychange 事件监听器
visibilityListeners.forEach(listener => {
document.removeEventListener('visibilitychange', listener.listener);
});
console.log('All specified event listeners removed.');
然后视频就能正常播放了。
3. 但是,如果把上面的js 代码,改写到 chrome 插件中,则无法运行。因为:
getEventListeners:这是 Chrome DevTools 中的一个特殊方法,用于查看某个元素上绑定的事件监听器。注意,它在普通 JavaScript 环境中是不可用的,只能在 DevTools 中使用。
4. Todo
- 继续研究 EventListener.
- 然后重新改写, 最后放到 自己的 chrome 插件中。
- 找点 chromde devtools 的教程视频。