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

1、H5场景介绍

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

2、遇到的问题

一、IOS设备微信上，视频不能预加载，致使视频播放时黑屏时间较长，策划不能接受；

二、Android设备微信上，因为X5内核对video组件作了处理，全屏播放视频时，会新开一个页面播放，致使屏幕左上角会出现返回键，用户点击返回键，关闭新开的页面，可是关闭后的页面显示效果很差，策划不能接受；

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

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

3、解决方案

一、问题一解决方法：

（1）video标签设置以下图所示

（2）进入H5首页，安卓能够预加载视频，不用处理，IOS能够根据监听“WeixinJSBridgeReady”事件，提早播放视频，而后当即关闭视频的声音，还须要监听video组件的“canplaythrough”事件，而后在“canplaythrough”事件的回调方法里显示播放视频按钮。

（3）在点击播放按钮后，当即把视频的播放时间置为0，而后从新播放。

二、问题二解决方法：

（1）IOS设备和Android设备全屏播放视频显示效果以下图所示：

（2）安卓点击左上角返回键的时候，调用X5提供的退出全屏监听方法，而后隐藏视频，显示首页。

（3）再次点击视频播放按钮，便可接上以前的播放进度。

三、问题三解决方法：

（1）跳转按钮在全面屏和非全屏屏上的显示效果以下图所示：

（2）根据已知的视频宽高比算出页面视频显示区域的高度，而后在算出全面屏底部黑屏的高度便可，这样就可适配全部尺寸的手机。

四、问题四解决方法

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

4、H5体验地址，作的不够完美，但愿你们多多指导，谢谢！