实现抖音刷视频功能
<!--swiper实现整屏划动播放视频-->
<swiper :vertical="true" class="swiperVideo" style="height: 100vh;" @change="changeplay"
@touchstart="touchStart" @touchend="touchEnd">
<swiper-item v-for="(item, index) in swiperList" :key="item.id">
<view class="bg-video">
<view class="video">
<videoPlayer ref="player" :video="item" :index="index"></videoPlayer>
</view>
</view>
</swiper-item>
</swiper>
//上下滑动触发事件
changeplay(res) {
console.log('res', res);
clearTimeout(time)
this.page = res.detail.current
time = setTimeout(() => {
if (this.pageStatrY < this.pageEndY) {
console.log('向上滑动')
setTimeout(() => {
this.$refs.player[this.page].player()
}, 20)
this.$refs.player[this.page + 1].pause()
this.pageStatrY = 0
this.pageEndY = 0
} else {
console.log('向下滑动')
setTimeout(() => {
this.$refs.player[this.page].player()
}, 20)
console.log('page', this.page - 1, this.$refs.player);
this.$refs.player[this.page - 1].pause()
this.pageStatrY = 0
this.pageEndY = 0
}
}, 1)
},
//获取向下滑动的值
touchStart(res) {
this.pageStatrY = res.changedTouches[0].pageY
console.log('pageStatrY', this.pageStatrY)
},
//获取向上滑动的值
touchEnd(res) {
this.pageEndY = res.changedTouches[0].pageY
console.log('pageEndY', this.pageEndY)
},videoPlayer 组件
<template>
<view class="videoPlayer">
<video id="myVideo" class="video" :controls="false" :src="video" :loop="false" :autoplay="autoplay"
:show-center-play-btn="false" style="pointer-events:none;will-change: transform;" @click="click"></video>
</view>
</template>
<script>
var timer = null
export default {
props: ['video', 'index'],
data() {
return {
play: false,
dblClick: false,
autoplay: false,
};
},
mounted() {
this.videoContext = uni.createVideoContext('myVideo', this)
this.atuo()
},
methods: {
click() {
clearTimeout(timer)
this.dblClick = !this.dblClick
timer = setTimeout(() => {
if (this.dblClick) { //判断是单击 即为true
//单击
if (this.play === false) {
this.playThis()
} else {
this.pause()
}
} else {
//双击
// this.$emit('changeClick') //向父组件传递一个事件
}
this.dblClick = false //点击后重置状态 重置为false
}, 300)
},
player() {
//从头播放视频
if (this.play === false) {
this.videoContext.seek(0)
this.videoContext.play()
this.play = true
}
},
pause() {
//暂停视频
if (this.play === true) {
this.videoContext.pause()
this.play = false
}
},
playThis() {
//播放当前视频
if (this.play === false) {
this.videoContext.play()
this.play = true
}
},
//首个视频自动播放
atuo() {
//首个视频自动播放
if (this.index === 0) {
this.autoplay = true
}
}
},
}
</script>
<style>
.videoPlayer {
height: 100vh;
width: 100%;
}
.video {
height: 100vh;
width: 100%;
}
</style>！！！！目前我这个小程序是可以用的，但是华为快应用不行（uniapp转华为快应用）
