需要实现一个效果,视频加载的过程中禁止拖动进度条快进。
开始呢我想着把控件禁掉,自动播放解决。
<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的话会回到视频最开始的地方。很棒棒