uniapp小視頻項目開發(fā)之滑動播放視頻

更新時間：2022年04月11日 08:09:14 作者：奔跑吧雞翅

最近在工作中遇到了一個視頻播放的需求,所以下面這篇文章主要給大家介紹了關(guān)于uniapp小視頻項目開發(fā)之滑動播放視頻的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、監(jiān)聽視頻滑動

給 swiper 增加 @change="change"，這個時間在我們完成一次滑動后執(zhí)行，在 methods 下增加 change 事件，并打印結(jié)果：

change(res){
	console.log(res);
}

其中 res.detail.current 表示當(dāng)前頁數(shù)

還可以監(jiān)聽滑動方向，因此增加 @touchstart="touchStart"和@touchend="touchEnd"的監(jiān)聽，分別在觸摸屏幕開始和結(jié)束時執(zhí)行

當(dāng)向上滑時，也就是從第一個視頻翻到第二個視頻的時候

可以看到 pageY 變小了，我們可以根據(jù)這個來判斷上下滑動方向

因此我們編寫代碼

<template>
	<view class="videoList">
		<view class="video-box">
			<swiper class="swiper" :vertical="true" @change="change" @touchstart="touchStart" @touchend="touchEnd">
				<swiper-item v-for="item of list" :key="item.id">
					<view class="swiper-item">
						<videoPlayer :video="item"></videoPlayer>
					</view>
					<view class="left-box">
						<listLeft></listLeft>
					</view>
					<view class="right-box">
						<listRight></listRight>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoPlayer from './videoPlayer.vue'
	import listLeft from './listLeft.vue'
	import listRight from './listRight.vue'
	var time = null
	export default {
		props: ["myList"],
		components: {
			videoPlayer,
			listLeft,
			listRight
		},
		name: "video-list",
		data() {
			return {
				list: [],
				pageStartY: 0,
				pageEndY: 0
			};
		},
		methods: {
			change(res) {
				clearTimeout(time)
				time = setTimeout(() => {
					if (this.pageStartY > this.pageEndY) {
						console.log("向上滑動")
						this.pageStartY = 0
						this.pageEndY = 0
					} else {
						console.log("向下滑動");
						this.pageStartY = 0
						this.pageEndY = 0
					}
				},1)
			},
			touchStart(res) {
				this.pageStartY = res.changedTouches[0].pageY;
				console.log(this.pageStartY);
			},
			touchEnd(res) {
				this.pageEndY = res.changedTouches[0].pageY;
				console.log(this.pageEndY);
			}
		},
		watch: {
			myList() {
				this.list = this.myList;
			}
		}
	}
</script>

<style>
	.videoList {
		width: 100%;
		height: 100%;
	}

	.video-box {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		z-index: 19;
	}

	.left-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
	}

	.right-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
	}
</style>

查看 log 日志

代碼的執(zhí)行順序是：touchStart->change->toucheEnd ，所以在chagne方法中使用 pageStartY 和 pageEndY 來判斷上下滑動方向需要有一個定時器，延遲 1ms，這樣執(zhí)行順序就變成了touchStart->toucheEnd->change，pageStartY 和 pageEndY 都完成了賦值，就可以進(jìn)行判斷了

2、播放和暫停

從第1個視頻滑到第2個視頻，那么第1個視頻應(yīng)改暫停播放，第2個視頻應(yīng)該開始播放。我們把這部分代碼寫道 videoPlayer.vue 中

onReady() {
	this.videoContext = uni.createVideoContext("myVideo",this)
},
methods:{
	playVideo(){
		this.videoContext.seek(0)
		this.videoContext.play()
		console.log("播放視頻");
	},
	pauseVideo(){
		this.videoContext.pause()()
		console.log("暫停視頻");
	}
}

下面要做的就是解決如何讓父組件調(diào)用子組件的方法，修改 videoList.vue，給其中的 videoPlayer 增加 ref

<videoPlayer ref="player" :video="item"></videoPlayer>

然后通過 this.$refs.player 可以找到 videoPlayer 這個插件，由于是個數(shù)組，所以通過 page 來找到當(dāng)前頁。當(dāng)?shù)谝粋€視頻滑動到第二個視頻，第一個視頻應(yīng)該暫停，第二個應(yīng)該自動播放，也就是上滑的情況。下滑的情況則相反，因此完善代碼：

data() {
			return {
				......
				page:0
			};
		},
		methods: {
			change(res) {
				clearTimeout(time)
				this.page = res.detail.current
				time = setTimeout(() => {
					if (this.pageStartY > this.pageEndY) {
						console.log("向上滑動"+this.page);
						this.$refs.player[this.page].playVideo()
						this.$refs.player[this.page-1].pauseVideo()
						this.pageStartY = 0
						this.pageEndY = 0
					} else {
						console.log("向下滑動"+this.page);
						this.$refs.player[this.page].playVideo()
						this.$refs.player[this.page+1].pauseVideo()
						this.pageStartY = 0
						this.pageEndY = 0
					}
				},1)
			},
			......
		},

查看效果：

3、增加播放、暫停視頻功能

增加一個點擊視頻進(jìn)行播放、暫停的功能。給 videoPlayer 增加一個點擊事件

<template>
	<view class="videoPlayer">
		<video id="myVideo" @click="click"
		class="video" :controls="false" :loop="true" :src="video.src"></video>
	</view>
</template>

<script>
	export default {
		props:['video'],
		name: "videoPlayer",
		data() {
			return {
				play:false
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo",this)
		},
		methods:{
			click(){
				if(this.play === false){
					this.playthis()
				}else{
					this.pauseVideo()
				}
			},
			playVideo(){
				if(this.play === false){
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
				}
			},
			pauseVideo(){
				if(this.play === true){
					this.videoContext.pause()
					this.play = false
				}
			},
			playthis(){
				if(this.play === false){
					this.videoContext.play()
					this.play = true
				}
			}
		}
	}
</script>
......

4、增加雙擊點贊

雙擊方法直接在 videoPlayer.vue 的 click() 方法上修改：

data() {
			return {
				......
				dblClick: false
			};
		},
		......
		methods: {
			click() {
				clearTimeout()
				this.dblClick = !this.dblClick
				timer = setTimeout(() => {
					//300ms之內(nèi)dblClick為true為單擊
					if (this.dblClick) {
						//單擊
						if (this.play === false) {
							this.playthis()
						} else {
							this.pauseVideo()
						}
					} else {
						//雙擊
						this.$emit("doubleClick")
					}
					this.dblClick = false
				}, 300)

			},
			......
		}

另外由于愛心寫在 listRight.vue，所以在 listRight.vue 中增加一個方法

change() {
	this.color = 'color: red;'
}

沒有復(fù)用 changeColor() 方法，因為雙擊點贊，再雙擊并不會取消點贊，跟直接單擊愛心圖標(biāo)是不一樣的

videoPlayer.vue 雙擊時，子組件向父組件傳值使用了 this.$emit("doubleClick")，我們需要在 video-list.vue 中增加 doubleClick() 方法

<listRight ref="right"></listRight>

doubleClick(){
	//點贊，調(diào)用 listRight 中方法
	this.$refs.right[0].change()
}

當(dāng)雙擊屏幕，愛心變紅，再次雙擊，愛心不會改變單擊愛心，取消點贊

5、控制首個視頻自動播

思路：判斷是否為第一個視頻，然后修改 videoPlayer 的 autoplay 屬性

修改 video-list.vue，在循環(huán)時，給 videoPlayer 傳一個 index

<swiper-item v-for="(item,index) of list" :key="item.id">
	<view class="swiper-item">
		<videoPlayer @doubleClick="doubleClick" ref="player" 
						:video="item" :index="index"></videoPlayer>
	</view>
	......
</swiper-item>

videoPlayer.vue 中接收 index 傳值，判斷如果是 0，改變 autoPlay 的值

<template>
	<view class="videoPlayer">
		<video id="myVideo" @click="click" 
		class="video" :controls="false" :loop="true" 
		:src="video.src" :autoplay="autoPlay"></video>
	</view>
</template>

<script>
	var timer = null
	export default {
		props: ['video','index'],
		name: "videoPlayer",
		data() {
			return {
				......
				autoPlay:false
			};
		},
		......
		methods: {
			......
			auto(){
				if(this.index === 0){
					this.autoPlay = true
				}
			}
		},
		created() {
			this.auto()
		}
	}
</script>
......

6、動態(tài)渲染視頻信息

index.vue 中獲取數(shù)據(jù)后，通過 myList 將數(shù)據(jù)傳遞給了 video-list.vue，在 video-list.vue 中接收了 myList 的數(shù)據(jù)，然后通過循環(huán)展示了視頻數(shù)據(jù)，所以展示左側(cè)和右側(cè)的數(shù)據(jù)，只需要將循環(huán)的每項 item 傳給 listLeft 和 listRight 即可

<view class="left-box">
	<listLeft :item='item'></listLeft>
</view>
<view class="right-box">
	<listRight ref="right" :item='item'></listRight>
</view>

然后分別在 listLeft 和 listRight 中接收后，展示數(shù)據(jù)

<template>
	<view class="listLeft">
		<view class="author">
			{{item.author}}
		</view>
		<view class="title">
			{{item.title}}
		</view>
		<view class="box">
			<view class="music">
				@我們的戀愛是對生命的嚴(yán)重浪費(fèi)@
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['item'],
		name:"listLeft",
		data() {
			return {
				
			};
		}
	}
</script>
......

listRight.vue

<template>
	<view class="listRight">
		......
		<view class="number">{{item.loveNumber}}</view>
		......
		<view class="number">{{item.commentNumber}}</view>
		......
		<view class="number">{{item.shareNumber}}</view>
		......
	</view>
</template>

<script>
	export default {
		props:['item'],
		......
	}
</script>
......