資訊專欄INFORMATION COLUMN
摘要：需求微信端看視頻，關(guān)閉微信的窗口時需要記錄當(dāng)前播放時間，下次在進(jìn)入的時候從上次保存的進(jìn)度開始播放面臨的問題監(jiān)控微信離開頁面重新進(jìn)入時候從上傳保存的地方播放設(shè)備環(huán)境微信處理監(jiān)控離開開始的時候使用事件，發(fā)現(xiàn)微信端離開時并未調(diào)用記錄進(jìn)度的腳本改用
需求：
微信端看視頻，關(guān)閉微信的窗口時需要記錄當(dāng)前播放時間，下次在進(jìn)入的時候從上次保存的進(jìn)度開始播放
面臨的問題：
監(jiān)控微信離開頁面
重新進(jìn)入時候從上傳保存的地方播放
設(shè)備環(huán)境:Iphone 6s 微信
處理：
監(jiān)控離開
開始的時候使用onbeforeunload事件，發(fā)現(xiàn)微信端離開時并未調(diào)用記錄進(jìn)度的腳本
改用 pagehide事件，貌似也沒調(diào)用記錄進(jìn)度的腳本
因此改用一個折中的方式
使用video.ontimeupdate事件做監(jiān)控，實時記錄進(jìn)度
2.重新進(jìn)入的時候需要從上次播放的地方開始播放
開始在視頻初始化時設(shè)置currentTime進(jìn)度，并不生效
經(jīng)過多方折騰，在video.onloadeddata事件中設(shè)置，解決了問題
代碼清單：
實時記錄進(jìn)度
audio.ontimeupdate = function () {
if(window.localStorage) {
var courseId = $("#courseId").val();
if(!playBackCache) {
playBackCache = {};
}
playBackCache[courseId] = audio.currentTime;
localStorage.setItem("playBackCache" , JSON.stringify(playBackCache));
}
};
在上次記錄的進(jìn)度開始播放
//_currentTime 是從上面的緩存中獲取的時間進(jìn)度
audio.onloadeddata = function() {
if(_currentTime > 0) {
audio.currentTime = _currentTime;
}
}
其實我覺得我的方法并不完善，發(fā)布出來也想知道大家對于這樣的需求是怎么處理的，可以討論一下
PS:
經(jīng)過測試，在onloadeddata并不會設(shè)置audio.currentTime，再次進(jìn)行改造
//_currentTime 是從上面的緩存中獲取的時間進(jìn)度
audio.ontimeupdate= function() {
if(_currentTime > 0) {
audio.currentTime = _currentTime;
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94582.html
摘要：但好在中，新增了屬性，可以使視頻內(nèi)聯(lián)播放。以上為該案例主要需要解決的問題。補(bǔ)充資料視頻播放優(yōu)化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上，APP 都是使用的系統(tǒng)自帶的瀏覽器進(jìn)行頁面渲染，video 播放視頻的效果是統(tǒng)一的，只需要考慮不同的 iOS ...
摘要：但好在中，新增了屬性，可以使視頻內(nèi)聯(lián)播放。以上為該案例主要需要解決的問題。補(bǔ)充資料視頻播放優(yōu)化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上，APP 都是使用的系統(tǒng)自帶的瀏覽器進(jìn)行頁面渲染，video 播放視頻的效果是統(tǒng)一的，只需要考慮不同的 iOS ...
摘要：相信做過視頻需求的同學(xué)們都會很頭疼，在產(chǎn)品及運營同學(xué)不就是在手機(jī)上播放一段視頻么的簡單想法下，我們卻遇到了安卓的各種封面不兼容進(jìn)度條展示全屏播放進(jìn)度等等各種問題。但是在一些安卓手機(jī)下，該屬性兼容性太差，各種展示黑屏。 相信做過h5視頻需求的同學(xué)們都會很頭疼，在產(chǎn)品及運營同學(xué)不就是在手機(jī)上播放一段視頻么？的簡單想法下，我們卻遇到了ios、安卓的各種封面不兼容、進(jìn)度條展示、全屏播放、進(jìn)度等...
閱讀 745·2021-11-11 16:54
閱讀 3066·2021-09-26 09:55
閱讀 2016·2021-09-07 10:20
閱讀 1211·2019-08-30 10:58
閱讀 1057·2019-08-28 18:04
閱讀 708·2019-08-26 13:57
閱讀 3598·2019-08-26 13:45
閱讀 1164·2019-08-26 11:42
