微信小程序-实现视频和图片轮播

前言

做一个类似电商的平台，有一个页面要仿淘宝实现：视频和图片既可以滑动轮播也可以点击轮播。

一、思路

需求：一开始把问题想得很简单，只要把视频放在swiper组件的第一个swiper-item中就可以了。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--wxml-->
<swiper class='swiper' duration="{{duration}}">
  <swiper-item class="swiper-item">
    <video id="myVideo" src="{{mdc_video}}" controls objectFit="contain">
    </video>
  </swiper-item>
  <block wx:for="{{background}}" wx:key="*this" wx:for-index="index">
    <swiper-item class="swiper-item">
      <image mode="aspectFit" src='{{item}}' class='swiper-item-img'></image>
    </swiper-item>
  </block>
</swiper>

<!--wxss-->
.swiper{
  width: 100%;
  height: 750rpx;
  background: #000;
}
.swiper-item,video,image{
  width: 100%;
  height: 100%;
}

<!--js-->
Page({
  data: {
    //swiper参数
    indicatorDots: false,
    vertical: false,
    autoplay: false,
    duration: 500,
    //视频地址
    mdc_video: 'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
    //图片数组
    background: ['https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=0df5aa7401d79123ffe092749d355917/48540923dd54564e552d1e45bede9c82d1584f06.jpg', 'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=9eca3f36fb246b60640eb474dbf91a35/b90e7bec54e736d10feded6d96504fc2d46269dc.jpg', 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=504c7d57bd51f819ee25054aeab54a76/d6ca7bcb0a46f21fd757a52ffb246b600c33ae6f.jpg'],
  }
})

发现问题：

在微信开发者工具上面显示是正常的，但是在真机上测试的时候才发现，当滑动到图片时，视频会有部分浮在页面上。显然，这是不合理的。

解决问题：

在网上查询了相关内容，终于在文章最后的博客（参考链接）中找到了解决方法。思路：既然直接轮播视频行不通，那么先将视频隐藏然后放一张图片和一个播放按钮来轮播。当点击视频时，图片和按钮隐藏，在视频上增加一个“退出视频”的按钮。要这个按钮的作用是：隐藏视频，让封面和按钮显示。也就是当视频播放的时候，视频不能轮播的，当我们左右滑动的时候，改变的只有视频的进度条。而退出视频之后，视频隐藏了，显示的也是一张图片了，滑动轮播就没有什么问题了。

二、代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!--wxml-->
<!-- 视频、图片 -->
<view class='media-container'>
  <swiper class='swiper' current="{{currentTab}}" duration="{{duration}}" bindchange="swiperChange">
    <swiper-item class="swiper-item">
      <view class='ceng'>
        <image class='temp-poster' mode="aspectFit" src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}" />
        <view class="temp-play" bindtap="play" wx:if="{{isShow}}">
          <image class="temp-img" src="../img/play.png" />
        </view>
        <video id="myVideo" src="{{mdc_video}}" controls hidden="{{isShow}}" objectFit="contain" bindfullscreenchange="fullscreenChange" bindended="videoEnd" bindtouchmove="mdc_move1">
          <cover-view class='mdc_return' bindtap='returnquanping' hidden="{{!isFullScreen}}">退出视频</cover-view>
        </video>
      </view>
    </swiper-item>
    <block wx:for="{{background}}" wx:key="*this" wx:for-index="index">
      <swiper-item class="swiper-item">
        <image mode="aspectFit" src='{{item}}' class='swiper-item-img'></image>
      </swiper-item>
    </block>
  </swiper>
  <!--  实现点击选中样式  -->
  <view class="dots" hidden="{{swiperCurrent == 0}}">
    <block wx:for="{{background}}" wx:for-index="index" wx:key="*this">
      <view wx:if="{{index+1 == swiperCurrent}}">
        <text>{{index + 1}}</text>/
        <text>{{background.length}}</text>
      </view>
    </block>
  </view>
  <view class="media-tab">
    <view wx:if="{{swiperCurrent == 0}}">
      <view class="media-item meidaActive" data-current="0" bindtap="tabNav">
        <view class='arrow arrow-white'></view>
        <view class='media-name'>视频</view>
      </view>
      <view class="media-item" data-current="1" bindtap="tabNav">
        <view class='media-name'>图片</view>
      </view>
    </view>
    <view wx:else>
      <view class="media-item" data-current="0" bindtap="tabNav">
        <view class='arrow arrow-black'></view>
        <view class='media-name'>视频</view>
      </view>
      <view class="media-item meidaActive" data-current="1" bindtap="tabNav">
        <view class='media-name'>图片</view>
      </view>
    </view>
  </view>
</view>

<!--wxss-->
.media-container{
  position: relative;
  width: 100%;
  height: 750rpx;
  background-color: #000;
}
.swiper,.swiper-item,video,image{
  width: 100%;
  height: 100%;
}
.dots {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  line-height: 50rpx;
  padding: 0 20rpx;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 25rpx;
  color: #fff;
}
#myVideo{
  position: relative;
}
.ceng {
  position: relative;
  width: 100%;
  height: 100%;
}

.temp-poster {
  width: 100%;
  height: 100%;
}

.mdc_return {
  position: absolute;
  left: calc(50% - 80rpx);
  bottom: 160rpx; 
  color: #333;
  padding: 10rpx;
  width: 160rpx;
  text-align: center;
  line-height: 40rpx;
  border-radius:30rpx;
  background:rgba(255,255,255,0.6);

}
 .temp-play {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
} 
.temp-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; 
  width: 131rpx;
  height: 131rpx;
}

.media-tab {
  position: absolute;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 99999;
}

.media-item {
  position: relative;
  display: inline-block;
  border-radius: 32rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #323232;
  background: rgba(255, 255, 255, 0.8);
  margin: 30rpx;
}

.arrow {
  position: absolute;
  left: 16rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border: 8rpx solid transparent;
}

.arrow-white {
  border-left: 10rpx solid #fff;
}

.arrow-black {
  border-left: 10rpx solid #323232;
}

.media-name {
  line-height: 46rpx;
  margin: 8rpx 0;
}

.media-item.meidaActive {
  color: #fff;
  background-color: #ff7800;
}

<!--js-->
Page({
  data: {
    //swiper参数
    indicatorDots: false,
    duration: 500,
    //视频地址
    mdc_video: 'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
    //替换视频的封面图
    mdc_videofenmian: 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=826baac9dcc8a786a12a4c0e5709c9c7/5bafa40f4bfbfbed0c103c4c75f0f736afc31fb3.jpg',
    // 视频的封面图显示消失的参数
    xiaoshi: false,
    //当前所在滑块的index
    currentTab: '',
    //判断视频是否全屏播放的参数
    isFullScreen: true,
    //视频是否隐藏的参数
    isShow: true,
    //图片数组
    background: ['../img/store-bg.png', '../img/advertisement.png', '../img/leaseholder-img.png'],
    //tab切换
    swiperCurrent: 0,
  },
  //点击“视频、图片”切换
  tabNav(e) {
    var that = this;
    that.setData({
      currentTab: e.currentTarget.dataset.current,
    });
  },

  // 图片轮播触发
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current, //获取当前轮播图片的下标,
      currentTab: e.detail.current
    })
  },

  // 监听全屏事件
  fullscreenChange(e) {
    this.setData({
      isFullScreen: !this.data.isFullScreen,
    })
  },

  // 监听视频播放结束事件
  videoEnd(e) {
    var that = this;
    that.setData({
      xiaoshi: false,
      isShow: true
    })
  },
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  // 视频播放
  // 封面点击的时候相应的操作  获取视频在JS里的参数属性 
  //重点：点击图片接下来视频进行播放，但是视频播放后直接触发了视频的pause() 结局的方案是，延时150ms后再进行视频的播放，就完美解决了
  play() {
    var that = this;
    that.videoCtx.pause();
    setTimeout(function () {
      that.videoCtx.play()
    }, 150);
    that.setData({
      xiaoshi: true,
      isShow: false
    })
  },

  //安卓系统能检测到 video touchemove 滑动的x距离，已此作为切换的swiper的凭证
  //ios系统，检测不到video touchemove 滑动的x距离，通过cover-view 点击事件进行切换
  mdc_move1: function (e) {
    var that = this;
    that.videoContext = wx.createVideoContext('myVideo');
    if (e.touches[0].clientX > 20) {
      that.setData({
        xiaoshi: false,
        mdc_show: true
      })
    }
  },
  // 点击退出视频触发
  returnquanping: function (e) {
    var that = this;
    that.setData({
      xiaoshi: false,
      isShow: true
    })
  }
})

最终效果如图所示：

注意：由于只有电脑录制GIF图的工具，因此录制的是在微信开发者工具上的效果。在真机上也测试了，效果是一样的（当然我只测了我的手机）。

三、需要注意的问题

1.cover-view

要在视频上面定位一个“退出视频”按钮，但是video组件的层级太高了。官网给出的方案是使用cover-view 标签。但是后期要实现视频进入全屏后，”退出全屏按钮“隐藏。最初用的是wx:if ，测试发现退出全屏时，cover-view中的文字会消失。这种现象非常莫名其妙，于是后面改用hidden ，测试后没有出现这个问题。至于原因我也不清楚！

2.wx.createVideoContext操作video组件

VideoContext 实例，可通过 wx.createVideoContext 获取。

videoContext 通过 id 跟一个 <video/> 组件绑定，操作对应的 <video/> 组件。

3.如何判断视频进入/退出全屏?

官网给出了相关的事件。

4.swiper组件tab栏的变化

参考了以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!--wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">红色</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">绿色</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">黄色</view>
</view>
<view class="swiper-tab-temp"></view>
<view>
  <swiper current="{{currentTab}}" circular="{{true}}" class="swiper-box" duration="300" style="height:600px" bindchange="bindChange">
    <swiper-item style="background-color:red">
      红色内容
    </swiper-item>
    <swiper-item style="background-color:green">
      绿色内容
    </swiper-item>
    <swiper-item style="background-color:yellow">
      黑色内容
    </swiper-item>
  </swiper>
</view>
<!--wxss-->
.swiper-tab {
  width: 100%;
  border-bottom: 1px solid #777;
  text-align: center;
  line-height: 40px;
  background-color: #fff;
}


.swiper-tab-list {
  font-size: 13px;
  display: inline-block;
  width: 33.3%;
  color: #777;
}
.on {
  color: #FFF;
  background-color: #528dc3;
  border-top:5rpx solid #528dc3;
  border-bottom:5rpx solid #528dc3;
}


.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}


.swiper-box view {
  text-align: center;
}
<!--js-->
Page({
  data: {
    currentTab: '',
  },
  /*** 滑动切换tab***/
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  /*** 点击tab切换***/
  swichNav: function (e) {
    var that = this;
    that.setData({
      currentTab: e.target.dataset.current
    });
  },
})

（1）设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值；
（2）swiper组件的current组件用于控制当前显示哪一页；

（3）swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页。

更新

不知道是不是微信改动的原因，原先视频在swiper中是不能滑动的，左右滑动只能改变视频进度条。但是，现在却可以，所以对以上视频和图片之间的滑动进行了改动。

方法：由于视频可以滑动了，所以不需要通过mdc_move1事件判断视频是否滑动。只要监听到swiper滑动了，就让视频暂停并且隐藏，显示播放按钮和封面。

改动的地方有：

​ 1.去除“退出视频”的按钮；

​ 2.去除视频的“mdc_move1”事件；

​ 3.在“swiperChange”，让视频暂停、让视频隐藏、播放按钮和封面显示。

​ this.videoCtx.pause(); 视频暂停

​ isShow:true 视频隐藏

​ isShow:true 播放按钮显示

​ xiaoshi: false 封面显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!--wxml-->
<!-- 视频、图片 -->
<view class='media-container'>
  <swiper class='swiper' current="{{currentTab}}" duration="{{duration}}" bindchange="swiperChange">
    <swiper-item class="swiper-item">
      <view class='ceng'>
        <image class='temp-poster' mode="aspectFit" src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}" />
        <view class="temp-play" bindtap="play" wx:if="{{isShow}}">
          <image class="temp-img" src="../img/play.png" />
        </view>
        <video id="myVideo" src="{{mdc_video}}" controls hidden="{{isShow}}" objectFit="contain" bindfullscreenchange="fullscreenChange" bindended="videoEnd">
        </video>
      </view>
    </swiper-item>
    <block wx:for="{{background}}" wx:key="*this" wx:for-index="index">
      <swiper-item class="swiper-item">
        <image mode="aspectFit" src='{{item}}' class='swiper-item-img'></image>
      </swiper-item>
    </block>
  </swiper>
  <!--  实现点击选中样式  -->
  <view class="dots" hidden="{{swiperCurrent == 0}}">
    <block wx:for="{{background}}" wx:for-index="index" wx:key="*this">
      <view wx:if="{{index+1 == swiperCurrent}}">
        <text>{{index + 1}}</text>/
        <text>{{background.length}}</text>
      </view>
    </block>
  </view>
  <view class="media-tab">
    <view wx:if="{{swiperCurrent == 0}}">
      <view class="media-item meidaActive" data-current="0" bindtap="tabNav">
        <view class='arrow arrow-white'></view>
        <view class='media-name'>视频</view>
      </view>
      <view class="media-item" data-current="1" bindtap="tabNav">
        <view class='media-name'>图片</view>
      </view>
    </view>
    <view wx:else>
      <view class="media-item" data-current="0" bindtap="tabNav">
        <view class='arrow arrow-black'></view>
        <view class='media-name'>视频</view>
      </view>
      <view class="media-item meidaActive" data-current="1" bindtap="tabNav">
        <view class='media-name'>图片</view>
      </view>
    </view>
  </view>
</view>

<!--wxss-->
.media-container{
  position: relative;
  width: 100%;
  height: 750rpx;
  background-color: #000;
}
.swiper,.swiper-item,video,image{
  width: 100%;
  height: 100%;
}
.dots {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  line-height: 50rpx;
  padding: 0 20rpx;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 25rpx;
  color: #fff;
}
#myVideo{
  position: relative;
}
.ceng {
  position: relative;
  width: 100%;
  height: 100%;
}

.temp-poster {
  width: 100%;
  height: 100%;
}

.mdc_return {
  position: absolute;
  left: calc(50% - 80rpx);
  bottom: 160rpx; 
  color: #333;
  padding: 10rpx;
  width: 160rpx;
  text-align: center;
  line-height: 40rpx;
  border-radius:30rpx;
  background:rgba(255,255,255,0.6);

}
 .temp-play {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
} 
.temp-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; 
  width: 131rpx;
  height: 131rpx;
}

.media-tab {
  position: absolute;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 99999;
}

.media-item {
  position: relative;
  display: inline-block;
  border-radius: 32rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #323232;
  background: rgba(255, 255, 255, 0.8);
  margin: 30rpx;
}

.arrow {
  position: absolute;
  left: 16rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border: 8rpx solid transparent;
}

.arrow-white {
  border-left: 10rpx solid #fff;
}

.arrow-black {
  border-left: 10rpx solid #323232;
}

.media-name {
  line-height: 46rpx;
  margin: 8rpx 0;
}

.media-item.meidaActive {
  color: #fff;
  background-color: #ff7800;
}

<!--js-->
Page({
  data: {
    //swiper参数
    indicatorDots: false,
    duration: 500,
    //视频地址
    mdc_video: 'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
    //替换视频的封面图
    mdc_videofenmian: 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=826baac9dcc8a786a12a4c0e5709c9c7/5bafa40f4bfbfbed0c103c4c75f0f736afc31fb3.jpg',
    // 视频的封面图显示消失的参数
    xiaoshi: false,
    //当前所在滑块的index
    currentTab: '',
    //判断视频是否全屏播放的参数
    isFullScreen: true,
    //视频是否隐藏的参数
    isShow: true,
    //图片数组
    background: ['../img/store-bg.png', '../img/advertisement.png', '../img/leaseholder-img.png'],
    //tab切换
    swiperCurrent: 0,
  },
  //点击“视频、图片”切换
  tabNav(e) {
    var that = this;
    that.setData({
      currentTab: e.currentTarget.dataset.current,
    });
  },

  // 图片轮播触发
  swiperChange: function (e) {
	this.videoCtx.pause();		//新增
    this.setData({
      swiperCurrent: e.detail.current, //获取当前轮播图片的下标,
      currentTab: e.detail.current,
	  isShow: true,				//新增
      xiaoshi: false			//新增
    })
  },

  // 监听全屏事件
  fullscreenChange(e) {
    this.setData({
      isFullScreen: !this.data.isFullScreen,
    })
  },

  // 监听视频播放结束事件
  videoEnd(e) {
    var that = this;
    that.setData({
      xiaoshi: false,
      isShow: true
    })
  },
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  // 视频播放
  // 封面点击的时候相应的操作  获取视频在JS里的参数属性 
  //重点：点击图片接下来视频进行播放，但是视频播放后直接触发了视频的pause() 结局的方案是，延时150ms后再进行视频的播放，就完美解决了
  play() {
    var that = this;
    that.videoCtx.pause();
    setTimeout(function () {
      that.videoCtx.play()
    }, 150);
    that.setData({
      xiaoshi: true,
      isShow: false
    })
  },
  // 点击退出视频触发
  returnquanping: function (e) {
    var that = this;
    that.setData({
      xiaoshi: false,
      isShow: true
    })
  }
})

参考链接：

http://blog.chinaunix.net/uid-30029642-id-5787093.html

https://blog.csdn.net/xieshunhai/article/details/72830938

https://blog.csdn.net/sophie_u/article/details/71745125

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>