小程序：cover-view

代码Github地址

一. cover-view 能做什么?

• 在一些情况下，我们需要对map、video、canvas、camera这些微信小程序的原生控件，进行自定义，比如在camera上添加一个矩形线框作为拍照区域，这时我们就需要使用到cover-view这个控件。

• 在同一父容器中，要在原生控件上添加布局，只能用cover类的控件，因为原生控件的层级处于顶层，即使将非cover类的控件的z-index设置到10000，依然层级在原生控件之下，被覆盖。

• 在原生控件cover-view作为父容器时，不能使用其他控件嵌套作为子元素，只能使用cover类的控件，例如：cover-view、cover-image。

• 覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image。

• cover-view相当于是其他原生容器的拓展，是添加在其他原生容器里面的。相当于原生容器的一部分。

二. 代码展示

• wxml

<video class="video" id='myVideo' src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400">

  <cover-view class="controls">

    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/images/play.png"></cover-image>
    </cover-view>

    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/images/pause.png"></cover-image>
    </cover-view>

  </cover-view>

</video>

• wxss

.video {
  width: 100%;
  height: 200px;
}

.controls {
  position: relative;
  top: 100%;
  height: 50px;
  margin-top: -50px;
  display: flex;
  background-color: red;
  justify-content: space-around;
  align-items: center;
}

.img {
  width: 40px;
  height: 40px;
}

• js

Page({
  onReady: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play: function (event) {
    this.videoCtx.play()

    wx.showToast({
      title: '开始播放',
      icon: "none",
      duration: 1500
    })
  },
  pause: function (event) {
    this.videoCtx.pause()
    wx.showToast({
      title: '暂停播放',
      icon: "none",
      duration: 1500
    })
  }
})