video标签在微信浏览器下问题解决

  最近在做h5的移动端程序,需要在页面上点击按钮后播放视频,在pc、ios都正常,Android的其他浏览器也正常,唯独在使用Android微信浏览的时候,视频无法控制层级、播放。
  看网上有这个问题的人很多,大部分说的都是加上x5-video-player-type以及x5­-video­-player-­fullscreen等属性的解决方法,但经尝试后都不能解决。
  由于微信及QQ浏览器使用的是x5浏览器内核,Android客户端上,播放视频的时候是将视频生成了一个Native控件来播放视频的,所以视频的层级始终在最上层,而且使用脚本也无法对视频进行控制,所以这个基本上是无解了。
  快要放弃的时候,想到将视频转化下格式,转化成一种网页Video能播放,但是微信Native控件不支持的格式,所以将视频转化为flv格式,最后尝试竟然问题解决了,果然没有再调用微信Native控件,也能正常控制视频的暂停,我这里的视频使用的baidu的cyberplayer播放器。
  但是这种情况下,ios又出现不能播放的问题,所以加了一个平台的判断,如果IsAndroid平台就使用flv格式进行播放,如果ios就使用mp4格式。
  最后附上代码

var player =  null;
var fileExt = IsAndroid()?"flv":"mp4";
	player = cyberplayer("video");
	player.setup({
	   width: "100%", // 宽度,也可以支持百分比(不过父元素宽度要有)
	   height: height, // 高度,也可以支持百分比
	   file: "filename."+fileExt, // 播放地址
	   autostart: true, // 是否自动播放
	   stretching: "uniform", // 拉伸设置
	   repeat: false, // 是否重复播放
	   volume: 100, // 音量
	   controls: true, // controlbar是否显示
	   starttime: 0, // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
	   ak: "xxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey
	});
	 function IsAndroid(){
        var info = navigator.userAgent;
        var agents = ["Android"];//如果要判断多个平台,可以加这个数组里面
        for(var i = 0; i < agents.length; i++){
            if(info.indexOf(agents[i]) >= 0) return true;
        }
        return false;
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值