解决微信小程序视频组件层级过高的问题

Rocture 发布于2019-08-22 13:52 / 1385人阅读

摘要：本文首发于我的个人博客前言在微信小程序的开发中，总有一些组件，他们的层级，高得让人抓狂，总是凌驾于很多其他低层级组件之上。问题描述由于视频组件层级过高并且无法使用进行控制层级，导致许多人都无法在视频组件之上放置一些其他的组件。

本文首发于我的个人博客：http://www.fogcrane.org

前言

在微信小程序的开发中，总有一些“VIP”组件，他们的层级，高得让人抓狂，总是凌驾于很多其他低层级组件之上。
诸如：video组件、map组件、canvas组件等。现在就让我来讲讲如何巧妙的解决掉这个问题。

问题描述

由于视频组件层级过高并且无法使用z-index进行控制层级，导致许多人都无法在视频组件之上放置一些其他的组件。
为此，一些漂亮的视频设计往往还没开始就宣告了结束。上一张官方文档的相关说明：

解决方案

解决思路其实也挺简单的。今天就暂且不宣扬愚公移山的精神了，我们今天选择绕过眼前的大山。既然视频层级很高
很高，并且我们不能降低视频层级或者提升其他组件层级已覆盖视频组件。那么我们就选择只在恰当的时候才让视频
组件出现在我们的页面中。那么问题就显得简单起来了。思路大致如下：

在渲染页面的时候，使用假视频来代替视频组件，换言之就是使用视频封面充当一个视频组件。

当用户点击视频封面时，进行两步操作，第一，隐藏视频封面；第二，播放视频。

当存在同一页面多视频的时候，需要进行视频切换的处理。

接下来直接上代码了：
首先是wxml的代码：

接着是js的代码：

//index.js
Page({
  data: {
    curr_id: "",   //当前打开的视频id
    items: [
      {
        id: 1, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      }, {
        id: 2, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
      {
        id: 3, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
      {
        id: 4, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
    ],
  },
  onReady: function () {  //创建视频上下文对象
    this.videoContext = wx.createVideoContext("myVideo")
  },
  videoPlay(e) {
    this.setData({
      curr_id: e.currentTarget.dataset.id,
    })
    this.videoContext.play()
  }
})

最后是css的代码：

/*index.wxss*/
.video{
    margin-bottom: 40rpx;
    position: relative;
}
.model-img{
    width: 100%;
    height: 420rpx;
}
.model-btn{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
    width:100rpx;
    height:100rpx;
    border-radius:50%;
    background-color: rgba(0,0,0,.3);
}
.play-icon{
    margin:28rpx 42rpx;
    border-top:26rpx solid transparent;
    border-left:36rpx solid #fff;
    border-bottom:22rpx solid transparent;
}
.text{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: red;
  color: #fff;
  position: fixed;
  bottom: 0;
}

以上，就是全部代码了，附上运行结果图：

代码下载

自定义视频组件代码，密码为30s3

结语

好看的皮囊千篇一律，有趣的灵魂万里挑一。祝各位都是有趣的程序媛/猿。嗨起来٩(๑❛ᴗ❛๑)۶

GPU云服务器云服务器微信小程序组件微信小程序实时音视频不用编程制作微信小程序视频微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92564.html

解决微信小程序视频组件层级过高的问题

摘要：本文首发于我的个人博客前言在微信小程序的开发中，总有一些组件，他们的层级，高得让人抓狂，总是凌驾于很多其他低层级组件之上。问题描述由于视频组件层级过高并且无法使用进行控制层级，导致许多人都无法在视频组件之上放置一些其他的组件。本文首发于我的个人博客：http://www.fogcrane.org showImg(https://segmentfault.com/img/remote...

genefy 2019-08-01 18:24 评论0 收藏0
解决微信小程序视频组件层级过高的问题

摘要：本文首发于我的个人博客前言在微信小程序的开发中，总有一些组件，他们的层级，高得让人抓狂，总是凌驾于很多其他低层级组件之上。问题描述由于视频组件层级过高并且无法使用进行控制层级，导致许多人都无法在视频组件之上放置一些其他的组件。本文首发于我的个人博客：http://www.fogcrane.org showImg(https://segmentfault.com/img/remote...

HitenDev 2019-08-29 14:14 评论0 收藏0
关于微信小程序的视频的坑

摘要：需求背景最新在忙一个需求，就是小程序的课程详情的展示视频，如下图层级过高在小程序的官方文档的话是有介绍的目前解决的方案使用标签可以覆盖到原生组件中。需求背景：最新在忙一个需求，就是小程序的课程详情的展示视频，如下图 showImg(https://segmentfault.com/img/bVbkBlI?w=462&h=1034); video层级过高在小程序的官方文档的话是有介...

yimo 2019-08-23 13:54 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

Lowky 2019-08-30 11:07 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

elina 2019-08-02 15:15 评论0 收藏0