php 微信自动全屏视频设置,微信H5视频自动弹出全屏播放的解决方案
微信播放最大坑
h5页面分享到微信上播放视频,最大的坑就是在Android手机上,X5浏览器会劫持Video标签用腾讯播放器弹出全屏播放,处于最上层,覆盖DOM元素,更可恶的是播放完毕时,会出现很多腾讯的广告视频,比如:
同层播放
X5浏览器为了解决覆盖DOM元素的问题,提出了一个同层播放的概念,通俗一点讲就是视频播放还是要弹出全屏的,但是视频可以不覆盖DOM元素,可以和视频在同一层,虽然这方案有点别扭,但总算解决了覆盖DOM元素的问题,特别是对于H5直播来说非常重要,可参考X5的同层播放
同层播放的实现
虽然X5提供了一些属性可以用于同层播放的设置,但是还是有一些细节需要处理:
X5弹出全屏播放时,需要订阅resize和全屏事件,对于video以及容器大小的调整
点击微信顶部的返回按钮时,退出全屏播放时,需要订阅退出全屏事件,根据业务实际情况处理,比如有的场景需要关闭当前页面,给用户一种退出当前页面的体验。
设置视频的显示位置, 比如全屏直播视频要全屏显示,普通的播放视频在左上角显示,点击全屏按钮时,又要居中显示。
很多细节的东西需要处理, 发现Aliplayer播放器在最新发布的版本中支持了X5浏览器的h5的同层播放,并且很多细节的东西帮助实现了,下面使用Aliplayer实现了两个例子:
点播视频
视频点播的一般的布局是上半部分为视频播放区域,下半部分为播放列表和评论区域,在Android 微信上的播放效果如下:
创建播放器
通过 x5_video_position和 x5_type属性指定视频的显示位置和启用H5同层播放
var player = new Aliplayer({
id: 'J_prismPlayer',
autoplay: true,
isLive:false,
playsinline:true,
controlBarVisibility:'always',
source:"",
useH5Prism:true,
x5_video_position:'top', //指定视频在上部显示
x5_type:'h5' //声明启用同层H5播放器,支持的值:h5
});
弹出全屏播放时的处理
这里主要分两种情况:
在点击播放按钮开始播放时,微信劫持视频弹出全屏播放,这时候Aliplayer也会触发全屏事件,在这里调用取消全屏方法。
用户点击Controlbar上的全屏按钮时,这个时候也会触发全屏事件,在这里可以调整视频为居中显示。
上面两种情况的处理有点不一样的
this._firstFullscreen = true;
let that = this;
this.player.on('requestFullScreen',(e)=>{
if(that._firstFullscreen)
{
that.player.cancelFullScreen();
that._firstFullscreen = false;
}
else
{
let video=$(that.player.el()).find('video');
video.addClass('center');
}
});
视频居中的样式
video.center
{
object-position:50% 50% !important;
}
退出全屏时恢复视频顶部播放
退出全屏的时候会出发事件,在事件里移除居中的样式
this.player.on('cancelFullScreen',(e)=>{
let video=$(that.player.el()).find('video');
video.removeClass('center');
})
直播全屏播放
直播场景下会把视频充满整个屏幕,在上面显示评论、点赞、主播和观众信息等,比如:
创建播放器
通过x5_fullscreen和 x5_type属性指定视频全屏播放和启用H5同层播放,另外需要去掉Controlbar,要通过skinLayout自定义UI。
var player = new Aliplayer({
id: 'J_prismPlayer',
autoplay: true,
isLive:true,
playsinline:true,
controlBarVisibility:'always',
source:"",
useH5Prism:true,
x5_fullscreen:true, //全屏播放
x5_type:'h5', //声明启用同层H5播放器,支持的值:h5
skinLayout:[
{name:"bigPlayButton", align:"blabs", x:"70", y:"150"},
{name: "H5Loading", align: "cc"}
]
});
弹出全屏播放时的处理
在点击播放按钮开始播放时,微信劫持视频弹出全屏播放,这时候Aliplayer也会触发全屏事件,在这里调用取消全屏方法,并且调整评论、点赞等的布局。
let that = this;
this.player.on('requestFullScreen',(e)=>{
that.adjustLayout(true);
that.player.cancelFullScreen();
});
改变视频显示方式
全屏播放视频默认是平铺的,如果想不平铺可以设置object-fit的样式为contain或其它
video{
object-fit: contain !important;
}
微信返回时关闭页面
微信在原来的页面上面打开另一个页面全屏播放视频, 如果正常流程返回时,是返回到程序原来的页面,我希望是返回时直接关闭页面。
this.player.tag.addEventListener("x5videoexitfullscreen",()=>{
if(WeixinJSBridge)
WeixinJSBridge.call('closeWindow');
});
视频显示模式和位置
如果"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代码
img{
width: 300px;
height: 250px;
border: 1px solid black;
background-color: silver;
margin-right: 1em;object-fit: none;
}
#object-position-1 {
object-position: 10px;
}
#object-position-2 {
object-position:100%10%;
}
效果
php 微信自动全屏视频设置,微信H5视频自动弹出全屏播放的解决方案相关推荐
- 电脑微信关闭自动保存_微信自动保存图片怎么关闭?微信自动保存图片在哪关?...
微信是很多人手机上使用最频繁的一个app,因此很多时候,手机内存不够用,第一件事就是清理微信占用内存.其实微信用户只要在使用微信的时候将微信自动保存图片关闭就可以省下不少内存了,那么微信自动保存图片怎 ...
- python 微信聊天机器人_python操作微信自动发消息的实现(微信聊天机器人)
前言 最近在学习python,发现一个微信自动发消息的小demo感觉很有意思,试了一下,不成功,因为demo中用的是itchat这个库来操作微信,而这个库是通过微信网页版来操作微信的,现在微信网页版已 ...
- 安卓微信名字彩色字体怎么设置? 微信名字特效设置教程
近日,微信名字又整出了新活.用户可以把自己的微信名字设置为彩色或者带特效的字.小编直呼内行!那么微信名字怎么弄成彩色字体呢?游综宅马上为您呈上设置教程. 微信名字增加特效 设置彩色字体教程步骤: 1. ...
- python微信自动发消息_python操作微信自动发消息的实现(微信聊天机器人)
前言 最近在学习python,发现一个微信自动发消息的小demo感觉很有意思,试了一下,不成功,因为demo中用的是itchat这个库来操作微信,而这个库是通过微信网页版来操作微信的,现在微信网页版已 ...
- 最近火爆的“于和伟蹦迪”来电视频设置方法,视频可替换!
最近,"于和伟蹦迪"接着奏乐接着舞来电视频火了,本人也发声了,表示"没完没了这是...从人传人已经开始传染手机了",再加上大黑牛李晨的参与互动,冲上抖音热点榜! ...
- python微信自动发消息_Python使用微信itchat接口实现查看自己微信的信息功能详解...
Python使用微信itchat接口实现查看自己微信的信息功能详解 发布时间:2020-09-09 04:20:11 来源:脚本之家 阅读:134 本文实例讲述了Python使用微信itchat接口实 ...
- u盘自动打开html,如何快速禁用U盘自动弹出(播放)功能无需手动关闭弹出窗口
如何快速禁用U盘自动弹出(播放)功能无需手动关闭弹出窗口 发布时间:2013-08-26 17:04:27 作者:佚名 我要评论 移动硬盘分了N个区的时候需要手动一个一个的关掉自动播放窗口,真 ...
- python微信自动打卡_「微信辅助」吃鸡再也不怕了,Python用wxpy实现微信自动回复...
我是程序员小小叶,为大家带来原创精彩技术内容. 首先安装wxpy. pip install wxpy优点:相比itchat封装了接口,使用较为方便.注意事项:wxpy 支持 Python 3.4-3. ...
- android版本更新怎么回事,微信自动更新怎么回事? 微信7.0.1怎么升级官方安卓版什么时候更新...
iOS微信7.0.0版本刚推送没多久,iOS微信7.0.1版本再次推送,本次更新主要是修复BUG为主,更新包描述内容与7.0.0版本一致,如下图所示. 小编亲自体验iOS微信7.0.1版本,并没有发现 ...
- 如何通过扫码自动复制口令 并打开抖音时自动弹出口令视频窗口
现在在做一个功能 主要是通过扫码(主要是扫码付款用于线下店面做抖音类短视频视频推广). 前两天一个朋友说自己的线下服装店很难做,线下消费的客户基本都是一次性消费,很难对客户进行留存.也一直想转型做线上 ...
最新文章
- 如何利用计算机计算天数,如何应用Win10系统电脑中的计算器计算两个日期之间的天数?...
- QTP之对测试用例的自动化过程的分解
- BD和DBMS和SQL概念
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 13丨每位学生的最高成绩【难度中等】
- 树莓派 python spi,树莓派测试SPI-基于设备操作ioctl
- C++之继承探究(四):继承的使用
- Consider renaming one of the beans or enabling overriding by setting
- Linux下unzip乱码问题解决
- [WebKit] JavaScriptCore解析--基础篇(二)解释器基础与JSC核心组件
- [案例]信息巨头Carfax如何打造数据产品
- 1076: 三位数求解 C语言
- 为什么你不能体面地做自己
- Adobe证书含金量
- 软件工程辅助设计多周期处理器
- 快递跨界电商是在“走弯路”
- Unity 3D学习笔记(5)物体的碰撞/触发检测
- 攻击JavaWeb应用[3]-SQL注入[1]
- SAP那些事-职业篇-37-SAP相关书籍简单介绍
- 一文了解前端与全栈工程师!
- 全国青少年编程等级考试scratch四级真题2022年12月(含题库答题软件账号)