厲害了我的Safari-Safari影片播放踩坑
最近公司接到一個案子,其中一個功能是當使用者進到網站時會自動播放一個滿版的影片,播放完後停在最後一卡不會重複播放，原本想說這應該穩穩的沒事,直到我遇到了那個萬惡的Safari
當使用者進到頁面播放影片時,如果使用者使用行動裝置上的Safari播放影片的話,當使用者在影片播放「途中」讓手機待機會使影片直接停在待機前的狀態不會播放
我們要讓safari在待機結束後可以繼續播放影片的話需要偵測手機是否待機,在待機時暫停播放、沒有在待機時繼續播放，雖然Javascript沒辦法偵測手機是否待機,但是Web APIs裡有提供一個可以做為替代方式的API
Page Visibility API
Page Visibility API會在網頁處於背景或是對於使用者來說看不到的情形下觸發,測試過手機待機時同樣有效，首先註冊 「visibilitychange」 的事件監聽,當使用者待機觸發事件時再透過 「document.hidden」 檢查畫面對於使用者來說是否被隱藏,為true時暫停播放、為false時繼續播放
Javascript程式邏輯
var videoplay_state = false;
var target_video = document.querySelector('#target-video');
var hidden, visibilityChange;
target_video.addEventListener('ended',function(){
videoplay_state = true;
});
if (typeof document.hidden !== undefined) {
// Opera 12.10 and Firefox 18 and later support
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== undefined) {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== undefined) {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
}
// If the page is hidden, pause the video 、 if the page is shown, play the video
function handleVisibilityChange() {
if(videoplay_state){
return;
}
if (!document.hidden) {
target_video.play();
} else {
target_video.pause();
}
}
if (typeof document.addEventListener === undefined || hidden === undefined) {
alert('This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.');
} else {
document.addEventListener('visibilitychange', handleVisibilityChange, false);
}
另外影片播放結束後待機也會有一個問題，當行動裝置上的Safari播放影片「結束」後再開啟會發現畫面整個是空白的，最快的解決方式是直接是在影片播放結束後放上一張影片最後一卡的蓋版圖片
Javascript程式邏輯
var video_Element = document.querySelector("#target-video"); //目標影片
var cover_img = document.querySelector("#cover-img"); //蓋版圖片，預設display為none
// 在影片上添加ended事件監聽偵測影片播放結束
video_Element.addEventListener('ended',function(){
cover_img.style.display = 'block';
});
之前曾在網路上看到有人寫說要不是有mac、iphone撐腰,不然Safari下場應該會跟IE差不多…，一開始我還不以為意,但隨著經手的案子越來越多我開始慢慢認同這件事了…
不過我得說雖然遇到這些坑真的很讓人煩躁，但是把這些坑填起來其實也有滿多幫助的,像是Page Visibility API除了用來填坑外還可以用來做效能上的優化,只能說事情有好有壞啦