[踩坑]移动端安卓微信浏览器video.currentTime设置无效

背景介绍:
项目需求是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赋值的问题

各路大神,如果有更好的解决方法,望赐教,盼留言…

你可能感兴趣的:([踩坑]移动端安卓微信浏览器video.currentTime设置无效)