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的话会回到视频最开始的地方。很棒棒

猜你喜欢

转载自blog.csdn.net/qq_41654694/article/details/85282529
今日推荐