前段時間需要寫一個程序的demo，演示給領導，寫起來是簡單，但是沒想到微信那邊對小程序的審覈卡得很嚴，因爲涉及到視頻播放==== 各種改小程序類型，兩個小程序分別提交同一套代碼，提交了好幾次，最後終於是給我過了一次.。。最後不得不考慮改爲小程序web-view內嵌h5頁面，雖說小程序的api裏面關於視頻播放的還是挺好使的，但是代碼審覈就是個大坑。找了https的服務器，配置白名單(域名對應的服務器上傳授權文件好麻煩)，ok 終於搞定了，在h5頁面終於隨心所欲的耍。。。沒想到出現了一個很尷尬的事情，領導給我打電話，我居然還可以聽到那頭h5頁面播放視頻的聲音，小程序切到後臺了，視頻還在播放，哈哈哈 =.=
突然找到了 HTML5新提供的一個api，作用是記錄當前標籤頁在瀏覽器中的激活狀態。所謂“激活狀態”指當前標籤是否正在被用戶瀏覽。
// 兼容各種瀏覽器兼容
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
document.addEventListener(visibilityChange, function () {
if (document[state] == "hidden") {//頁面切換至後臺
video.pause();
} else {
// video.play();
}
}, false);
當小程序被換至後臺得時候 視頻暫停播放
其實短信驗證碼倒計時也可以用到這個，短信驗證碼倒計時50S時候，手機鎖屏，這個時候我們得js腳本是沒有運行，當我們再次解鎖的時候，短信驗證碼還是從50S開始計算的，實際上短信驗證碼的有效期肯定是沒有50S的，這樣可能就會出現問題，當用戶繼續操作的時候，會報錯，短信驗證碼已超時。
var visibilityHiddenTime,betweenMs;
document.addEventListener(visibilityChange, function () {
if (document[state] == "hidden") {//頁面切換至後臺
visibilityHiddenTime = Date.now();//記錄切換至後臺的時間
} else {
betweenMs = Date.now() -visibilityHiddenTime;
// 切回來以後短信驗證碼倒計時減去betweenMs 大致爲實際的短信驗證碼有效期
}
}, false);
值得注意的是 該屬性 ios 7.1及以上都支持 安卓是從4.4開始支持的
判斷當前頁面的可見性——visibilitychange屬性的應用
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.