记一次微信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体验地址，做的不够完美，希望大家多多指导，谢谢！

转载于:https://juejin.im/post/5c35acd951882523f025fdfc