1. 程式人生 > >移動端ios直接設定currentTime無效解決方法

移動端ios直接設定currentTime無效解決方法

前段時間做過一個專案,每個頁面設定了同一個背景音樂,但客戶要求音樂從一個頁面進入另一個頁面後,要接著上一頁面播放時間播放,所以進入新頁面後設置currentTime為上個頁面播放時間

但ios系統直接設定無效,在判斷音樂可播放時(canplay)再設定currentTime才可以,但在安卓裝置上也這樣判斷設定則也無效,所以要根據不同系統設定,以下是針對ios、安卓系統設定的程式碼

注:$myVideo.addEventListener("canplay",function() {});
安卓是頁面載入時觸發;IOS是視訊play()後才觸發

//判斷是否安卓裝置
function isAndroid(){
	var u = navigator.userAgent;
	if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
		return true;
	}
}
$(function(){
	var $myVideo = $("#chatAudio")[0];
	if(isAndroid()){
		if(sessionStorage.currentTime > 0.1){
			//設定播放時間
			$myVideo.currentTime = sessionStorage.currentTime;
		}
	}else{
		if(sessionStorage.currentTime > 0.1){
			//已準備好開始播放
			$myVideo.addEventListener("canplay",function() {
				//設定播放時間
				$myVideo.currentTime = sessionStorage.currentTime;
			});
		}
	}
	//儲存已播放的時間
	$myVideo.addEventListener("timeupdate", function(){
		sessionStorage.currentTime = $myVideo.currentTime;
	}, false);
})