背景描述：

 1、產品需要banner類似京東app詳情頁中banner，第一個swiper-item為視訊，後面的swiper-item為圖片。

2、video元件是由客戶端建立的原生元件，它的層級是最高的，不能通過 z-index 控制層級。微信官方已經說明video元件層級最高，並且不能通過z-index來控制

 3、設定第一張圖片為視訊的佔位圖片，當點選圖片時，將當前佔位圖片隱藏，顯示視訊播放器；並新增一個純黑和banner寬高一樣的圖層，絕對定位，用來放左右切換按鈕，控制banner左右滑動

wxml程式碼：

<view class='banner-wrapper'>
      <swiper indicator-dots indicator-color="{{indicator}}" current="{{current}}" indicator-active-color="{{activeIndicator}}" class="bn-swiper" bindchange="bannerChage" duration="300">
        <block wx:for="{{storeImgs}}" wx:key="bn_urls">
          <swiper-item>
            <block wx:if="{{item.type == 1}}">
              <view wx:if="{{isPlay}}" class='video-wrapper'>
                <video src="{{item.src}}" class='video' controls id='myVideo'></video>
              </view>
              <view wx:else class='video-host-wrapper' catchtap='play'>
                <image src="{{storeImgs[1].src}}" mode='aspectFill' />
                <image src='/images/play.png' class='play-icon'></image>
              </view>
            </block>
            <image src="{{item.src}}" mode='aspectFill' catchtap='preview' data-url="{{item.src}}" wx:else/>
          </swiper-item>
        </block>
      </swiper>
      <view class='banner-mask' wx:if="{{isPlay}}">
        <image src='/images/arrow.png' class='prev' catchtap='goPrev'></image>
        <image src='/images/arrow.png' class='next' catchtap='goNext'></image>
      </view>

js程式碼：

data：{
storeImgs: [],//banner
    current:0,//banner當前的index
}

效果：