小程序圖片添加視頻播放按鈕圖標

先上效果圖：

 

這個不是真的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;
}