實現video視頻播放記錄當前播放進度,下次播放時從上次播放進度開始播放


要求用戶播放視頻時,退出后下次再次播放此視頻時需要從上次播放的進度開始播放,這里我們使用到了video標簽的currentTime屬性(設置或返回音頻/視頻中的當前播放位置(以秒計))以及timeupdate方法(當目前的播放位置已更改時觸發)

<video src="視頻地址" controls="controls" autoplay="autoplay" width="92%"></video>
<script>
    var myvideo = document.getElementsByTagName("video")[0]
    var setTimeFlag = 1;//currentTime屬性賦值次數
    //當目前的播放位置已更改時觸發
    myvideo.addEventListener("timeupdate", function () {
        if (setTimeFlag == 1) {
            //獲取localStorage中記錄的currentTime值,並給currentTime屬性進行賦值
            if (localStorage.getItem('currentTime' + '{$study->study_id}') != null) {
                var time = localStorage.getItem('currentTime' + '{$study->study_id}');
                myvideo.currentTime = time;

            }
            setTimeFlag = 2;
        }
        //獲取當前播放位置的秒數,並設置localStorage
        var currentTime = myvideo.currentTime;
        localStorage.setItem('currentTime' + '{$study->study_id}', currentTime)
    });


</script>  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM