微信小程序 覆盖组件cover-view

wxml

覆盖组件

<video src="../image/1.mp4" controls="{{false}}" event-model="bubble">

<cover-view class="controls">

<cover-view class="play" bind:tap="play">

<cover-image class="img" src="../image/2.jpg" />

</cover-view>

<cover-view class="pause" bind:tap="pause">

<cover-image class="img" src="../image/1.jpg" />

</cover-view>

<cover-view class="time">00:00

</cover-view>

</cover-view>

</video>

Page({
  data: {
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500,
    imgurls: ["../image/2.jpg", "../image/1.jpg", "../image/3.jpg", "../image/4.jpg", "../image/5.jpg"]
  },
  onReady() {
    this.videoCtx = wx.createVideoContext('myvideo')
  },
  play(){
    this.videoCtx.play()
  },
  pause(){
    this.videoCtx.pause()
  },

/* pages/test/test.wxss */
.controls {
  position: relative;
  top: 50px;
  height: 50px;
  margin-top: -25px;
  display: flex;
}

.play, .pause, .time {
  flex: 1;
  height: 100%;
}

.time {
  text-align:  center;
  background-color: rgb(0, 0, 5);
  color: white;
  line-height: 50px;
}

.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}