最近在做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;
}