微信H5記錄視頻播放進度

xcc3641 發布于2019-08-22 16:42 / 3347人閱讀

摘要：需求微信端看視頻，關閉微信的窗口時需要記錄當前播放時間，下次在進入的時候從上次保存的進度開始播放面臨的問題監控微信離開頁面重新進入時候從上傳保存的地方播放設備環境微信處理監控離開開始的時候使用事件，發現微信端離開時并未調用記錄進度的腳本改用

需求：

微信端看視頻，關閉微信的窗口時需要記錄當前播放時間，下次在進入的時候從上次保存的進度開始播放

面臨的問題：

監控微信離開頁面

重新進入時候從上傳保存的地方播放

設備環境:Iphone 6s 微信

處理：

監控離開

開始的時候使用onbeforeunload事件，發現微信端離開時并未調用記錄進度的腳本
改用 pagehide事件，貌似也沒調用記錄進度的腳本
因此改用一個折中的方式
使用video.ontimeupdate事件做監控，實時記錄進度

2.重新進入的時候需要從上次播放的地方開始播放
開始在視頻初始化時設置currentTime進度，并不生效
經過多方折騰，在video.onloadeddata事件中設置，解決了問題

代碼清單：
實時記錄進度

audio.ontimeupdate = function () {
            
            if(window.localStorage) {
                var courseId = $("#courseId").val();
                if(!playBackCache) {
                    playBackCache = {};
                }
                playBackCache[courseId] = audio.currentTime;
                localStorage.setItem("playBackCache" , JSON.stringify(playBackCache));
            }
        };

在上次記錄的進度開始播放

//_currentTime  是從上面的緩存中獲取的時間進度
audio.onloadeddata = function() {
        if(_currentTime > 0) {
            audio.currentTime = _currentTime;
        }
    }

其實我覺得我的方法并不完善，發布出來也想知道大家對于這樣的需求是怎么處理的，可以討論一下

PS:
經過測試，在onloadeddata并不會設置audio.currentTime，再次進行改造

//_currentTime  是從上面的緩存中獲取的時間進度
audio.ontimeupdate= function() {
        if(_currentTime > 0) {
            audio.currentTime = _currentTime;
        }
    }

云服務器 GPU云服務器記錄播放進度 js視頻播放進度 h5視頻播放花屏 h5視頻播放器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94582.html

H5實例教學--微信內嵌視頻1（案例淺析）

摘要：但好在中，新增了屬性，可以使視頻內聯播放。以上為該案例主要需要解決的問題。補充資料視頻播放優化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼首個H5案例解析從頭開始分析在 iOS 上，APP 都是使用的系統自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統一的，只需要考慮不同的 iOS ...

quietin 2019-08-20 14:29 評論0 收藏0
H5實例教學--微信內嵌視頻1（案例淺析）

摘要：但好在中，新增了屬性，可以使視頻內聯播放。以上為該案例主要需要解決的問題。補充資料視頻播放優化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼首個H5案例解析從頭開始分析在 iOS 上，APP 都是使用的系統自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統一的，只需要考慮不同的 iOS ...

Riddler 2019-08-01 16:22 評論0 收藏0
H5 video使用總結

摘要：相信做過視頻需求的同學們都會很頭疼，在產品及運營同學不就是在手機上播放一段視頻么的簡單想法下，我們卻遇到了安卓的各種封面不兼容進度條展示全屏播放進度等等各種問題。但是在一些安卓手機下，該屬性兼容性太差，各種展示黑屏。相信做過h5視頻需求的同學們都會很頭疼，在產品及運營同學不就是在手機上播放一段視頻么？的簡單想法下，我們卻遇到了ios、安卓的各種封面不兼容、進度條展示、全屏播放、進度等...

bluesky 2019-06-21 16:16 評論0 收藏0