要求用戶播放視頻時,退出后下次再次播放此視頻時需要從上次播放的進度開始播放,這里我們使用到了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>
