小程序图片添加视频播放按钮图标

先上效果图：

 

这个不是真的video组件，这是图片上定位了一个css元素而已，上wxss代码：

        <view class="item-img">
          <image wx:if="{{item.coverUrl}}" src="{{img_full_path + item.coverUrl}}" style="width:100%;height:100%;"></image>
          <view class="circle">
            <view class="circle_inner_play">
            </view>
          </view>
          <view class="duration">{{util.secondToTimeStr(item.duration)}}</view> 
        </view>

 

父级view样式：

.item .item-img{
  height: 388rpx;
  position: relative;
}

现在定位一个圆圈居中显示

.circle {
  border-radius: 50px;
  height: 50px;
  position: absolute;
  width: 50px;
  z-index: 9998;
  color: #fff;
  background: #000;
  opacity: 0.6;
  left: 50%;
  margin-left: -50rpx;
  text-align: center;
  margin-top: -230rpx;
}

现在再画一个小三角：

.circle_inner_play {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -7px;
}