成品：

可以看到成品其實不是完全解決了問題，如果有更好的方法可以告知一下我，謝謝。

思路很簡單，讓video元件在不播放的時候隱藏，讓替代品view呈現，當點選view時，讓video顯示出來。

我寫了一個小元件供大家參考：

wxml

<view class='view' style='{{style}};' bindtap='showVideo' hidden='{{showVideo}}'></view>
<video class='video' id='video' style='{{style}};' src='{{src}}' hidden='{{!showVideo}}' bindpause='hideView' bindended='hideView'></video>
 

wxss

.view{
	background-color: #000;
	vertical-align: top;
	background-image: url('http://3n4w.oss-cn-shenzhen.aliyuncs.com/public/marker/aicard/wx/component/play.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60rpx;
	margin: 10rpx 0;
}
.video{
	vertical-align: top;
}

js

// component/iview.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    style: {
      type: String,
      value: 'width:100%;height:450rpx;',
    },
    src: {
      type: String,
      value: '',
    },
    showVideo: {
      type: Boolean,
      value: false,
    },
  },
  lifetimes: {
    ready: function() {
      this.video = wx.createVideoContext('video', this)
    },
  },
  /**
   * 元件的初始資料
   */
  data: {

  },

  /**
   * 元件的方法列表
   */
  methods: {
    showVideo: function(e) {
      this.setData({
        showVideo: true
      });
      this.video.play();
    },
    hideView: function() {
      this.setData({
        showVideo: false
      });
    },
  }
})