小程序swiper图片加视频播放（小程序swiper）

根据项目需求，我们要实现一个商品的图片加视频的一个播放

先说说swiper加video标签遇到的坑

1. 首先把video写在swiper-item和image写在一起
2. 视频不会显示，会默认被挤到下面去
3. 写两个swiper-item,使用原生的video标签进度条以及播放按钮都无妨播放
4. swiper会以为你是想要滑动到下一张图片

解决办法，全部自定义视频的进度条以及播放

HTML

视频加图片部分

	<swiper circular @change="handleSwiper" class="screen-swiper" interval="5000" duration="500">
				<block>
					<swiper-item class="item" @tap.stop="handleStop" v-if="productDetails.videoUrl!=null">
						<video id="video" class="video-content" :src="productDetails.videoUrl"
							@loadedmetadata="getLength" @timeupdate="timeupdate" :show-play-btn="false" @ended="ended"
							:show-fullscreen-btn="true" :show-mute-btn='true' :mobilenet-hint-type="1" :controls="false"
							:show-center-play-btn="false">
							<image v-if="productDetails.videoCoverUrl !=null" :src="productDetails.videoCoverUrl"
								mode="" class="cover" :style="{'opacity':opacity}"></image>
							<image v-else
								:src="productDetails.videoUrl+'?x-oss-process=video/snapshot,t_1000,w_634,h_300,f_jpg,m_fast'"
								mode="" class="cover" :style="{'opacity':opacity}"></image>
							<image src="/static/market/video.png" mode="" class="video-icon" @tap.stop="handlePlay"
								v-if="showVideo"></image>
							<image src="/static/market/pause_icon.png" class="video-icon" mode="" v-if="showPause"
								@tap.stop="handlePause">
							</image>
						</video>
					</swiper-item>
				</block>
				<block>
					<swiper-item v-for="(item, index) in productDetails.productImgs" :key="index"
						@click="preview(index)" :data-index="index">
						<image @error="handleUploadImg(index)" class="screen-image" :src="item" mode="aspectFill">
						</image>
					</swiper-item>
				</block>
			</swiper>

进度条 轮播指示灯

		<!--进度条-->
				<view class="process-container" v-if="productDetails.videoUrl!=null&&current==1">
					<view class="currtime">{{currtime}}</view>
					<view class="slider-container">
						<slider @change="sliderChange" step="1" :value="sliderValue"
							backgroundColor="rgba(255,255,255,.5)" class="slider" activeColor="#FFFFFF"
							block-color="#FFFFFF" block-size="16rpx" />
					</view>
					<view class="druationTime">{{druationTime}}</view>
					</image>
				</view>
				<!-- 指示器 -->
				<view class="indicator">
					<view class="indicator-text">
						{{ current|| '-' }}/{{productDetails.videoUrl==null? productDetails.productImgs.length :productDetails.productImgs.length+1|| '-' }}
					</view>
				</view>

JavaScript部分

			// 获取视频时长
			getLength(e) {
				console.log("e===>", e);
				this.currDuration = e.detail.duration;
				e.detail.duration = parseInt(e.detail.duration);
				let t = "";
				if (parseInt(e.detail.duration / 60) < 10) {
					t = "0" + parseInt(e.detail.duration / 60);
					//处理时间格式并存放到data中
					this.druationTime = t + ":" + (e.detail.duration % 60);
				} else {
					this.druationTime =
						parseInt(e.detail.duration / 60) + ":" + (e.detail.duration % 60);
				}
			},
			// 根据秒获取时间
			formatSeconds(a) {
				var hh = parseInt(a / 3600);
				var mm = parseInt((a - hh * 3600) / 60);
				if (mm < 10) mm = "0" + mm;
				var ss = parseInt((a - hh * 3600) % 60);
				if (ss < 10) ss = "0" + ss;
				if (hh < 10) hh = hh == 0 ? "" : `0${hh}:`;
				var length = hh + mm + ":" + ss;
				if (a >= 0) {
					return length;
				} else {
					return "00:00";
				}
			},
			// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
			timeupdate(e) {
				// duration 接口返回的总秒数
				let duration = this.currDuration;
				let sliderValue = (e.detail.currentTime / duration) * 100;
				let second = (sliderValue / 100) * duration;
				if (this.updateState) {
					//判断拖拽完成后才触发更新，避免拖拽失效
					this.sliderValue = sliderValue;
					this.duration = duration;
				} else {
					this.sliderValue = e.detail.currentTime;
				}
				this.druationTime = this.formatSeconds(duration);
				this.currtime = this.formatSeconds(second);
			},
			// 拖动slider触发
			sliderChange(e) {
				// duration 接口返回的总秒数
				var duration = this.currDuration;
				var second = (e.detail.value / 100) * duration;
				if (duration) {
					//完成拖动后，计算对应时间并跳转到指定位置
					this.videoContext.seek(second);
					(this.sliderValue = e.detail.value), (this.updateState = true); //完成拖动后允许更新滚动条
					this.druationTime = this.formatSeconds(duration);
					this.currtime = this.formatSeconds(second);
				} else {}
			},
			// 播放结束
			ended() {
				this.showVideo = true;
			},
			// 播放
			handlePlay() {
				this.videoContext.play();
				this.showVideo = false;
				this.showPause = true;
				this.opacity = 0;
				setTimeout(() => {
					this.showPause = false;
				}, 2000);
			},
			// 暂停
			handlePause() {
				this.showVideo = true;
				this.videoContext.pause();
				this.showPause = false;
			},
			// 点击播放图标出现暂停的图标过3秒钟消失
			handleStop() {
				if (this.showVideo == false) {
					this.showPause = true;
				}
				setTimeout(() => {
					this.showPause = false;
				}, 2000);
			},