yangjun
/
sadjv3_user
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视频圈

This commit is contained in:
Mr.jiang 2024-07-25 21:22:54 +08:00
parent 9618e035dc
commit 805cb8b0c0
1 changed files with 29 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
pages/videoCircle/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view> <view>
<!-- 视频 id 切记是字符串类型 --> <!-- 视频 id 切记是字符串类型 -->
<image v-if="isShowAixin" src="@/static/img/index/aixining.png" :style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'"></image> <!-- <image v-if="isShowAixin" src="@/static/img/index/aixining.png" :style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'"></image> -->
<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false" :duration="duration"> <swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false" :duration="duration">
<swiper-item v-for="(list,index) in dataList" :key="index"> <swiper-item v-for="(list,index) in dataList" :key="index">
<view v-if="Math.abs(k-index)<=1"> <view v-if="Math.abs(k-index)<=1">
@ -32,7 +32,7 @@
@click="tapVideoHover(list.state,$event)" @click="tapVideoHover(list.state,$event)"
@timeupdate="timeupdate($event,index)" @timeupdate="timeupdate($event,index)"
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: 8;'" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: 8;'"
:poster="list.filePath+'?x-oss-process=video/snapshot,t_100,f_jpg'" :poster="list.filePath"
></video> ></video>
<!-- <!--
1.这里是封面（方案二）：这里的封面可以自定义。 1.这里是封面（方案二）：这里的封面可以自定义。
@ -242,6 +242,7 @@
} }
},200) },200)
} else { } else {
console.log(88)
audo.pause() audo.pause()
this.dataList[k].state = 'pause' this.dataList[k].state = 'pause'
uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0) uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
@ -263,39 +264,28 @@
this.boxStyle.width = this.windowWidth + 'px'//给宽度加px this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度 this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
this.get() //刚进入页面加载数据 this.get() //刚进入页面加载数据
// #ifndef MP
this.rotateX();
// #endif
}, },
onShow(){ onShow(){
console.log('回到前台'); console.log('回到前台');
if(this.dataList.length !== 0){ if(this.dataList.length !== 0){
// #ifdef MP
this.dataList[this.k].state = 'play';
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
// #endif
// #ifdef H5
if(this.isClick){ if(this.isClick){
this.dataList[this.k].state = 'play'; this.dataList[this.k].state = 'pause';
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play() uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
audo.play() audo.pause()
// this.dataList[this.k].state = 'play';
// uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
// audo.play()
} }
// #endif
} }
}, },
onHide(){ onHide(){
// #ifdef MP
this.dataList[this.k].state = 'pause';
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
// #endif
// #ifdef H5
if(this.isClick){ if(this.isClick){
this.dataList[this.k].state = 'pause'; this.dataList[this.k].state = 'pause';
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause() uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
audo.pause() audo.pause()
} }
// #endif
console.log('到后台'); console.log('到后台');
}, },
@ -579,56 +569,24 @@
*/ */
}, },
//点击播放&&暂停 //点击播放&&暂停
//点击播放&&暂停
tapVideoHover(state,event){ tapVideoHover(state,event){
// this.dataList[this.k].isShowimage = false console.log('state--',state);
// this.dataList[this.k].isShowProgressBarTime = false if(state=='play'||state=='continue'){
this.ProgressBarOpacity = 0.5 this.dataList[this.k].state = 'pause';
this.dotWidth = 0 }else{
console.log('state--1',state); this.dataList[this.k].state = 'continue';
// 1.启用双击点赞 --- start }
this.touchNum++; if(this.dataList[this.k].state == 'continue'){
setTimeout(()=>{ this.isClick = true;
if(this.touchNum == 1){ this.dataList[this.k].playIng = true
if(state=='play'||state=='continue'){ uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play();//暂停以后继续播放
this.dataList[this.k].state = 'pause'; audo.play()
this.dataList[this.k].isplay = true; }
}else{ if(this.dataList[this.k].state == 'pause'){
this.dataList[this.k].state = 'continue'; uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).pause();//暂停以后继续播放
this.dataList[this.k].isplay = false; audo.pause()
} }
if(this.dataList[this.k].state == 'continue'){
this.dataList[this.k].isplay = false;
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
this.clearTime();
setTimeout(()=>{
this.rotateX();
},50)
}
if(this.dataList[this.k].state == 'pause'){
this.dataList[this.k].isplay = true;
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
this.clearTime();
}
}
if(this.touchNum >= 2){
this.doubleLike();
}
this.touchNum = 0;
},200)
// --------------- ending
// 2. 不启用双击点赞 start
// if(state=='play'||state=='continue'){
// this.dataList[this.k].state = 'pause';
// }else{
// this.dataList[this.k].state = 'continue';
// }
// if(this.dataList[this.k].state == 'continue'){
// uni.createVideoContext(this.dataList[this.k].id,this).play();//暂停以后继续播放
// }
// if(this.dataList[this.k].state == 'pause'){
// uni.createVideoContext(this.dataList[this.k].id,this).pause();//暂停以后继续播放
// }
// --------------- ending
}, },
//点击播放&&暂停 //点击播放&&暂停
tapVideoHovers(state,event){ tapVideoHovers(state,event){
@ -715,21 +673,19 @@
src:item.filePath src:item.filePath
}; };
}); });
console.log("this.dataList",this.dataList)
// 3.播放当前视频 // 3.播放当前视频
setTimeout(()=>{ setTimeout(()=>{
this.isShow = true; this.isShow = true;
this.dataList[this.k].isplay = false this.dataList[this.k].isplay = true
this.dataList[this.k].playIng = true this.dataList[this.k].playIng = true
setTimeout(()=>{ setTimeout(()=>{
this.dataList[this.k].state = 'pause'; this.dataList[this.k].state = 'pause';
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0) uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause() uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
audo.src = this.dataList[this.k].src; audo.src = this.dataList[this.k].src;
audo.play()
},500) },500)
},200) },200)
console.log("this.dataList",this.dataList)
this.videoID = this.dataList[this.k].id this.videoID = this.dataList[this.k].id
} else { } else {
uni.showToast({ uni.showToast({
@ -738,35 +694,6 @@
}) })
} }
}); });
// uni.request({
// url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
// method: 'POST',
// data:{
// info: 'get_video'
// },
// success: (res) => {
// this.isShow = false;
// var msg = res.data.data
// // 2.这里把视频添加到视频列表
// for (let i = 0; i < msg.length; i++) {
// this.dataList.push(msg[i])
// }
// // 3.播放当前视频
// setTimeout(()=>{
// this.isShow = true;
// this.dataList[this.k].isplay = true
// this.dataList[this.k].playIng = true
// setTimeout(()=>{
// uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
// uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
// this.dataList[this.k].state = 'pause';
// audo.src = this.dataList[this.k].src;
// },500)
// },200)
// this.videoID = this.dataList[this.k].id
// }
// })
}, },
share(){ share(){
uni.showToast({ uni.showToast({