精华内容
下载资源
问答
  • // 以前总有面试官问这样一个问题:“你在项目中遇到最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意。 // 最近遇到微信端的这个问题,非常让人头疼,...

    // 为什么叫《大事记》?

    // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?”

    // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意。

    // 最近遇到微信端的这个问题,非常让人头疼,正好有小伙伴和我聊到面试经验,灵机一动,《大事记》由此而生

     

    问题描述:

    在安卓系统的微信浏览器里面,<video> 标签触发了 play() 事件,即开始播放之后

    <video> 标签的层级会变成 MAX 级别,无论如何设置 z-index,都会遮挡别的脱离文档流的元素

     

     

    分析原因:

    微信的 X5 内核为了统一 <video> 在不同的手机上的呈现形式,对 <video> 进行了改造

    这样的改造在 IOS 系统上一切正常,但在安卓系统就会有各种问题,比如这里的层级太高

     

     

    解决方案:

    当测试的同事将这个 bug 提给我的时候,我根本没想到,我即将面对一场苦不堪言的角斗

     

    第一回合:隐藏 video

    最初暴露的问题并不是页面底部的按钮,而是一个弹窗

    在了解了问题的原因之后,我当时的思路是:

    打开弹窗的时候,将 <video> 标签隐藏掉,关闭弹窗的时候再显示 <video>

    隐藏标签的方法有很多:display:none;   visibility: hidden;  z-index: -1;   left: -9999px;  opacity: 0;

    但 display:none 没有占位,visibility 和 z-index 不起作用,opacity 虽然不显示元素,但依旧点不到下面的元素

    所以只有用定位的办法了

      let tag = document.createElement('style')
      tag.id = id
      tag.innerHTML = `video { position: relative; left: -9999; }`
      body.appendChild(tag)

    在打开弹窗的时候,通过上面的代码添加一个带有特殊 id 的 <style> 标签,然后在关闭时候根据 id 删除节点

    为了防止多级弹窗的时候重复创建 <style>,在方法前面需要验证是否存在该 id

    想通了这一系列逻辑之后,我猛然发现,页面底部的按钮也会被遮挡!

     

    第二回合:跳转到单独页面播放

    深思熟虑之后,我得出结论:遮挡问题无解

    但问题还是要解决,于是我向 PM 提出,单独写一个播放页面,点击 <video> 的时候跳转到这个页面进行播放

    经过一番唇枪舌剑的交锋,PM 妥协了,但要求尽量优化体验,打开的播放页看起来要像全屏播放一样

    “这都不是事儿!” 我如是回道

     

    播放页面确实不是事儿,可 <video> 真不是省油的灯

    我原本想的是,全局添加一个 addEventListener('click'),如果点击的是 <video> 标签,就保存视频信息,并跳转到播放页面

    document.addEventListener('click', (e) => {
      let target = e.target
      if (target.nodeName.toUpperCase() === 'VIDEO') {
          this.setVideoUrl({
            url: target.src,
            poster: target.poster
        })
        this.$router.push(`/video`)
      }
    })

    这下跳转是没问题了,但在点击的时候,实际上还触发了 <video> 的 play() 事件

    从理论上来说,已经跳转页面了,这个 play() 事件并不需要阻止,但为了逻辑严谨,我还是做了尝试

    e.preventdefault()
    e.stopPropagation()
    e.cancelBubble()
    return false

    然而这并不能阻止播放事件 play()

    那就不阻止了

    然后又了新的 Bug:部分机型从播放返回之后,<video> 是播放的状态,而且有层级问题

     

    第三回合:禁用 controls

    我重新回到那个问题:如何阻止播放事件?

    稍作挣扎,我就换了一个思路:如果没有播放按钮,那就不需要阻止播放事件了

    于是我给 <video> 添加了 controls=""

    这样就没有播放工具栏,之后只需要手动添加一个三角形的播放图标,一切就完美了

     

    页面上的 <video> 是作为描述内容的一部分,包含在一段富文本里面,从后端返回的

    这样一来,<video> 相关的 DOM 节点只能通过 JS 修改,成本太高,所以我打算只用 CSS 来解决播放图标的问题

     

    然后我画了一个播放的图标,给 <video> 添加了一个伪元素 :before,在伪元素里写好了样式,但毫无作用

    原来 <video> 并不支持伪元素

    “如果无法解决问题,那就让问题不存在”

    我脑海中闪过这段话,然后有了新的方案:

    我又画了一张图,然后将 <video> 的 poster 改成了这张图,问题解决了!

    然后产品小姐姐跑过来:你对我的视频封面图做了什么?

     

    决战:js 王道

    既然 poster 不能改,那就只有通过 js 去操作 DOM,给 <video> 添加一个兄弟节点 <i class="video-play_btn"> 作为播放按钮

    然后将 <video> 和播放按钮一起包在一个容器 <div class="video-wrapper"> 中

    setVideoWrapper () {
      this.$nextTick(() => {
        let v = document.getElementsByTagName('video')
        if (v && v[0]) {
          // 产品规定 页面中只会有一个 <video>
          let target = v[0]
          // 防止重复创建 wrapper 
          if (target.parentNode.className === 'video-wrapper') return
          // 清除 <video> 播放工具栏
          target.controls = ''
          target.className = 'video-hack'
          // 创建播放按钮
          let btn = document.createElement('i')
          btn.className = 'video-play_btn'
          // 创建容器
          let wrap = document.createElement('div')
          wrap.className = 'video-wrapper'
          wrap.appendChild(btn)
          wrap.appendChild(target.cloneNode())
          // 插入容器并删除原本的 <video>
          target.parentNode.insertBefore(wrap, target)
          target.parentNode.removeChild(target)
        }
      })
    }

    再添加对应的 LESS 样式:

    .video {
      &-wrapper {
        position: relative;
        font-size: 0;
      }
      &-play {
        &_btn {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, .1) url('img/url') center/80px 80px no-repeat;
        }
      }
    }

    终于,<video> 的问题彻底解决了,皆大欢喜,普天同庆

    但我还是要吐槽一下,微信 <video> 的问题由来已久,开发团队也曾经说过要解决,但最后都不了了之

    这大约都是时辰的错

    转载于:https://www.cnblogs.com/wisewrong/p/10276947.html

    展开全文
  • H5页面视频播放后video标签层级变为最高遮盖其他元素 Android微信内置浏览器是X5内核,X5内核中默认了video的层级是最高级别,H5页面播放完视频后,video标签的层级会变成最高,遮盖其他所有元素 解决: 添加 x5-video-...

    H5页面视频播放后video标签层级变为最高遮盖其他元素

    Android微信内置浏览器是X5内核,X5内核中默认了video的层级是最高级别,H5页面播放完视频后,video标签的层级会变成最高,遮盖其他所有元素
    解决:
    添加 x5-video-player-type='h5-page'属性就行

    <video x5-video-player-type='h5-page' :src="item"></video>
    

    问题解决!

    展开全文
  • css// 之前总有面试官问这样一个问题:“你在项目中遇到最头疼的问题是什么,是怎么解决的?”node// 当时总以为,已解决的问题都算不上头疼,因此回答老是不尽人意。web// 最近遇到微信端的这个问题,很是让人...

    // 为何叫《大事记》?css

    // 之前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?”node

    // 当时总以为,已解决的问题都算不上头疼,因此回答老是不尽人意。web

    // 最近遇到微信端的这个问题,很是让人头疼,正好有小伙伴和我聊到面试经验,灵机一动,《大事记》由此而生面试

    问题描述:后端

    在安卓系统的微信浏览器里面, 标签触发了 play() 事件,即开始播放以后浏览器

    标签的层级会变成 MAX 级别,不管如何设置 z-index,都会遮挡别的脱离文档流的元素微信

    a27e8bbc8f91c4664bc263e7d2b1332e.png

    分析缘由:app

    微信的 X5 内核为了统一 在不一样的手机上的呈现形式,对 进行了改造ide

    这样的改造在 IOS 系统上一切正常,但在安卓系统就会有各类问题,好比这里的层级过高工具

    解决方案:

    当测试的同事将这个 bug 提给个人时候,我根本没想到,我即将面对一场苦不堪言的角斗

    第一回合:隐藏 video

    最初暴露的问题并非页面底部的按钮,而是一个弹窗

    在了解了问题的缘由以后,我当时的思路是:

    打开弹窗的时候,将 标签隐藏掉,关闭弹窗的时候再显示

    隐藏标签的方法有不少:display:none;   visibility: hidden;  z-index: -1;   left: -9999px;  opacity: 0;

    但 display:none 没有占位,visibility 和 z-index 不起做用,opacity 虽然不显示元素,但依旧点不到下面的元素

    因此只有用定位的办法了

    let tag = document.createElement('style')

    tag.id=id

    tag.innerHTML= `video { position: relative; left: -9999; }`

    body.appendChild(tag)

    在打开弹窗的时候,经过上面的代码添加一个带有特殊 id 的

    为了防止多级弹窗的时候重复建立

    想通了这一系列逻辑以后,我猛然发现,页面底部的按钮也会被遮挡!

    第二回合:跳转到单独页面播放

    深思熟虑以后,我得出结论:遮挡问题无解

    但问题仍是要解决,因而我向 PM 提出,单独写一个播放页面,点击 的时候跳转到这个页面进行播放

    通过一番唇枪舌剑的交锋,PM 妥协了,但要求尽可能优化体验,打开的播放页看起来要像全屏播放同样

    “这都不是事儿!” 我如是回道

    播放页面确实不是事儿,可 真不是省油的灯

    我本来想的是,全局添加一个 addEventListener('click'),若是点击的是 标签,就保存视频信息,并跳转到播放页面

    document.addEventListener('click', (e) =>{

    let target=e.targetif (target.nodeName.toUpperCase() === 'VIDEO') {this.setVideoUrl({

    url: target.src,

    poster: target.poster

    })this.$router.push(`/video`)

    }

    })

    这下跳转是没问题了,但在点击的时候,实际上还触发了 的 play() 事件

    从理论上来讲,已经跳转页面了,这个 play() 事件并不须要阻止,但为了逻辑严谨,我仍是作了尝试

    e.preventdefault()

    e.stopPropagation()

    e.cancelBubble()return false

    然而这并不能阻止播放事件 play()

    那就不阻止了

    而后又了新的 Bug:部分机型从播放返回以后, 是播放的状态,并且有层级问题

    第三回合:禁用 controls

    我从新回到那个问题:如何阻止播放事件?

    稍做挣扎,我就换了一个思路:若是没有播放按钮,那就不须要阻止播放事件了

    因而我给 添加了 controls=""

    这样就没有播放工具栏,以后只须要手动添加一个三角形的播放图标,一切就完美了

    页面上的 是做为描述内容的一部分,包含在一段富文本里面,从后端返回的

    这样一来, 相关的 DOM 节点只能经过 JS 修改,成本过高,因此我打算只用 CSS 来解决播放图标的问题

    而后我画了一个播放的图标,给 添加了一个伪元素 :before,在伪元素里写好了样式,但毫无做用

    原来 并不支持伪元素

    “若是没法解决问题,那就让问题不存在”

    我脑海中闪过这段话,而后有了新的方案:

    e8bd8468552841268bd4676ea1d59de6-2.png

    我又画了一张图,而后将 的 poster 改为了这张图,问题解决了!

    而后产品小姐姐跑过来:你对个人视频封面图作了什么?

    决战:js 王道

    既然 poster 不能改,那就只有经过 js 去操做 DOM,给 添加一个兄弟节点 做为播放按钮

    而后将 和播放按钮一块儿包在一个容器

    setVideoWrapper () {this.$nextTick(() =>{

    let v= document.getElementsByTagName('video')if (v && v[0]) {//产品规定 页面中只会有一个

    let target = v[0]//防止重复建立 wrapper

    if (target.parentNode.className === 'video-wrapper') return

    //清除 播放工具栏

    target.controls = ''target.className= 'video-hack'

    //建立播放按钮

    let btn = document.createElement('i')

    btn.className= 'video-play_btn'

    //建立容器

    let wrap = document.createElement('div')

    wrap.className= 'video-wrapper'wrap.appendChild(btn)

    wrap.appendChild(target.cloneNode())//插入容器并删除本来的

    target.parentNode.insertBefore(wrap, target)

    target.parentNode.removeChild(target)

    }

    })

    }

    再添加对应的 LESS 样式:

    .video{&-wrapper {

    position:relative;font-size:0;

    }&-play{&_btn {

    position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, .1) url('img/url') center/80px 80px no-repeat;

    }}

    }

    终于, 的问题完全解决了,皆大欢喜,普天同庆

    但我仍是要吐槽一下,微信 的问题由来已久,开发团队也曾经说过要解决,但最后都不了了之

    这大约都是时辰的错

    展开全文
  • 微信小程序video组件层级过高问题

    千次阅读 2019-07-08 15:51:18
    微信小程序video组件层级过高问题 微信小程序新手,在实际的项目开发者遇到video组件层级过高的官方bug,始终浮在元素的最上层,弹窗会被视频覆盖,几经摸索,找到以下解决方案(项目不得不向bug妥协) 1.让用户更新到新版...

    微信小程序video组件层级过高问题

    微信小程序新手,在实际的项目开发者遇到video组件层级过高的官方bug,始终浮在元素的最上层,弹窗会被视频覆盖,几经摸索,找到以下解决方案(项目不得不向bug妥协)

    1.让用户更新到新版微信客户端,7.0.4微信客户端已修复该问题
    2.使用cover-view组件作为弹窗容器(wxss支持不全,很多样式不能使用)
    3.改变视图位置,当弹窗弹起时,改变scroll,使video组件滚动至可视区域外,关闭时恢复至原位
    4.打开弹窗时,把video组件宽高设置为0,并用图片替代视频原有位置,关闭弹窗时恢复

    展开全文
  • uni-app/微信小程序video组件层级过高覆盖悬浮按钮: 一、出现的概率与场景 具有偶然性,即概率性出现,也针对一些手机,尤其在ios版本的一些手机上! 二、分析: 大体分析说明: 一般的解决方法是采用原生...
  • video元素层级过高(微信页面开发)

    千次阅读 2019-12-05 16:04:23
    且修改双方的层级z-index都不起作用(安卓出现该现象,video元素在最上层,iOS显示正常)。 video元素在为播放之前,和普通元素一样,z-index是生效的。但是在播放之后,这个元素就改变了,不在是页面的元素,而是...
  • 视频标签在uc浏览器、钉钉中点击播放后都会出现层级问题, 请问该怎么解决 ps:微信、qq并无问题 <video src="url" poster="./images/pc_vv.png" controls >您的设备不支持 video 标签
  • 标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话。发现部分机型(华为P40 pro,oppo reno,iphone7p)上点击播放视频后,视频自动全屏播放,页面其他元素无法显示。探索良久,找出如下解决...
  • 这是在微信中正常页面,就是用了一个原生video标签没做任何处理。然后顶部是固定页面顶端的,这个时候向上滑动页面时,会出现下图现象 这个时候正常人都会想到z-index问题,我也是这样想的,可惜很抱歉的告诉...
  • 我做了个微信小程序,在用video组件时,发现我的悬浮按钮被video遮挡了,我用了网上的办法说设置z-index,这样之后再电脑的模拟机上是没问题的,但是在真机上还是被遮挡了,请教大神们这种该怎么解决啊 模拟机:!...
  • video在移动端遇到,点击导航栏,视频把导航给遮挡住了,差了好多文档。最后终于解决了 百度一堆都是说加x5-...video class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="true" webkit...
  • uniapp的video层级过高引起的页面展示问题 uniapp的原生组件层级过高,从而一直有黑块悬浮在页面表面,造成页面不美观。 在处理这个问题,我使用了两种方法,一是用处理播放按钮,删除按钮被黑块挡在下面的问题。 &...
  • video层级高于其他标签 目前百度小程序开发版本号 3.20.2 出现原生 video视频播放器层级高于其他标签,目前我们业务场景需要在video视频播放标签之上覆盖聊天记录,因此使用cover-view标签,遇到无法覆盖问题 预期...
  • 移动端video点开后层级过高问题

    千次阅读 热门讨论 2019-08-13 10:13:11
    我初步分析是由于不同厂商和游览器内核版本等不同导致的标签解析和渲染问题。我仅仅以我的两个手机进行解答。 首先我得机型分别是nubia z11 android 6.0.1 和 huawei nova 3 android 9.0 测试时间 2019.8.13 两款...
  • 小程序video组件层级如何解决

    千次阅读 2019-01-08 10:03:13
    小程序video组件层级如何解决 小程序首页用了一个video组件,然后modal组件的悬浮窗就被这个video覆盖了,因为原生组件的层级,用z-index是没有办法解决的。 以下是我刚开始写的代码,不管怎么设置z-index...
  • 众所周知,video标签兼容性是真的差,...小屏播放,video层级过高,视频播放的时候其他HTML被覆盖 <video controls style="object-fit:fill;width: 100%;height: 3.5rem;" class="videosrc" ref="videoPla...
  • 浅谈uniapp video层级过高的解决方法

    万次阅读 2019-11-07 16:20:42
    onShow(){ // #ifdef APP-PLUS ...如果只做小程序,h5则使用cover-view就能快速的解决video等原生组件层级过高的问题(cover-view不支持固定定位) 反之,需要考虑多端的使用plus.nativeObj也是一种方法
  • uniapp中解决map、video、canvas层级过高问题

    万次阅读 多人点赞 2020-03-16 19:38:59
    前段时间做项目遇到这样一个情景,用户点击生成海报,海报弹出来覆盖了下方固定定位的按钮,因为canvas原生组件默认为层级最高。
  • 但是性能和体验方面不如方案1,而方案二的话没有测,但是个人猜想只是能修改层级,但是滑动的时候video组件渲染问题感觉还是会有。 因为本人在视频上方还有一些按钮,然后导航也是自定义导航,所以如果采用方案二...
  • uniapp 微信小程序使用cover-image cover-view解决video层级过高的问题(真机模式也可也以) 最近做项目有个需求,在页面中加入MP4格式的动画。用uniapp原生组件引入视频,遇到3个问题,搞了很久。 1.首先是引入...
  • 解决video层级过高,有两种方法 1.使用subNvue subNvue,是 vue 页面的原生子窗体,把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供...
  • 完美解决移动端video视频层级问题

    万次阅读 2019-06-14 15:40:29
    H5页面视频播放的问题相信曾经让很多同学崩溃,video标签层级问题始终无法得到完美的解决方案。 这次的需求是这样的:在浏览器中扫码打开一个H5页面,要将一个视频当成背景图片来播放(gif太大,所以不用) 通过...
  • 在小程序用应用视频地图等组件时会发现由于这些组件层级过高会覆盖到我们的导航栏!即使我们设置了定位给z-index 9999, 但是在真机测试时依然会失效!那么就要用到组件盖视图 &lt;video src=""&...
  • 全屏video会在最上层,这个时候设置定位或者z-index都是无效的,按照有些博客中的z-index设置成2147483647也没用,x5-video-player-type="h5"也没用,于是决定重写控制条。 经过分析,简单的重写控制条的话,有这么...
  • 移动端video层级问题

    万次阅读 2018-03-21 14:20:16
    移动端video标签层级问题,与video标签同级的元素无法盖住video标签,可以给video标签加个父元素让video标签的父元素的同级元素盖在video父元素上可以解决video标签上无法放内容的问题。可以在video上层加一些例如弹...
  • 通常我们使用video标签的时候,video因为是系统原生组件层级最高,导致我们无法将自己写的弹窗等盖在video标签上。 微信里可通过以下方案解决:腾讯用的基本都是x5内核,所以在腾讯系的app webview里使用该方法 都能...
  • 解决方案一:使用微信小程序提供的cover-view组件。 解决方案二:设置video的z-index为1,然后设置弹窗z-index为99999,即可在视频上方弹出弹窗。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,214
精华内容 1,685
关键字:

video标签层级过高