video 微信 标签层级过高_微信里video视频播放全屏、video视频层级问题的处理

默认情况下，video视频播放的时候会全屏播放你的视频，脱离页面，严重影响一些例如边看视频边交互的H5应用。

在ios下，可以通过playsinline(iOS10之前需要写成webkit-playsinline)这个属性来让视频不默认全屏播放：

但是android微信内置浏览器采用腾讯X5内核，不遵循X5web标准，video强制全屏就是其一。视频播放完毕后还会出现QQ自己的视频推荐。所以以上设置仅是解决了ios问题，下面说一下安卓的解决方法。

1.首先设置x5-video-player-type='h5'，腾讯x5内核系的android微信用的浏览器webview的内核，使用这个属性可以让视频播放的时候，视频上可以有其他dom元素，这时可以解决在视频播放的时候把视频作为整页面的背景，其他dom元素放在视频之上(非腾讯白名单机制的一种处理措施)。

2.设置object-fit属性，object-fit以及object-position可以将真正的视频放在容器该有的位置。object-fit指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。object-position规定了可替换元素的内容。

object-fit属性取值如下：

contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

none：被替换的内容将保持其原有的尺寸。

scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

完整代码如下：

html部分:

class="videoBox"

controls

playsinline="true"

x5-playsinline="true"

webkit-playsinline="true"

x5-video-player-type="h5"

/>

css部分:

.videoBox: {

position: relative;

height: 100%;

width: 100%';

objectFit: contain;

}

video::-webkit-media-controls-enclosure {

-webkit-appearance:none;

}