踩坑之路——微信小程序video原生组件层级过高解决方案

成品：

 

可以看到成品其实不是完全解决了问题，如果有更好的方法可以告知一下我，谢谢。

思路很简单，让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
      });
    },
  }
})