html5 中的 video 标签 在有些 android 机上面层级好高， z-index 控制不了。

[vv122483]

RT：求大神指教一下，有没有人遇到过这种问题。在视频上面加个字都加不了。被视频的层级盖住。

[learnshare]

别用 z-index，用定位，后面的标签会覆盖在前边标签的上面。

video 应该和 img 类似的层级，不是很高吧。

demo code:

<div class="video-div">
<video src="abc.mp4"></video>
<span class="over-text">text over the video</span>
</div>

.video-div{
position: relative;
}
.over-text{
position: absolute;
left: ?;
bottom: ?;
}

[vv122483]

@learnshare 这个在pc 上都是可以的，我的n5还有苹果上也是可以的，就是在有的android机子上面，像红米，魅蓝什么的机子上面，video感觉层级是max的，只要一播放视频，就感觉脱离文档束缚，跑到最前面去了，根本没法控制

[learnshare]

@vv122483 你想加字幕，还是视频作为背景？

[vv122483]

@learnshare 都行。我现在在测试。。给你看一个连接。。http://houzijiu.oicp.net:45754/video-js/

[vv122483]

@learnshare 点击播放视频后，文字就被盖住了！！！被这个问题搞死了。。

[crs0910]

@vv122483 用iframe盖上去试试？

[cst4you]

研究下 bilibili 的手机版看看?

[caomu]

我猜是这些中低端手机为了“用户体验”，自动识别视频并突出播放，就像对flash视频那样。

[learnshare]

@vv122483 低端浏览器，你能保证看到视频就行了，某些行为不一致也不好办。

你这个视频上面的点击播放这一层有 bug，鼠标滑到播放按钮上的时候，反而无法点击了，div 嵌套有问题

[FuryBean]

我估计视频这个标签和早期Android版本的input type=password是一样的(现在是不是这样我就不清楚了)，在显示的时候实际使用的真正的原生组件覆盖到最上面（input type=password是点击后才会显示成原生组件）。

input type=password的这个行为是可以使用CSS控制的，可以控制只使用Webkit自带的文本框。

鉴于楼主出现问题的机器都是国产机，我估计就没那么乐观了。

[NicholasNC]

在安卓机的微信上，使用 H5 的 video，层级感觉更高。

@cst4you 话说 bilibili 的手机版不是用 H5 的 video 的吧？是他们自己的？

[wujunchuan2008]

播放器在移动端(尤其是在 X5 内核的浏览器中)会有一些异常.表现在会将 video 标签提升为 Native 控件,覆盖掉底下的 HTML 元素.(原生组件优先级肯定要优先于 HTML 元素)