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

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

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

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

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

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

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

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

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

可以看到 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 都完成了賦值，就可以進行判斷了

2、播放和暫停

從第1個視頻滑到第2個視頻，那么第1個視頻應改暫停播放，第2個視頻應該開始播放。我們把這部分代碼寫道 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 來找到當前頁。當?shù)谝粋€視頻滑動到第二個視頻，第一個視頻應該暫停，第二個應該自動播放，也就是上滑的情況。下滑的情況則相反，因此完善代碼：

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、增加播放、暫停視頻功能

增加一個點擊視頻進行播放、暫停的功能。給 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;'
}

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

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

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

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

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

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">
				@我們的戀愛是對生命的嚴重浪費@
			</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>
......

總結

到此這篇關于uniapp小視頻項目開發(fā)之滑動播放視頻的文章就介紹到這了,更多相關uniapp滑動播放視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

javascript ES6中箭頭函數(shù)注意細節(jié)小結
這篇文章主要給大家總結了關于javascript ES6中箭頭函數(shù)注意細節(jié)的相關資料，文中介紹的比較詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
JavaScript單例模式實現(xiàn)自定義彈框
這篇文章主要為大家詳細介紹了JavaScript單例模式實現(xiàn)自定義彈框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
javascript 彈出層組件（升級版）
前面文章里寫過一個彈出層對話框，但ie6下有bug，根本沒有實現(xiàn)position:fixed的效果，當時沒有真實ie6環(huán)境，測試疏忽，匆匆放到博客上，還讓一些讀者看到甚至使用，在這里表示萬分抱歉啊
2011-05-05
JS如何將數(shù)字類型轉(zhuǎn)化為沒3個一個逗號的金錢格式
本文為大家介紹下如何將數(shù)字類型轉(zhuǎn)化為沒3個一個逗號的金錢格式，下面是具體的實現(xiàn)
2014-01-01
微信小程序多文件上傳 Tdesign及導入失敗問題
小程序文件上傳還是有點麻煩的,其實主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個個的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導入失敗問題,需要的朋友可以參考下
2023-11-11
獲取焦點時,利用js定時器設定時間執(zhí)行動作
網(wǎng)上有很多類似的知識，并不是有什么難度的技巧，僅僅是開發(fā)過程中的一點點積累而已。
2010-04-04
layer ui 導入文件之前傳入數(shù)據(jù)的實例
今天小編就為大家分享一篇layer ui 導入文件之前傳入數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
微信小程序四種彈窗方式實例
微信小程序彈窗是小程序在需要提示用戶的時候,顯示的一種交互形式,下面這篇文章主要給大家介紹了關于微信小程序四種彈窗方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
純javascript實現(xiàn)四方向文本無縫滾動效果
本文主要給大家分享了使用純javascript實現(xiàn)的可控制的四方向文本無縫滾動的代碼，效果非常不錯，有需要的小伙伴可以參考下。
2015-06-06