V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
vv122483
V2EX  ›  问与答

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

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

    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   ·   实用小工具   ·   2703 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 05:36 · PVG 13:36 · LAX 21:36 · JFK 00:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.