video.js 實現(xiàn)視頻只能后退不能快進的思路詳解
主要思路是點擊進度條需要獲取拖動前的時間點,我用mouseup事件去處理的,獲得到了oldTime 就好辦,然后根據(jù)需求限制拖動快進快退,因為項目允許回看,不允許快進,所以得記錄maxTime,記錄用戶正常情況觀看視頻最大的那個時間點,不允許超過maxTime
var isMousedown = false; var oldTime=0,newTime=0,maxTime=0; //拖動進度條會先執(zhí)行這個事件 $(".vjs-progress-holder").mouseup(function() { isMousedown = true; oldTime = vid1.currentTime(); }); //vid1就是videojs對象 vid1.on('timeupdate', function(){ if(isMousedown){ if(vid1.currentTime() > maxTime) { vid1.currentTime(oldTime); } isMousedown=false; }else{ if(vid1.currentTime() > maxTime) { maxTime = vid1.currentTime(); } } });
總結(jié)
以上所述是小編給大家介紹的video.js 實現(xiàn)視頻只能后退不能快進的思路詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
ajax實現(xiàn)加載頁面、刪除、查看詳細信息 bootstrap美化頁面!
這篇文章主要為大家詳細介紹了ajax實現(xiàn)加載頁面、刪除、查看詳細信息,利用bootstrap美化頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03IE中直接運行顯示當(dāng)前網(wǎng)頁中的圖片 推薦
IE中直接運行顯示當(dāng)前網(wǎng)頁中的圖片 推薦...2006-08-08JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及遇到的坑
JavaScript是一個神奇的語言,字符串轉(zhuǎn)數(shù)字有5種方法,各有各的坑法!接下來通過本文給大家介紹JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及其陷阱,感興趣的朋友一起看看吧2018-07-07使用classList來實現(xiàn)兩個按鈕樣式的切換方法
下面小編就為大家分享一篇使用classList來實現(xiàn)兩個按鈕樣式的切換方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01