标签:
在做手机页面的时候碰到个需求,就是要求视频不能快进和后退。查到有个seeking和seeked函数应该在寻址的时候触发,但是经过测试发现,4s及小米2以上的浏览器无法触发这两个函数。而且同时无法检测到Media.seeking的状态,打印出来全部是false。
如果去掉controls,在大部分的android手机中都没有问题,不显示控制器。但是小米浏览器会自动全屏播放,控制器包括进度条都会显示出来。iphone也会自动全屏,退出全屏就无法播放视频。但是iphone5以上可以监听到seeking及seeked事件,进而进行控制。
经过提醒突然想到,timeupdate函数会实时触发,可以先缓存上一次触发时的时间,然后下一次触发的时候与上一次的时间进行对比。如果二者之间超过1s,则视为有过跳转。基础是timeupdate的触发时间要小于1s,经过监听及打印,发现这个函数触发时间是毫秒级的,不会超过1s。
相关代码:
var Media; var beforetime=0; var type=0; var temp=0; $(document).ready(function(){ var browser = window.browser; var iosB; if(browser.iPad || browser.iPhone){ iosB=true; } Media=document.getElementsByTagName(‘video‘)[0]; $(‘#start‘).bind(‘click‘,start); $(‘#video_block‘).bind(‘click‘,function(e){ $(‘#start‘).show(); Media.pause(); }); $(‘video‘).bind(‘timeupdate‘,timeupdate); $(‘video‘).bind(‘pause‘,function(){ if(!iosB){ $(‘#start‘).show(); } }); $(‘video‘).bind(‘webkitendfullscreen‘,function(){ var str=$(‘#start‘).css(‘display‘); if(str=="none"&&!iosB){ $(‘#start‘).show(); } }); $(‘video‘).bind(‘ended‘,function(){ $(‘.next‘).show(); }); }) function timeupdate(){ if(Media.currentTime-beforetime>1){ Media.currentTime=0; } else if(Media.ended){ $(‘.next‘).show(); } beforetime=Media.currentTime; } function start(){ $(‘#start‘).hide(); Media.play(); }
标签:
原文地址:http://www.cnblogs.com/gongzhujiademao/p/4260532.html