瀏覽器最小化暫停播放

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() {

});