E企盈营销工具技术服务商 热线:4006-838-530

使用Aliplayer在微信中播放视频的正确姿势

E企盈直播平台营销卖货系统

微信播放最大坑h5页面分享到微信上播放视频,最大的坑就是在Android手机上,X5浏览器会劫持Video标签用播放器弹出全屏播放,处于最上层,覆盖DOM元素,而且播放完毕时,会出现广告视频,比如:同层播放X5浏览器为了解决覆盖DOM元素的问题,提出了一个同层播放的概念,通俗一点讲就是视频播放还是要弹出全屏的,但是视频可以不覆盖DOM元素,可以和视频在同一层,虽然这方案有点别扭,但总算解决了覆盖DOM元素的问题,特别是对于H5直播来说非常重要。同层播放的实现虽然X5提供了一些属性可以用于同层播放的设置,但是还是有一些细节需要处理:X5弹出全屏播放时,需要订阅resize和全屏事件,对于video以及容器大小的调整点击微信顶部的返回按钮时,退出全屏播放时,需要订阅退出全屏事件,根据业务实际情况处理,比如有的场景需要关闭当前页面,给用户一种退出当前页面的体验。设置视频的显示位置, 比如全屏直播视频要全屏显示,普通的播放视频在左上角显示,点击全屏按钮时,又要居中显示。很多细节的东西需要处理, Aliplayer播放器在最新发布的版本中支持了X5浏览器的h5的同层播放,并且很多细节的东西帮助实现了,下面使用Aliplayer实现了两个例子:点播视频H5Demo全屏直播H5LiveDemo点播视频视频点播的一般的布局是上半部分为视频播放区域,下半部分为播放列表和评论区域,在Android 微信上的播放效果如下:代码可以参考点播视频H5Demo创建播放器通过 x5_video_position和 x5_type属性指定视频的显示位置和启用H5同层播放弹出全屏播放时的处理这里主要分两种情况:1.在点击播放按钮开始播放时,微信劫持视频弹出全屏播放,这时候Aliplayer也会触发全屏事件,在这里调用取消全屏方法。注:播放器以后会实现这个逻辑2.用户点击Controlbar上的全屏按钮时,这个时候也会触发全屏事件,在这里可以调整视频为居中显示。上面两种情况的处理有点不一样的视频居中的样式退出全屏时恢复视频顶部播放退出全屏的时候会出发事件,在事件里移除居中的样式直播全屏播放直播场景下会把视频充满整个屏幕,在上面显示评论、点赞、主播和观众信息等,比如:代码可以参考全屏直播H5LiveDemo创建播放器通过x5_fullscreen和 x5_type属性指定视频全屏播放和启用H5同层播放,另外需要去掉Controlbar,要通过skinLayout自定义UI。弹出全屏播放时的处理在点击播放按钮开始播放时,微信劫持视频弹出全屏播放,这时候Aliplayer也会触发全屏事件,在这里调用取消全屏方法,并且调整评论、点赞等的布局。改变视频显示方式全屏播放视频默认是平铺的,如果想不平铺可以设置object-fit的样式为contain或其它微信返回时关闭页面微信在原来的页面上面打开另一个页面全屏播放视频, 如果正常流程返回时,是返回到程序原来的页面,我希望是返回时直接关闭页面。视频显示模式和位置如果”x_video_position”的两个值top和center不能满足要求,可以通过自定义object-fit和object-position属性,进行更灵活的设置视频的显示模式和位置。object-fit属性该object-fit CSS属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框可选的值:object-fit: fill;object-fit: contain;object-fit: cover;object-fit: none;object-fit: scale-down;每个值的效果:object-position属性object-position CSS属性控制替换内容位置,和background-position属性很类似比如:css代码效果本文作者:沐钦

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 使用Aliplayer在微信中播放视频的正确姿势
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏