小程序视频轮播(小程序视频和图片一起轮播)

• html

<swiper style="width:100%;height:{{goodsImgH}}px;" class="goods-bar card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="{{autoplay}}" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
        <swiper-item wx:if="{{videoUrl.length > 0}}">
            <block>
                <!-- <view class="swiper-item"> -->
                <video style="width:100%;height: 100%" autoplay='' loop class="swiper-item"
                        bindplay='bindplay'
                        bindended="funended"
                        show-play-btn="{{true}}"
                        controls="{{true}}"
                        objectFit="cover"
                        loop='{{false}}'
                        show-mute-btn='{{true}}'
                        vslide-gesture-in-fullscreen='{{true}}'
                        src="{{videoUrl}}"></video>
                <!-- </view> -->
            </block>

        </swiper-item>
        <!--商品图片-->
        <swiper-item wx:for="{{goodsDetail.logo_images}}" wx:key="*this" class="{{cardCur==index?'cur':''}}">
            <view class="swiper-item">
                <image src="{{item.image_url}}" mode="widthFix" bindtap='goodsImgTap' data-item='{{item}}'></image>
            </view>
        </swiper-item>

        <!--活动套餐的图片-->
        <swiper-item wx:if="{{goodsDetail.image.length>0}}">
            <image src='{{goodsDetail.image}}' mode='widthFix' style="width:100%;height:{{goodsImgH}}px;"       class='banner-img-color' bindtap='goodsImgTap' data-item='{{item}}'></image>
        </swiper-item>
    </swiper>

• js

//开始播放按钮或者继续播放函数
    bindplay:function(){
        console.log("开始播放")
        this.setData({
            autoplay: false,
        })
    },

    funended: function () {//播放结束按钮函数
        console.log("播放结束")
        this.setData({
            autoplay: true,
        })
    },