1. 程式人生 > >JS video 禁止拖動進度條

JS video 禁止拖動進度條

需要實現一個效果,視訊載入的過程中禁止拖動進度條快進。

開始呢我想著把控制元件禁掉,自動播放解決。
在這裡插入圖片描述

<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的話會回到視訊最開始的地方。很棒棒