浏览器中页面的visibility状态及变化监听
需求
在浏览器中播放视频,当用户进行页面切换操作时。需要根据视频播放页是否处于可见状态,来控制视频的暂停及重新播放。
相关文档
参考MDN中,关于页面的可见性相关的API说明。https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
示例代码
html部分
<video width="800" height="100">
<source src="myvideo.mp4" type="video/mp4"></source>
</video>
javascript部分
var pageVisibility = {
hiddenProp: '',
eventType: '',
isVisible: function() {
// 获取到的是不可见的状态值,所以这里需要否才是可见的状态值;
return !document[this.hiddenProp];
},
init: function(handelEvent) {
if(typeof document.hidden !== 'undefined') {
this.hiddenProp = 'hidden';
this.eventType = 'visibilitychange';
} else if(typeof document.msHidden !== 'undefined') {
this.hiddenProp = 'msHidden';
this.eventType = 'msvisibilitychange';
} else if(typeof document.webkitHidden !== 'undefined') {
this.hiddenProp = 'webkitHidden';
this.eventType = 'webkitvisibilitychange';
}
if(this.hiddenProp) {
this.bindEvent(handelEvent);
}
},
bindEvent: function() {
document.addEventListener(this.eventType, this.handleEvent.bind(this), false);
}
};
var handleVideoPlay = function(element) {
if(pageVisibility.isVisible()) {
element.play();
} else {
element.pause();
}
};
var videoElem = document.querySelector('video');
pageVisibility.init(function() {
handleVideoPlay(videoElem);
});
兼容性
兼容性的问题,直接在https://caniuse.com/#search=visibility查询,参考搜索结果中的 Page Visibility
部分。
浏览器中页面的visibility状态及变化监听的更多相关文章
- Oracle几个基础配置问题:ORA-12154: TNS: 无法解析指定的连接标识符、ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务、ORA-12516 TNS监听程序找不到符合协议堆栈要求的可用处理程序
问题1:ORA-12154: TNS: 无法解析指定的连接标识符 在一台服务器上部署了Oracle客户端,使用IP/SID的方式访问,老是报ORA-12154错误,而使用tnsnames访问却没有问题 ...
- Vue中使用computed与watch结合实现数据变化监听
目的:当数据变化时,为其中重要数据增加边框,实现闪烁以达到提醒目的.数据格式如下,只有在未处理火警/故障时增加闪烁边框.可以使用watch进行深度监听.数据格式已定,也非常明确要监听的数据是有两个.既 ...
- 在EditText中限制输入,自定义样式,监听输入的字符,自动换行
自动获取焦点 <!-- 添加:<requestFocus /> 会自动获取焦点 --> <EditText android:layout_width="matc ...
- angular5 路由变化监听
1.路由监听 //监听路由变化this.router.events .filter(event => event instanceof NavigationEnd) .map(() => ...
- FocusChange-焦点变化监听事件
想要监听一个控件的焦点变化情况,发现了一个 view.setOnFocusChangeListener(new OnFocusChangeListener() { ...... } 现在写一个小dem ...
- Vue中计算属性(computed)和监听属性函数watch的比较
1.计算属性适用的情形我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性.例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余. ...
- DVA框架统一处理所有页面的loading状态
dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件.通过这个插件,我们可以不必一遍遍地写 showLoading 和 hideLoading,当发起请求 ...
- android中 检查网络连接状态的变化,无网络时跳转到设置界面
1:在AndroidManifest.xml中加一个声明 <receiver android:name="NetCheckReceiver"> <inten ...
- Android系统中应用的安装和卸载的监听
一.创建一个类继承BroadcastReceiver并且复写onReceive的方法 public class AppStateReceiver extends BroadcastReceiver { ...
随机推荐
- python os 模块
os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cdos.curdir ...
- AC自动机讲解
今天花了半天肝下AC自动机,总算啃下一块硬骨头,熬夜把博客赶出来.. 正如许多博客所说,AC自动机看似很难很妙,而事实上不难,但的确很妙.笼统地说,AC自动机=Trie+KMP,但是仅仅知道这个并没有 ...
- linux下的外网木马前期要的工具
这周看了demon哥的博客弄msf外网马,自己试了一下 首先去ngrok官网下载对应的系统版本,如果对应下载那个标签是绿色的(这里不支持windows) 下载好后在linux提取出来 让我们来看看他的 ...
- poj 2434;bzoj 1686 [Usaco2005 Open]Waves 波纹
Description Input 第1行:四个用空格隔开的整数Pj Bi,B2,R. P(1≤P≤5)表示石子的个数,Bi(-5×100000≤Bi≤5×100000)和B2(-5×1000 ...
- HDU 1010 Tempter of the Bone【DFS经典题+奇偶剪枝详解】
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- HDU 1728 逃离迷宫(DFS经典题,比赛手残写废题)
逃离迷宫 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- A. Vasya and Football
A. Vasya and Football time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- [国嵌攻略][160][SPI驱动程序设计]
SPI Flash驱动 1.打开/drivers/mtd/devices/m25p80.c驱动文件.找到初始化m25p80_init函数,其中通过spi_register_driver来注册spi设备 ...
- [国嵌攻略][077][Linux时间编程]
时间类型 Coordinated Universal Time(UTC):世界标准时间,也就是格林威治时间(Greenwich Mean Time, GMT). Calendar Time:日历时间, ...
- EC+VO+SCOPE for ES3
词法环境 词法作用域 词法作用域(lexcical scope).即JavaScript变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码. 词法环境 用于定义特定变量和函数标识 ...