对HTML5的微信全屏幕问题的解决

在手机微信游戏在iOS和Android的视频，会遇到很多的问题，如需要手动点击视频，和视频播放，微信会跳出框控件，如果视频是不是腾讯完成视频的播放，将有视频腾讯广告推送问题

解决方案：向视频标签添加一些属性并调用H5本地视频。

<视频
id=videoall
01
海报=图像1。
预加载
WebKit playsinline = 真 / *这个属性是iOS 10可设置
让视频在窗口回放，那不是全屏。
playsinline = 真 / * iOS微信浏览器窗口支持。
x-webkit-airplay =允许
X5的视频播放器类型=H5 / *启用H5播放器，微信版本的Android *特点
X5的视频播放器全屏= 真 / *全屏幕设置，
真的设置为防止交叉屏幕。
X5的视频定位=portraint / *玩家支付方向，
景观横屏，portraint竖屏，竖屏的默认值为。
样式对象匹配：填充>
海报=图像 1：属性指定视频下载时显示的图像，或用户单击播放按钮前显示的图像。如果不设置此属性，则使用视频的第一帧。

预加载=自动：属性指定在加载页面后加载视频。

WebKit playsinline和playsinline：本地播放视频播放时，没有脱离文档流。但这个属性是非常特殊的。它需要嵌入应用程序的网页，例如，微信= =是的webview.allowsinlinemediaplayback allowsinlinemediaplayback UIWebView = =是的。换句话说，如果没有设置应用程序，添加到您的网页的标签也是无效的。这就是为什么Android手机微信播放视频都是全屏的，因为应用程序不支持playsinline，而ISO的WeChat的支持。

这里是说，如果你想让全屏幕直播或全屏H5体验用户，ISO需要建立WebKit playsinline标签，因为你错误的不支持，Android不需要，因为默认的全屏。但此时全屏幕播放控制，你是否有控制或没有。你可能需要发挥控制直播，但全屏H5是不需要的。然后，在删除全屏播放控件时，我们需要以下设置：在同一级别播放。

x-webkit-airplay =允许不知道它是如何工作的，但小编辑猜测，这个属性应该是AirPlay的功能，使这个视频支持iOS。使用AirPlay可以播放视频，音乐和图片文件直接从不同位置上的iOS设备，也就是说，视频和音频文件收音机播放可通过AirPlay的功能，当然，前提是，终端设备，游戏还将支持相应功能。

X5的视频播放器类型：使同层H5播放器，即当视频全屏，div可以在视频层，也是微信Android版本的独特属性。在同一水平发挥的别名也叫身临其境的游戏。当播放时，它看起来像一个全屏。但是，它消除了控制和微信导航栏，只留下两个关键的X和<，同层玩家当前是在Android上唯一有效的（包括微信），不支持iOS的时间。至于为什么同一层只玩开放的Android，因为Android不喜欢ISO本地播放，默认的屏幕会使一些界面操作受阻，如果它是满的H5好吧，但你的生活，那等特点的弹幕无法实现，所以在解决问题的同层玩概念的这段时间。然而，在测试过程中，对ISO和Android不同版本的结果略有不同。

X5的视频定位：播放器的支持方向，可选价值景观横屏，竖屏的portraint。默认值是Portraint。生活和全屏H5通常显示在竖屏，但是这个属性需要X5视频播放器打开H5型模式

x5shy videoshy；-；- playershy；-全屏：全屏设置。这也是两属性值，真实和虚假，真实和虚假的支持全屏播放，不支持全屏播放。

事实上，ISO微信浏览器是Chrome的内核，相关属性的支持，以及为什么X5不支持在同一层。它是X5内核，和一些属性标签，如playsinline，不支持，所以它总是满屏。

有一个问题，在Android微信，即使有上述属性，会有黑边，不满屏的问题。

解决方案：添加对象适合：填充到视频中；样式属性。如果有黑色边缘，可能是视频的大小不合适。
<视频
id=videoall

海报=1
预加载
WebKit playsinline =真正的
playsinline =真正的
x-webkit-airplay =允许
X5的视频播放器类型=H5
X5的视频播放器全屏=真正的
X5的视频定位=portraint
样式对象匹配：填充>

* {
填充：0；
保证金：0；
}
# videobox {位置：绝对；宽度：100%；高度：100%；背景颜色：绿色；背景图像：URL（1。JPG）；背景尺寸：100% 100%；背景：背景尺寸：；}；}。
# videoall {
高度：自动；
位置：绝对；
宽度：100%；
顶部：0；
左：0；
对象匹配：填充；
显示块；
背景尺寸：封面；
溢出：隐藏；}
# BTN，# againbtn {宽度：81px；身高：75px；位置：绝对的；最高：50%；左：50%；边缘上：-37.5px；边距：；81px；100%；}。
# videoend {位置：绝对；背景颜色：粉红色；显示：无；背景图像：URL（2。JPG）；背景尺寸：封面；背景位置：位置：背景；}
无功videoall = document.getelementbyid（'videoall），
videobox = document.getelementbyid（'videobox），
建立document.getelementbyid（'btn），
videoend = document.getelementbyid（'videoend）；
无功clientwidth = document.documentelement.clientwidth；
自己的document.documentelement.clientheight var =；
videoall.style.width = clientwidth + 'px；
videoall.style.height =汽车；
Document.addEventListener（'touchmove功能（e）{ e.preventDefault（）}，假）；
功能stylediv（分）{
divid.style.width = clientwidth + 'px；
divid.style.height =自己+ 200 + 'px；
}
Stylediv（videobox）；
Stylediv（videoend）；
U = navigator.useragent VaR；
无功isandroid = u.indexof（'android）- 1 u.indexof（'adr）| | > > 1； / / Android终端
无功isios = u.match（ / ！；
功能playcontr（）{
如果（isandroid）{
videoall.style.width =屏幕分辨率的宽+ 'px；
videoall.style.height = window.screen.height + 'px；
}
videobox.style.display =块；
VideoALL.play（）；
btn.style.display =没有；
videoend.style.display =没有；
}；
VideoALL.addEventListener（'pause，函数（）{（）{
videoall.style.width = clientwidth + 'px；
btn.style.display =块；
}）
VideoALL.addEventListener（结束
videoall.pause（）；
videobox.style.display =没有；
videoend.style.display =块；
}）；
以上是解决HTML5微信打Xiaobi的全屏幕的问题。希望能对你有所帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。