来，我悄悄告诉你，其实在微信上玩H5全屏视频超容易，就是有点儿不好记。别急，我这就细细地讲给你听，保证你一学就会，快跟我学！
一、设置video标签的基本属性
x5-video-orientation="portraint" /*播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏*/ style="object-fit:fill">
给你说我们得给视频加点料。比如这个”poster=”images/1.jpg””，你加到这里以后，提前就能看见图片预告了，不然的话就是直接进入片头。再有个叫”preload=”auto”的，这个能让网页加载完了以后，视频也跟着开始加载，这样你一点击视频就能马上看到画面。
接下来咱们聊聊怎么才能愉快地用各种设备刷视频！举栗子安卓手机看微信视频就是只看得见全景，因为它木有那种’playsinline’的神奇功能。不过别急，苹果手机上的微信就有啊～如果你想要全屏看视频，在苹果手机微信里把’webkit-playsinline’这玩意儿给删掉就成！
二、处理全屏播放时的控件问题
有时候我们只想痛快看看视频，别让讨厌的控制器挡路。听我说，用下“同层播放”功能就行！只要把`x5-video-player-type`设为”h5″，这个炫酷的H5播放器就能出现。视频全屏后，链接标签（也就是那个p）就会跑到视频上方，这样你就可以安心看视频了，控制按钮全都消失啦～
这款软件在同楼层用的时候好棒~感觉就像身临其境一样。虽然看上去一整个屏幕都是画面，但是人家偷偷地把控制、导航这些东西藏好了，想出去的话找那个“X”按钮就行。对于直播或者全屏看H5这些需求真的很实用！
三、其他需要注意的属性设置
没错，这里再给你们提几个点子！像“x-webkit-airplay=””allow”””这东西，可能乍一听会觉得有点懵，实际上它可以帮咱们用手机的AirPlay功能来看自己拍的视频。有了这个，不论是谁手里有AirPlay，看视频都不是事儿！
其实，你知道吗？iPhone上那个微信浏览器就是Chrome内核做的所以有点像Chrome里的小功能也都能在这个里面用！不过我们安卓手机用的是X5内核所以像“播放并列”这样的功能就不太行，看个视频还得全屏才行呐。
四、解决安卓手机上视频播放不全屏的问题
设好了好多设定，不过有个小毛病，用安卓手机看视频有时两边会有黑条，占不满整个屏幕。别着急，你只需在`video`标签中加个名叫`x5-video-orientation`的属性，改成`landscape`或者`portrait`就行了，这样就能调整视频角度，让画面铺满屏幕！
五、实战案例分析
搞定！接下来该实战演练咯。比如说你想在微信上放个全屏广告，很简单，按照我的话去做。首先定位到video标签属性；然后往H5页面里加上广告视频；最后分享出去，大功告成！只要你的朋友一打开就能看见这个全屏广告，效果相当震撼！
六、总结
看完这篇文章是不是觉得在微信上玩刷屏H5视频soeasy？其实有点挑战，但照着流程走就好了，初学者也行。遇到不懂咋整的地方咋办？别慌，大力敲我，我必定给你解答。
小伙伴们，快来告诉我全屏看微信视频是啥感受！来评论区唠唠。别忘了点赞支持一下这篇文章让大家都知道这个新技能！谢！
*{
padding: 0;
margin: 0;
}
#videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}
#videoALL{
height: auto;
position: absolute;
width: 100%;
top: 0;
left: 0;
object-fit: fill;
display: block;
background-size: cover;
overflow: hidden;}
#btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}
#videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}
评论0