uniapp-nvue页面文件:localVideo.nvue
<script>
export default {
data() {
return {
// 视频数据
videoArr: [],
// 显示的视频数据
videoArrScroll: [],
// 视频显示的开始下标
startIndex: 0,
// 视频开始的结束下标
endIndex: 3,
// 暂停播放
playBob: true,
}
},
onLoad() {
let videoArr = uni.getStorageSync("videoArr")
if (videoArr) {
this.videoArr = JSON.parse(videoArr)
this.videoArrScroll = this.videoArr.slice(0, 3)
console.log("视频数据:", this.videoArr);
}
},
onReady() {
let videoArr = uni.getStorageSync("videoArr")
if (videoArr) {
const that = this
const videoContent = uni.createVideoContext(that.videoArrScroll[0].id)
videoContent.play()
}
},
methods: {
// 上传视频
uploadVideos() {
const that = this
uni.chooseVideo({
sourceType: ['album'],
success: function(res) {
let obj = {
// 视频地址
src: res.tempFilePath,
// 视频描述
dsc: ''
}
obj.id = (new Date().getTime()) + ''
that.videoArr.unshift(obj)
that.startIndex = 0
that.endIndex = 3
that.videoArrScroll = that.videoArr.slice(0, 3)
setTimeout(() => {
let videoContents = null
that.videoArrScroll.forEach((item, index) => {
videoContents = uni.createVideoContext(item.id)
videoContents.pause()
})
videoContents = uni.createVideoContext(that.videoArrScroll[0].id)
videoContents.play()
}, 100)
uni.setStorageSync("videoArr", JSON.stringify(that.videoArr))
}
});
},
// 滑动视频时触发
videoChange(e) {
const that = this
const index = e.detail.current
console.log("当前视频下标:", index);
let videoContents = null
that.videoArrScroll.forEach((item, index) => {
videoContents = uni.createVideoContext(item.id)
videoContents.pause()
})
console.log("当前视频ID:", that.videoArrScroll[index].id);
videoContents = uni.createVideoContext(that.videoArrScroll[index].id)
videoContents.play()
that.endIndex += 1
that.videoArrScroll = that.videoArr.slice(that.startIndex, that.endIndex)
},
// 实现数组乱序
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
},
// 刷新
refresh() {
console.log("触发");
const that = this
const arr = JSON.parse(JSON.stringify(that.videoArr))
that.videoArr = this.shuffleArray(arr);
console.log("乱序的数组:", that.videoArr);
that.startIndex = 0
that.endIndex = 3
that.videoArrScroll = that.videoArr.slice(0, 3)
setTimeout(() => {
let videoContents = null
that.videoArrScroll.forEach((item, index) => {
videoContents = uni.createVideoContext(item.id)
videoContents.pause()
})
videoContents = uni.createVideoContext(that.videoArrScroll[0].id)
videoContents.play()
}, 100)
uni.setStorageSync("videoArr", JSON.stringify(that.videoArr))
},
// 单击视频播放暂停
playVideo(videoId) {
const that = this
let videoContents = null
that.videoArrScroll.forEach((item, index) => {
videoContents = uni.createVideoContext(item.id)
videoContents.pause()
})
let videoContent = null
if (this.playBob) {
videoContent = uni.createVideoContext(videoId)
videoContent.pause()
this.playBob = false
} else {
videoContent = uni.createVideoContext(videoId)
videoContent.play()
this.playBob = true
}
}
}
}
</script>
<template>
<view class="box">
<!-- 数据为空 -->
<view class="dataNull" v-if="videoArrScroll.length==0">
<u-empty mode="data" icon="../../static/dataNull.png">
</u-empty>
</view>
<!--视频区域
vertical:设置轮播方向为竖向
acceleration:实现快手视频滑动效果:当开启时,会根据滑动速度,连续滑动多屏
-->
<swiper v-if="videoArrScroll.length!=0" class="video_box" @change="videoChange" :vertical="true"
:acceleration="true">
<swiper-item v-for="item in videoArrScroll" :key="item.id" class="video_item">
<video @click="playVideo(item.id)" style="width: 750rpx;height: 1334rpx;" :id="item.id" :src="item.src"
:loop='true' :controls="true"></video>
</swiper-item>
</swiper>
<!-- 底部功能 -->
<view class="bottom">
<view class="bottom_item" @click="refresh">
<image style="width: 70rpx;height: 70rpx;" src="../../static/shuaXing.png" mode=""></image>
<text style="font-size: 30rpx;margin-top: 10rpx;">刷新一下</text>
</view>
<view class="bottom_item" @click="uploadVideos">
<image style="width: 70rpx;height: 70rpx;" src="../../static/shangChuan.png" mode=""></image>
<text style="font-size: 30rpx;margin-top: 10rpx;">上传本地视频</text>
</view>
</view>
</view>
</template>
<style scoped>
.dataNull {
width: 750rpx;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 400rpx;
}
.video_item {
display: flex;
justify-content: center;
align-items: center;
}
.video_box {
background-color: black;
width: 750rpx;
/* #ifdef APP-VUE */
height: calc(100vh - 140rpx);
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
margin-bottom: 140rpx;
/* #endif */
}
.box {
/* #ifdef APP-VUE */
height: 100vh;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
background-color: #f2f2f2;
}
.bottom_item {
display: flex;
flex-direction: column;
align-items: center;
}
.bottom {
position: fixed;
bottom: 0;
z-index: 99999;
width: 750rpx;
height: 140rpx;
background-color: white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
</style>