记一次微信H5全屏播放视频的总结

一、H5场景介绍

需求:在微信里打开一个H5页面,然后点击按钮全屏播放视频,等视频播放完成后,在视频上显示一个跳转按钮,点击按钮跳转到其他的页面。

二、遇到的问题

1、IOS设备微信上,视频不能预加载,导致视频播放时黑屏时间较长,策划不能接受;

2、Android设备微信上,由于X5内核对video组件做了处理,全屏播放视频时,会新开一个页面播放,导致屏幕左上角会出现返回键,用户点击返回键,关闭新开的页面,但是关闭后的页面显示效果不好,策划不能接受;

3、全面屏手机播放视频,视频尺寸是1080*1920,为了不拉伸视频,没有对video标签的高度做100%的限制,这样就会出现视频上面跳转按钮定位的问题,如果写死,各个手机看到的效果有很大差异,策划不能接受;

4、新版IOS设备微信,如果跳转页面后,页面顶部会出现前进/后退的状态栏,返回上层页面后,之前的跳转按钮就会被状态栏遮住,策划不能接受。

三、解决方案

1、问题一解决方法:

(1)video标签设置如下图所示 (2)进入H5首页,安卓可以预加载视频,不用处理,IOS可以根据监听“WeixinJSBridgeReady”事件,提前播放视频,然后立即关闭视频的声音,还需要监听video组件的“canplaythrough”事件,然后在“canplaythrough”事件的回调方法里显示播放视频按钮。

(3)在点击播放按钮后,立即把视频的播放时间置为0,然后重新播放。

2、问题二解决方法:

(1)IOS设备和Android设备全屏播放视频显示效果如下图所示:

(2)安卓点击左上角返回键的时候,调用X5提供的退出全屏监听方法,然后隐藏视频,显示首页。 (3)再次点击视频播放按钮,即可接上之前的播放进度。

3、问题三解决方法:

(1)跳转按钮在全面屏和非全屏屏上的显示效果如下图所示:

(2)根据已知的视频宽高比算出页面视频显示区域的高度,然后在算出全面屏底部黑屏的高度即可,这样就可适配所有尺寸的手机。

4、问题四解决方法

(1)针对IOS设备做了兼容,利用浏览页面历史记录替换的方式(妥协的做法,无奈表情),安卓不做处理。

四、H5体验地址,做的不够完美,希望大家多多指导,谢谢!

results matching ""

    No results matching ""

    results matching ""

      No results matching ""