微信小程序 覆盖组件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;
}