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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3561 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

层级

指教

index

12 条回复 • 2018-01-08 15:56:12 +08:00

learnshare

2015-03-03 14:07:05 +08:00

别用 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

2015-03-03 14:23:31 +08:00

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

learnshare

2015-03-03 14:28:24 +08:00

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

vv122483

2015-03-03 14:31:44 +08:00

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

vv122483

2015-03-03 14:33:59 +08:00

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

crs0910

2015-03-03 14:40:09 +08:00

@vv122483 用iframe盖上去试试？

cst4you

2015-03-03 14:44:11 +08:00

研究下 bilibili 的手机版看看?

caomu

2015-03-03 15:02:31 +08:00 via Android

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

learnshare

2015-03-03 15:38:49 +08:00

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

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

FuryBean

2015-03-03 18:18:37 +08:00

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

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

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

NicholasNC

2017-06-29 17:54:11 +08:00

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

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

wujunchuan2008

2018-01-08 15:56:12 +08:00

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

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

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