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

2024-05-15 19:38:53

一、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

记一次微信H5全屏播放视频的总结相关推荐

uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信内置浏览器非全屏播放视频解析
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放. 首先公布解决方案: 感谢知乎上的回答,原版微信内置浏览器如何小窗不全屏播放视频? 感谢该问题的徐霖同学的回答 ...
[]转载]微信内置浏览器非全屏播放视频解析
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放.首先公布解决方案: 感谢知乎上的回答,原版[微信内置浏览器如何小窗不全屏播放视频?]感谢该问题的徐霖同学的回答 ...
微信内置浏览器非全屏播放视频解析 1
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放. 首先公布解决方案: 感谢知乎上的回答,原版[ 微信内置浏览器如何小窗不全屏播放视频?] 感谢该问题的徐霖同学 ...
android 4.0以上WebView不能全屏播放视频的解决办法
上次鄙人做了一个简单的利用webView实现的一个浏览器!其中遇到了两个问题,一个是将浏览器中需要下载的内容托管到系统默认的下载程序进行下载,这个比较简单就不在这里讨论了:另一个问题就是我们的Andr ...
如何获取UIWebView中全屏播放视频事件
这样一种情况,用UIWebView加载一个页面,竖屏,页面中有视频,现在我们希望在全屏播放这个视频的时候可以横屏.解决方法如下: 1.设置一个变量监控是否全屏播放视频 2.根据这个变量设置是否可以横屏 ...
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频
1.背景项目中有涉及视频播放的需求,并且UI设计了样式,与原生的视频video组件有差异,所以使用了vue-video-player插件,并对vue-video-player进行样式改造,自定义播放 ...
[RK3399][Android7.1] 调试笔记 --- 闪电浏览器全屏播放视频时黑屏
Platform: RK3399 OS: Android 7.1 Kernel: v4.4.83 现象: 使用默认闪电浏览器全屏播放视频时黑屏, error log如下: 08-09 17:19:45 ...
Android全屏播放视频~包括刘海屏、隐藏时间状态栏
需求是全屏播放视频,刘海屏上面也要播放. 下面是我实现的方式: 首先创建 CustomVideoView 工具类: import android.annotation.TargetApi; impor ...

最新文章

热门文章