zoukankan      html  css  js  c++  java
  • 浏览器最小化暂停播放

    PC端页面显示与隐藏

    1、业务需求:

    PC端直播,为了统计用户观看的有效时长,对观看直播的规则做了一些要求,目的是为了提高用户的有效观看时长。具体要求如下:

    1. 浏览器页面最小化时,暂停播放,停止计时;
    2. 浏览器页面恢复时,视频继续播放,计时从零开始;
    3. 刷新浏览器页面时,重新计时;

    2、页面显示与隐藏

    使用的是浏览器的 visibilityState 属性:

    // 页面的显示与隐藏
    const pageShowOrHide = function(e) {
    	let stv = e.target.visibilityState || document.visibilityState;
    	if (stv === 'hidden') {
    		// 用户最小化了页面 or 切到了别的页面
    		
    		/* 处理页面隐藏事件代码 */
    	} else if (stv === 'visible') {
    		// 用户回到了页面
    		
    		/* 处理页面恢复事件代码 */
    	}
    }
    

    绑定&解除事件函数

    // 绑定事件函数
    window.addEventListener('visibilitychange', function() {
    	pageShowOrHide();
    }, false);
    
    window.addEventListener('visibilitychange', pageShowOrHide());
    
    // 解除事件函数
    window.removeEventListener('visibilitychange', function() {
    	pageShowOrHide();
    }, false);
    
    window.removeEventListener('visibilitychange', pageShowOrHide())
    

    false:是否冒泡

    3、刷新页面(页面卸载)

    window.addEventListener("beforeunload", function() {
    	/* 执行页面卸载前的事件代码 */
    }, false);
    
    window.removeEventListener("beforeunload", function() {
    
    }, false);
    
    // or
    window.addEventListener("beforeunload", function() {
    	/* 执行页面卸载前的事件代码 */
    });
    
    window.removeEventListener("beforeunload", function() {
    
    });
    
  • 相关阅读:
    python-阿里镜像源-pip
    python-Web-django-图形验证
    markdown-博客编辑
    python-爬虫-史书典籍
    python-爬虫-requests
    python-Web-项目-svn和git
    python-Web-数据库-Redis
    Codeforces Round #617 (Div. 3) A~D
    Educational Codeforces Round 81 (Rated for Div. 2)
    Codeforces Round #609 (Div. 2) A到C题
  • 原文地址:https://www.cnblogs.com/zxk5211/p/13667883.html
Copyright © 2011-2022 走看看