movable和cover-view的使用

wxml代码，实现在一个框中可以任意拖动

<view>movabale操作</view>
<movable-area class="area">
    <movable-view direction="all" out-of-bounds scale class="view">
      <image src="https://p1.pstatp.com/large/tos-cn-p-0026/d63ce0b8b776b1cd00c99b4429c99099"></image>
    </movable-view>
</movable-area>

wxss代码

.area{
  width: 100%;
  height: 400rpx;
  background-color: #cad3eb;
}
.view{
  width: 80%;
  height: 80%;
  background: green;
}
image{
  width: 100%;
  height: 100%;
}

cover-view，把暂停和播放放在视频上，用if,else判断是否显示

<view>cover-view</view>
<video id="myVideo" src="https://www.ixigua.com/pseries/6805526541968081416_6806664909175128588/?logTag=yhyk6dfYGYw7vcgKPwsuI">

<cover-view wx:if="{{playing}}" class="pause" bindtap="pause">
    <cover-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2165309720,733242852&fm=26&gp=0.jpg" class="img"></cover-image>
</cover-view>

<cover-view wx:else class="play" bindtap="play">
    <cover-image src="http://img3.imgtn.bdimg.com/it/u=1867343284,1933910531&fm=26&gp=0.jpg" class="img"></cover-image>
</cover-view>

</video>

js代码
获取id,来进行播放，改变playing的ture或false,显示图标

onReady: function () {
    this.videoCtx = wx.createVideoContext("myVideo")
  },

pause: function () {
    this.videoCtx.pause()
    this.setData({
      playing: false
    })
  },

  play: function () {
    this.videoCtx.paly();
    this.setData({
      playing: true
    })
  },