移動端ios直接設定currentTime無效解決方法
阿新 • • 發佈:2018-12-26
前段時間做過一個專案,每個頁面設定了同一個背景音樂,但客戶要求音樂從一個頁面進入另一個頁面後,要接著上一頁面播放時間播放,所以進入新頁面後設置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); })