JS video 禁止拖動進度條
阿新 • • 發佈:2018-12-27
需要實現一個效果,視訊載入的過程中禁止拖動進度條快進。
開始呢我想著把控制元件禁掉,自動播放解決。
<video id="video" src="http://kuangjia.nenzhu.com/cs/psu.mp4" autoplay=”autoplay” width="600" height="360" x5-playsinline="" playsinline="" webkit-playsinline="true"></video>
iOS不相容 autoplay
https://blog.csdn.net/qq_42149698/article/details/81226245
解決方案:
<video id="video" src="http://kuangjia.nenzhu.com/cs/psu.mp4" webkit-playsinline="true" autoplay=”autoplay” width="600" height="360" x5-playsinline="" playsinline="" webkit-playsinline="true"></video> <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script> <script> document.addEventListener("WeixinJSBridgeReady",function() { document.getElementById('video').play(); }, false); </script>
但是呢,實現是實現了,沒有控制元件的自動播放特別像動圖 = =
於是,又開始瘋狂翻閱大佬們的文章
大致呢都是videojs 的解決方案
下載地址 http://www.jq22.com/jquery-info404 是免費的
借鑑了這篇文章的思路
https://blog.csdn.net/qq_37300451/article/details/80852684
<video id="video" src="http://kuangjia.nenzhu.com/cs/psu.mp4" controls="controls" onended="over()" width="600" height="360" x5-playsinline="" playsinline="" webkit-playsinline="true"></video> <script src="/m/template/10001/lib/videojs-ie8.min.js"></script> <script> var that = this; var resetTime = 0; // 拖動後重置播放時間 var curTime = 0; // 當前播放時間 var vd = document.getElementById("video"); //獲取video物件 var getCurTime = localStorage.getItem('remTime'); //獲取本地儲存 if ( getCurTime > 0.1) { curTime = getCurTime; resetTime = getCurTime; vd.addEventListener('play',function(){ setTimeout(function(){ vd.currentTime = getCurTime; setInterval(timer,100) },2000) }) } else { vd.play(); setInterval(timer,100) } // 定時器 function timer () { curTime = vd.currentTime; var apartTime = curTime - resetTime; if(apartTime > 2) { vd.currentTime = resetTime; } else { resetTime = curTime; } that.curTime = curTime; } vd.addEventListener('pause',function(){ localStorage.setItem('remTime',that.curTime); }) </script>
視訊可以後退,但不可以快進,快進後會回到選擇快進時的播放位置。相容Android和ios,pc的話會回到視訊最開始的地方。很棒棒