微信小程序--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="http://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="http://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 () {  },})

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