微信小程序--cover-view

官方api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/cover-view.html

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。cover-image组件与image类似，但仅有一个src属性。

使用cover-view、cover-image，可以在原生的video组件上实现一个自定义的播放控件。已经支持实现的功能包括播放/暂停、全屏/退出全屏，显示播放进度/拖拽播放，设置播放倍速等。

下面我们使用cover-view组件实现播放、暂停的功能控件。
效果图如下，

这里我们只是实现了开始和暂停的播放，其他的属性自己玩吧，

1.index.xml中(我们在video上面覆盖了cover-view)：

<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  controls="{{false}}" event-model="bubble" objectFit="fill" >
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="https://img-blog.csdn.net/20171207143608413?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWZhbmJhYnk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" />
    cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="https://img-blog.csdn.net/20171207143638479?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWZhbmJhYnk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" />
    cover-view>
  cover-view>
video>

2.index.wxss中：

.controls {
  position: relative;
  top: 50%;
  height: 80px;
  margin-top: 40px;
  margin-left: 80px;
  display: flex;
}

.play, .pause {
  flex: 1;
  height: 100%;
  text-align: center;
  line-height: 50px;
}

.img {
  width: 20px;
  height: 20px;
  margin-top: 40px;
}

3.index.js中：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {

  },
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play() {
    this.videoCtx.play()
    console.log("开始播放");
  },
  pause() {
    this.videoCtx.pause()
    console.log("暂停播放");
  },


  onLoad: function () {

  },
})

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！