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

> 本文首发于我的个人博客:<http://www.fogcrane.org&gt;

海豚图片

前言

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

问题描述

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

解决方案

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

  • 在渲染页面的时候,使用假视频来代替视频组件,换言之就是使用视频封面充当一个视频组件。
  • 当用户点击视频封面时,进行两步操作,第一,隐藏视频封面;第二,播放视频。
  • 当存在同一页面多视频的时候,需要进行视频切换的处理。

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

&lt;!--index.wxml--&gt;
&lt;view&gt;
  &lt;view class=&quot;margin_bottom--100&quot; wx:for=&quot;{{items}}&quot; wx:key=&quot;unique&quot;&gt;
    &lt;view class=&quot;video-container&quot;&gt;
        &lt;view  class=&quot;video&quot; data-id=&quot;{{item.id}}&quot; bindtap=&quot;videoPlay&quot; &gt;
          &lt;video wx:if=&quot;{{curr_id == item.id}}&quot; id=&quot;myVideo&quot; style=&quot;width: 750rpx;height: calc(9 * 750rpx / 16);&quot; id=&quot;myVideo&quot; old-src=&quot;{{item.old-src}}&quot;
          poster=&quot;{{item.poster}}&quot;  objectFit=&quot;cover&quot;  controls&gt;&lt;/video&gt;
          &lt;view wx:else &gt;
              &lt;image class=&quot;model-img&quot; style=&quot;width: 750rpx;height: calc(9 * 750rpx / 16);&quot; mode=&quot;aspectFill&quot; old-src=&quot;{{item.poster}}&quot;&gt;&lt;/image&gt;
              &lt;view class=&quot;model-btn&quot;&gt;
                      &lt;view class=&quot;play-icon&quot;&gt;&lt;/view&gt;
                &lt;/view&gt;
          &lt;/view&gt;
        &lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
  &lt;view class=&quot;text&quot;&gt;
    &lt;text&gt;我是遮挡层。&lt;/text&gt;
  &lt;/view&gt;
&lt;/view&gt;

接着是js的代码:

//index.js
Page({
  data: {
    curr_id: '',   //当前打开的视频id
    items: [
      {
        id: 1, old-src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&amp;bizid=1023&amp;hy=SH&amp;fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg'
      }, {
        id: 2, old-src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&amp;bizid=1023&amp;hy=SH&amp;fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg'
      },
      {
        id: 3, old-src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&amp;bizid=1023&amp;hy=SH&amp;fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg'
      },
      {
        id: 4, old-src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&amp;bizid=1023&amp;hy=SH&amp;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

结语

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

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。