監(jiān)聽 window.onfocus() 和window.onblur()事件實(shí)現(xiàn)
html5發(fā)布之前的方法
//當(dāng)前窗口得到焦點(diǎn)
window.onfocus = function() {
//播放動(dòng)畫或視頻
};
//當(dāng)前窗口失去焦點(diǎn)
window.onblur = function() {
//暫停動(dòng)畫或視頻
};
這個(gè)方法可以實(shí)現(xiàn)切換標(biāo)簽暫停動(dòng)畫視頻朽缴，但是會(huì)帶來一個(gè)問題，由于是判斷焦點(diǎn)工窍，如果是在當(dāng)前頁面上鋪上一個(gè)小窗口割卖，那當(dāng)前頁面就暫停了動(dòng)畫，試想患雏，如果你一邊看片鹏溯，一邊開個(gè)聊天窗口與MM聊天，當(dāng)你操作聊天窗口的時(shí)候纵苛，視頻暫停了剿涮，這并不是你想要的效果。
使用html5的Page Visibility API來實(shí)現(xiàn)
這個(gè) API 本身非常簡(jiǎn)單攻人，由以下三部分組成取试。
document.hidden：表示頁面是否隱藏的布爾值。頁面隱藏包括 頁面在后臺(tái)標(biāo)簽頁中 或者 瀏覽器最小化 （注意怀吻，頁面被其他軟件遮蓋并不算隱藏瞬浓，比如打開的 sublime 遮住了瀏覽器）。
document.visibilityState：表示下面 4 個(gè)可能狀態(tài)的值
- hidden：頁面在后臺(tái)標(biāo)簽頁中或者瀏覽器最小化
- visible：頁面在前臺(tái)標(biāo)簽頁中
- prerender：頁面在屏幕外執(zhí)行預(yù)渲染處理 document.hidden 的值為 true
- unloaded：頁面正在從內(nèi)存中卸載
Visibilitychange事件：當(dāng)文檔從可見變?yōu)椴豢梢娀蛘邚牟豢梢娮優(yōu)榭梢姇r(shí)蓬坡，會(huì)觸發(fā)該事件猿棉。
這樣，我們可以監(jiān)聽 Visibilitychange 事件屑咳，當(dāng)該事件觸發(fā)時(shí)萨赁，獲取 document.hidden 的值，根據(jù)該值進(jìn)行頁面一些事件的處理兆龙。
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
// 動(dòng)畫視頻暫停
} else {
// 動(dòng)畫視頻開始
}
});
結(jié)合demo中的實(shí)例杖爽，切換標(biāo)簽或者最小化的時(shí)候，demo中的視頻會(huì)暫停紫皇，恢復(fù)當(dāng)前頁面時(shí)慰安，demo中的視頻會(huì)繼續(xù)播放。完整的代碼如下：
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var videoElement = document.getElementById("videoElement");
// 如果頁面被隱藏聪铺，則暫停播放化焕，如果頁面恢復(fù)，則繼續(xù)播放
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
// 判斷瀏覽器的支持情況
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
consol.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// 監(jiān)聽visibilityChange事件
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// 當(dāng)播放器暫停的時(shí)候铃剔，將頁面標(biāo)題設(shè)置為：Paused.
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
// 當(dāng)播放器正常播放時(shí)撒桨，將頁面標(biāo)題設(shè)置為：Playing.
videoElement.addEventListener("play", function(){
document.title = 'Playing';
}, false);
}
