html5 中的 video 标签 在有些 android 机上面层级好高, z-index 控制不了。 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vv122483
V2EX    问与答

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

  vv122483 2015-03-03 14:00:08 +08:00 22436 次点击
这是一个创建于 3877 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

12 条回复    2018-01-08 15:56:12 +08:00
learnshare
    1
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
    2
vv122483  
OP
   2015-03-03 14:23:31 +08:00
@learnshare 这个在pc 上都是可以的,我的n5还有苹果上也是可以的,就是在有的android机子上面,像红米,魅蓝什么的机子上面,video感觉层级是max的,只要一播放视频,就感觉脱离文档束缚,跑到最前面去了,根本没法控制
learnshare
    3
learnshare  
   2015-03-03 14:28:24 +08:00
@vv122483 你想加字幕,还是视频作为背景?
vv122483
    4
vv122483  
OP
   2015-03-03 14:31:44 +08:00
@learnshare 都行。我现在在测试。。给你看一个连接。。http://houzijiu.oicp.net:45754/video-js/
vv122483
    5
vv122483  
OP
   2015-03-03 14:33:59 +08:00
@learnshare 点击播放视频后,文字就被盖住了!!!被这个问题搞死了。。
crs0910
    6
crs0910  
   2015-03-03 14:40:09 +08:00
@vv122483 用iframe盖上去试试?
cst4you
    7
cst4you  
   2015-03-03 14:44:11 +08:00
研究下 bilibili 的手机版看看?
caomu
    8
caomu  
   2015-03-03 15:02:31 +08:00 via Android
我猜是这些中低端手机为了“用户体验”,自动识别视频并突出播放,就像对flash视频那样。
learnshare
    9
learnshare  
   2015-03-03 15:38:49 +08:00
@vv122483 低端浏览器,你能保证看到视频就行了,某些行为不一致也不好办。

你这个视频上面的点击播放这一层有 bug,鼠标滑到播放按钮上的时候,反而无法点击了,div 嵌套有问题
FuryBean
    10
FuryBean  
   2015-03-03 18:18:37 +08:00
我估计视频这个标签和早期Android版本的input type=password是一样的(现在是不是这样我就不清楚了),在显示的时候实际使用的真正的原生组件覆盖到最上面(input type=password是点击后才会显示成原生组件)。

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

鉴于楼主出现问题的机器都是国产机,我估计就没那么乐观了。
NicholasNC
    11
NicholasNC  
   2017-06-29 17:54:11 +08:00
在安卓机的微信上,使用 H5 的 video,层级感觉更高。

@cst4you 话说 bilibili 的手机版不是用 H5 的 video 的吧?是他们自己的?
wujunchuan2008
    12
wujunchuan2008  
   2018-01-08 15:56:12 +08:00
播放器在移动端(尤其是在 X5 内核的浏览器中)会有一些异常.表现在会将 video 标签提升为 Native 控件,覆盖掉底下的 HTML 元素.(原生组件优先级肯定要优先于 HTML 元素)
关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     969 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 20ms UTC 22:34 PVG 06:34 LAX 15:34 JFK 18:34
Do have faith in what you're doing.
ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86