微信小程序在轮播图中video实现视频播放功能

我们先来看一下效果吧

 

 

接下来我们来看一下代码结构

wxml

<!-- 轮播图 S -->
    <swiper class="detail-banner" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" style="background: white;">
      <swiper-item wx:for="{{banner_list}}" wx:key="index">
        <view class='videocover' data-id="{{index}}" bindtap='playbtn' wx:if="{{item.type==1}}">
          <view class='videocoverbg'></view>
          <image src='../../../img/icon/icon-play.png' class='playbtn' bindtap="videoPlay" hidden="{{controls}}"></image>
          <!-- <image src='../../../img/icon/icon-pause.png' class='playbtn' bindtap="videoPause"></image> -->
        </view>

        <view wx:if="{{item.type==1}}">
          <video class='box-w block' id="video" src="{{item.video}}" show-center-play-btn="{{false}}" autoplay='{{index === currentId ? true:false}}' objectFit="cover" bindended="jieshu" controls="{{controls}}"></video>
        </view>
        
        <image class="detail-banner-img" src="{{item.url}}" bindtap="previewImage" src="{{item.url}}" wx:if="{{item.type==0}}"></image>
      </swiper-item>
    </swiper>
    <!-- 轮播图 E -->

wxss

/* 轮播图 */

.detail-banner {
  width: 100%;
  height: 700rpx;
  padding: 0 0 40rpx 0;
}

.detail-banner-img {
  width: 100%;
  height: 100%;
}
/* video */

.box-w {
  width: 100%;
  height: 700rpx;
}

.videocover {
  width: 100%;
  overflow: hidden;
}

.videocoverbg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.playbtn {
  position: absolute;
  top: 50%;
  z-index: 2;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
}

.videocover .cover {
  width: 100%;
}

.ico-share {
  width: 18px;
  height: 18px;
  display: block;
}

主要部分

js

data: {
    // banner 轮播图 
    banner_list: [
      { type: 1, video: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", img: "../../../img/shangpin.jpg" },
      { type: 0, url: "../../../img/shangpin.jpg" },
      { type: 0, url: "../../../img/shangpin.jpg" },
      { type: 0, url: "../../../img/shangpin.jpg" },
      { type: 0, url: "../../../img/shangpin.jpg" }
    ],
    indicatorDots: true,
    autoplay: false, // 自动播放
    interval: 5000, //轮播时间
    duration: 300, // 滑动速度越大越慢
    circular: true, //是否循环
    beforeColor: "lightgray", //指示点颜色
    afterColor: "red", //当前选中的指示点颜色
    // 轮播数据 + 效果 E
    controls: false,
},
//预览图片
  previewImage: function(e) {
    console.log(e.target.dataset.src)
    var current = e.target.dataset.src;

    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: this.data.banner_list
      // urls: this.data.imgUrls // 需要预览的图片http链接列表  
    })
  },
// 播放
  videoPlay: function() {
    console.log("开始播放")
    var videoplay = wx.createVideoContext("video");
    videoplay.play()
    this.setData({
      controls: true,
    })
  },

以上就是所有代码,很简单,如果对你有用,点个赞关注支持一下,谢谢