Uniapp自定义video播放按钮并结合swiper图片

淘宝中商品详情页都是视频和图片结合，我们这个demo实现的效果如下

话不多说，直接上代码了

先说html布局

<swiper :indicator-dots="dots" :interval="3000" :duration="1000" :circular="true" indicator-color="rgba(216, 216, 216)"
indicator-active-color="#7a7a7a" @change="bannerfun">
 <block v-for="(iteming,index) in imagetext[0].media" :key="index">
	<swiper-item class="swiper-video" v-if="iteming.video != '' ">
			<view class="video-btn">
				<video id="myVideo" ref="myVideo" :src="iteming.video" controls :show-center-play-btn="false" :controls="contimg"
				    object-fit="cover" @play="playFun()" @pause="pauseFun()" @ended="endedFun()">
					</video>
			<view class="video-img" @tap="videoPlay()" v-show="startVideo">
			<image src="../../static/details/bofang.svg" mode=""></image>
					</view>
				</view>
			</swiper-item>
   <block v-for="(item,indexing) in iteming.imgArray" :key="indexing">
			<swiper-item>
				<image :src="item" mode="aspectFill" class="imageurl"></image>
		 </swiper-item>
			</block>
	</block>
</swiper>

解析:

1.	第一个swiper-item是包裹我们的视频的，第二个swiper-item是包裹我们的图片
2.	swiper中change事件是，current 改变时会触发 change 事件，也就是当我们滑动的时候触发
3.	video中的:controls="contimg"是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
4.	@play是当开始/继续播放时触发play事件
5.	@pause当暂停播放时触发 pause 事件
6.	@ended当播放到末尾时触发 ended 事件

这是我的数据结构，所以布局才这样写，你可以根据你的数据结构自行发挥

data中

data() {
			return {
				// 是否显示指示点
				dots: false,
				//video对象
				videoplay: {},
				//中间播放按钮
				startVideo: true,
				//是否显示下方的播放，暂停等
				contimg: false,
				// 请求的商品图片
				imagetext: [],
				// 是否有视频
				truevideo:'',
			}
	},

methods里面

网络请求，我这个网络请求使用class封装的

async detRequest(id) {
				let introduce = new this.Request(this.Urls.m().introduceurl + '?id=' + id).modeget()
				try {
					let res = await Promise.all([introduce])
					console.log(res)
					//图片视频的数据
					this.imagetext = res[0].data
					let mendata = res[0].data[0]
					//如果有视频，就不显示面板指示点
					this.truevideo = mendata.media[0].video
					this.dots = this.truevideo == '' ? true : false
				} catch (e) {
					console.log(e)
			}
},

然后是当我们滑动时候触发

//滑块滑动时触发
			bannerfun(e) {
				// 出现指示点
				let inx = e.detail.current
				// 没有视频要显示指示点
				if (this.truevideo != '') {
					this.dots = inx == 0 ? false :  true,
					// 滑动时暂停视频播放
					this.videoplay.pause()
				} else {
					this.dots = true
				}
	},

视频播放时触发

playFun() {
				this.startVideo = false
				this.contimg = true
	},

视频暂停时触发

pauseFun() {
				this.startVideo = true
				this.contimg = false
},

播放到末尾触发

endedFun() {
				this.startVideo = true
				this.contimg = false
},

手动触发视频播放

videoPlay() {
				setTimeout(() => {
					this.videoplay.play()
				}, 200)
},

获取video对象

mounted() {
			this.videoplay = wx.createVideoContext('myVideo')
}

//获取商品数据

onLoad() {
	this.detRequest(传id)
}

github上有详细的教程

github项目地址:https://github.com/lsh555/TmUniapp