这是在微信中正常页面，就是用了一个原生video标签没做任何处理。然后顶部是固定页面顶端的，这个时候向上滑动页面时，会出现下图现象

这个时候正常人都会想到z-index问题，我也是这样想的，可惜很抱歉的告诉大家，你把z-index设置多大都无效，随便设置都不会起作用，最后我找了很多资料，发现这个问题很多人都遇到了，都是无解。原生的video标签就是这么坑，大家想其他方式绕行吧！！！

我项目中解决大概的思路是：当然上面所描述的情况就不处理了，因为大家可以上bilibili看一下，同样的问题，未解决！然后我当前页面有一个抽奖按钮，点击抽奖后会弹出抽奖结果，注意这个时候是模态框呀，video的层级永远大于页面上的所有元素，这个时候我解决这个问题的大致思路是这样的，当弹出模态框的同时将video的display的属性改为none，就是隐藏video，然后将视频此时的这一帧保存用一个img标签来占video的位置。大概思路是这样的，具体现实大家自行去做吧！

关于移动端video标签层级问题的更多相关文章

  1. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...

  2. 大事记 - 安卓微信浏览器 video 标签层级过高

    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...

  3. 移动端video标签默认置顶的解决方案

    概述 在移动端上面,比如说微信上面打开一个页面,如果有video标签的话,常常会出现video标签默认置顶的情况,一般的解决方案是在不需要看见它的时候给它加一个display:none进行隐藏.今天在 ...

  4. video标签，在移动端获取第一帧作为展示

    写在前面 video标签,获取第一帧作为poster.网上能找着很多案例,很容易实现,在pc端 效果明显.但是在移动端,这些实现方式并不能起作用.原因是 移动端 对video标签的限制,许多video ...

  5. 关于video标签移动端开发遇到的问题，获取视频第一帧，全屏，自动播放，自适应等问题

    最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...

  6. 在微信端使用video标签，播放结束会出现QQ浏览器推荐视频的解决办法（vue）

    会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检 ...

  7. 如何禁止 iPhone Safari video标签视频自动全屏？

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...

  8. 【Egret】里使用video标签

    egret里使用Html5的Video标签 egret里使用Html5的Video标签的demo: 链接:http://pan.baidu.com/s/1nuNyqRR 密码:x58i //----- ...

  9. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

随机推荐

  1. iOS-swift-函数和闭包

    一.函数 关键字:func 参数列表用 , 分割 使用 -> 分割参数和返回值 func greet(person: String, day: String) -> String { re ...

  2. promise之nodejsQ的详细用法总结

    这里主要讲node.js中Q的各种用法及说明总结,不详细介绍promise及原理.关于promise介绍可以查看我的另一篇文章: https://www.cnblogs.com/yzeng/p/976 ...

  3. C# 字节数组和十六进制字符串之间转换的另类写法

    今天从http://www.cnblogs.com/NanaLich/archive/2012/05/24/2516860.html看到的,记录下来 主要是XmlSerializationReader ...

  4. P1576 最小花费

    题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...

  5. Form上传编译

    编译上传的Form,使用命令: 在R12服务器上: cd $AU_TOP/forms/US frmcmp_batch module=$CUX_TOP/forms/ZHS/XXX.fmbuserid=a ...

  6. [原创]Debian9 从零编译配置Redis4.0

    序言 Redis 一.准备工作 1.1 更新系统安装包列表 没啥,就他喵想用个最新的. # apt update 1.2 创建需要使用的目录 创建目录source和web,分别用来放源码和编译后的文件 ...

  7. python模块详解 time与date time

    模块的分类: a:标准库 内置模块 如sys,os等 b:开源模块 大神封装好的 直接可以拿来用的. c:自定义模块 自己封装的模块 Python中通常表示时间的方式有:时间戳.格式化的日期.元组(九 ...

  8. 【Troubleshooting 】Outlook 客户端无法显示电子邮件图像

    出于安全原因,Outlook 2013/2016不会在电子邮件中显示图像,但您可以右键单击图像并选择" 下载图片 "选项.我最近注意Outlook停止显示图像,并且没有下载图像的选 ...

  9. Spark master节点HA配置

    Spark master节点HA配置 1.介绍 Spark HA配置需要借助于Zookeeper实现,因此需要先搭建ZooKeeper集群. 2.配置 2.1 修改所有节点的spark-evn.sh文 ...

  10. 音乐代码 （DNF天空之城、欢乐颂）。

    太感人了 DNF天空之城 #include <cstdio> #include <windows.h> #define qdo 262 #define qre 294 #def ...