背景介绍: 项目需求是video的src是异步获取的,因此在移动端碰到了currentTime设置无效的问题。 原因大概是currentTime先赋值了,但是视频资源还没有加载完成。
网上搜了一些方法:
var myPlayer = $("#player"); var userAgent_m = navigator.userAgent; if(userAgent_m.indexOf("iPhone") > -1 || userAgent_m.indexOf("iOS") > -1){ // ios myPlayer.on("canplay", function(){ myPlayer[0].currentTime = lastCurrentTime; }); }else{ // 安卓 myPlayer[0].currentTime = lastCurrentTime; }
以上的方法在ios中亲测有效,但是在安卓微信中测试无效; 而通过监听loadedmetadata、loadeddata、canplay、canplaythrough等,在安卓微信浏览器中,虽然currentTime能赋值得上,但一点击播放,video就犯了“鬼畜”行为;
没办法了,用定时器:
var myPlayer = $("#player"); var currentTime_timer; // 安卓浏览器给currentTime赋值定时器 var userAgent_m = navigator.userAgent; if(userAgent_m.indexOf("iPhone") > -1 || userAgent_m.indexOf("iOS") > -1){ // ios myPlayer.on("canplay", function(){ myPlayer[0].currentTime = lastCurrentTime; }); }else{ // 安卓 currentTime_timer = setInterval(function(){ myPlayer[0].currentTime = lastCurrentTime; },1000); } // 播放后清除定时器 myPlayer.on("play", function(){ if(currentTime_timer){ clearInterval(currentTime_timer); } });
PC上浏览器的模拟移动端已经生效,但是安卓微信真机测试,还是无效的。
再来,timeupdate,有网友说用这个方法在微信上可行,为了避免播放时的“鬼畜”,进行了如下优化:
var myPlayer = $("#player"); var setTimeFlag = 1; // 用于安卓监听timeupdate,currentTime只赋值一次 var userAgent_m = navigator.userAgent; if(userAgent_m.indexOf("iPhone") > -1 || userAgent_m.indexOf("iOS") > -1){ // ios myPlayer.on("canplay", function(){ myPlayer[0].currentTime = lastCurrentTime; }); }else{ // 安卓 myPlayer.on("timeupdate", function(){ if(setTimeFlag == 1){ myPlayer[0].currentTime = lastCurrentTime; setTimeFlag = 2; } }); }
至此,亲测能解决安卓微信currentTime赋值的问题
各路大神,如果有更好的解决方法,望赐教,盼留言…