微信视频播放不能全屏,微信全屏显示
在ios和Android手机中播放微信上的视频时，会出现很多问题。比如需要手动点击，播放视频，视频会跳出微信盒子，会出现一个控制栏。如果视频不是腾讯视频，播放后会出现腾讯视频的广告推送等问题。
解决办法：给video标签加一些属性，调用h5原生video。
video id= video all src= video/01 . MP4 poster= images/1 . jpg /* video cover */preload= auto WebKit-plays online= true /*该属性在ios 10中设置为允许视频在小窗口播放，即不是全屏播放* */plays inline= true /* IOS/* IOS微信浏览器支持小窗口播放*/x-WebKit-airplay= allow X5-video-player-type= H5 其中设置为true以防止横屏*/X5-video-orientation= portrain /*播放器支付的方向，横屏，port rain竖屏，默认值为portrain screen */style= object-fit:fill /videoposter="images/1.jpg":属性，指定视频下载时或用户点击播放按钮前要显示的图像。 如果未设置此属性，则使用视频的第一帧。
preload="auto" ：属性指定在加载页面后加载视频。
webkit-playsinline和playsinline：播放视频时，会在本地播放，不会脱离文档流。不过这个属性比较特殊，只有在网页中嵌入了APP的情况下才能生效，比如微信中UIwebview的allowsinlinemediaplayback=yes webview . allowsinlinemediaplayback=yes。换句话说，如果没有设置应用程序，将此标签添加到您的页面是无效的。这就是为什么安卓手机微信总是全屏播放视频，因为APP不支持playsinline，而ISO的微信支持。
这里我得补充一点，如果是想做全屏直播或者全屏H5体验的用户，ISO需要设置delete webkit-playsinline标签，因为你设置false就不支持了，而Android没有，因为默认是全屏。但是这个时候全屏有一个播放控件，不管你有没有设置控件。直播可能需要播放控件，但不需要全屏H5，所以要在全屏播放时去掉控件，需要以下设置：同层播放。
x-webkit-airplay="allow"暂时无法知道它的功能，不过边肖猜测这个属性应该会让这个视频支持ios的AirPlay功能。使用AirPlay可以直接在iOS设备上播放不同位置的视频、音乐、照片文件，也就是说可以通过AirPlay功能实现音视频文件的无线播放，前提是播放的终端设备也支持相应的功能。
x5-video-player-type：启用同层H5播放器，即视频全屏时，视频层可以呈现div，这也是微信安卓版独有的属性。同层播放别名也叫沉浸式播放。玩的时候看起来是全屏的，但是控制和微信的导航条都被去掉了，只剩下‘X’和’‘键。目前的同层播放器只在安卓(包括微信)上运行，暂时不支持iOS。至于为什么同层播放只对安卓开放，那是因为安卓不能像ISO一样本地播放，默认全屏会屏蔽一些界面操作。如果是全屏H5的话还好，但是如果是直播的话，弹幕之类的功能就无法实现了，所以同层播放的概念就在这个时候解决了这个问题。但是在测试的过程中发现，不同版本的ISO和Android效果略有不同。
x5-video-orientation：声明玩家支持的方向。可选值为横向水平屏幕和横向垂直屏幕。默认值portraint。无论是直播还是全屏H5，一般都是竖着玩，但是这个属性需要x5-video-player-type才能开启H5模式。
x5-video-player-fullscreen：全屏设置。它的两个属性值，true和false，true支持全屏播放，false不支持全屏播放。
其实ISO微信浏览器是Chrome的内核，所有相关属性都支持，这也是不支持X5对等播放的原因。安卓浏览器是X5内核，playsinline等一些属性标签不支持，所以一直是全屏。
还有个问题，在机器人的微信里面，就算加上了上面的属性，还会出现上下有黑边，不能全屏的问题。
解决办法：给video加上object-fit: fill;的style属性。如果还是有黑边有可能是视频尺寸不合适。
div id=视频盒子 video id=视频全部 src= MP4。MP4 poster= 1。jpg preload= auto WebKit-playsinline= true playsinline= true x-WebKit-airplay= allow X5-video-player-type= H5 X5-video-player-全屏= true X5-video-orientation= port raint style= object-fit:fill /video div id= BTN onclick= play边距：0;} # videobox {位置：绝对；宽度：100%;身高：100%;背景色：绿色；背景-图片：URL(1。jpg)；背景尺寸：100% 100%;背景-位置：顶部；溢出：隐藏；} #视频全部{ height:auto；位置：绝对；宽度：100%;top:0；左：0;对象适合：填充；显示：块；背景-尺寸：封面；溢出：隐藏；} #btn，#再次BTN { width:81px；身高：75像素位置：绝对；top:50%；左：50%;margin-top:-37.5像素；左边距：-40.5 px；背景-图片：网址(BTN。png)；背景尺寸：100% 100%;} # videoend { position:absolute；背景色：粉色；显示：无；背景-图片：URL(2。jpg)；背景-尺寸：封面；背景-位置：顶部；}脚本var视频all=文档。getelementbyid( video all )，视频框=文档。getelementbyid(视频框)，BTN=文档。getelementbyid( BTN )，视频结束=文档。getelementbyid(“视频结束”)；var客户端宽度=文档。documentelement。客户端宽度；var客户高度=文档。documentelement。客户身高；视频全部。风格。width=客户端宽度 px ；视频全部。风格。height= auto文档。addevent listener( touch move ，function(e){ e . prevent default()}，false)；函数样式div(divId){ divId。风格。width=客户端宽度 px ；迪维。风格。身高=客户端身高200 px} style div(视频盒子)；风格div(视频结束)；var u=navigator . useragentvar isan droid=u . index of( Android )-1 u . index of( Adr )-1；//安卓终端var isiOS=！u.match(/\(i[^；] ;(U；)?中央处理器.麦克OS X/)；//ios终端函数play contr(){ if(是安卓){ video all。风格。宽度=窗口。屏幕。宽度 px ；视频全部。风格。高度=窗口。屏幕。高度 px ；}视频盒子。风格。display= block视频全部。play()；BTN。风格。display= none视频结束。风格。display= none};视频全部。addevent侦听器( pause ，function(){ video all。风格。width=客户端宽度 px )；BTN。风格。display= block})视频全部。addevent侦听器( ended ，function(){ video all。pause()；视频盒。风格。display= none视频结束。风格。display= block});/脚本以上所述是小编给大家介绍的HTML5微信播放全屏问题的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。