yangjun
/
sadjv3_user
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
sadjv3_user/pages/videoCircle/index.vue

407 lines
9.1 KiB
Vue
Raw Normal View History

测试
2024-06-12 15:52:21 +08:00
<template>
<view style="height: 100vh;flex:1;width:100%">
修改
2024-07-10 10:28:45 +08:00
<view class="com-line">
<image style="width: 380rpx; height: 330rpx;" src="../../static/coming.png" mode=""></image>
<view class="com-text">系统建设中,敬请期待！</view>
新加 约到店 商城
2024-07-09 11:02:01 +08:00
</view>
<swiper v-if="videoShow==true" @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
测试
2024-06-12 15:52:21 +08:00
class="list">
<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
新加 约到店 商城
2024-07-09 11:02:01 +08:00
:show-center-play-btn='false' :controls="false" object-fit="cover" :autoplay='false' loop
测试
2024-06-12 15:52:21 +08:00
src="https://media.w3.org/2010/05/sintel/trailer.mp4">
<cover-view class="back" v-if="!item.active">
<cover-image class="pauseIcon" src="../../static/bofang.png"></cover-image>
</cover-view>
<cover-view class="iconList">
<cover-view class="iconListClass">
<cover-image class="icon" src="../../static/dituzhaoren3.png"></cover-image>
<cover-view>
<text class="context">12.5w</text>
</cover-view>
</cover-view>
<cover-view class="iconListClass">
<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
<cover-view>
<text class="context">12.5w</text>
</cover-view>
</cover-view>
<cover-view class="iconListClass">
<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
<cover-view style="white-space: nowrap;lines:1;">
<text class="context">12.5w</text>
</cover-view>
</cover-view>
</cover-view>
<cover-view class="formation">
<cover-view style="display: flex;align-items: center;flex-direction: row;">
<cover-image class="header"
src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
<cover-view>
<text class="context">作者</text>
</cover-view>
</cover-view>
<cover-view>
<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
</cover-view>
</cover-view>
<cover-view class="duration">
<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
</cover-view>
</video>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
新加 约到店 商城
2024-07-09 11:02:01 +08:00
videoShow:false,
测试
2024-06-12 15:52:21 +08:00
// 视频下标，记录播放到第几个
index: 0,
// 数据
allList: [{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 0
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 1
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 2
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 3
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 4
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 5
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 6
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 7
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 8
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 9
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 10
},
],
list: [{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 0
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 1
},
{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
active: false,
currentTime: 0,
duration: 121,
percent: 0,
id: 2
},
],
// 播放器下标
activeIndex: 0,
// 记录上一个播放器下标
oldActiveIndex: 0
}
},
onReady() {},
methods: {
qiehuan(e) {
if (this.oldActiveIndex < e.detail.current) {
if (this.oldActiveIndex - e.detail.current != -2) {
console.log('上滑');
this.index++
this.next(e.detail.current)
} else {
console.log("下滑");
this.pre(e.detail.current)
this.index--
}
} else if (this.oldActiveIndex > e.detail.current) {
if (this.oldActiveIndex - e.detail.current != 2) {
console.log('下滑');
this.pre(e.detail.current)
this.index--
} else {
console.log("上滑");
this.index++
this.next(e.detail.current)
}
}
this.$nextTick(() => {
this.oldActiveIndex = e.detail.current
})
},
next(index) {
if (Object.is(this.index, 2)) {
}
if (Object.is(index, 0)) {
this.list[1] = this.allList[this.index + 1]
}
if (Object.is(index, 1)) {
this.list[2] = this.allList[this.index + 1]
}
if (Object.is(index, 2)) {
this.list[0] = this.allList[this.index + 1]
}
this.play(this.activeIndex)
},
pre(index) {
if (Object.is(this.index, 2)) {
}
if (Object.is(index, 0)) {
this.list[2] = this.allList[this.index - 2]
}
if (Object.is(index, 1)) {
this.list[0] = this.allList[this.index - 2]
}
if (Object.is(index, 2)) {
this.list[1] = this.allList[this.index - 2]
}
this.play(this.activeIndex)
},
play(index) {
for (let i = 0; i < 3; i++) {
uni.createVideoContext(`Video${i}`, this).pause()
}
this.videoContext = uni.createVideoContext('Video' + index, this)
this.list[index].active = true
this.videoContext.play()
},
swiper(e) {
// console.log(e.detail.current);
this.activeIndex = e.detail.current
// this.play(e.detail.current)
// this.play(this.activeIndex)
},
end(e) {
this.activeIndex++
if (Object.is(this.activeIndex, 3)) {
this.activeIndex = 0
}
},
long(e, item, index) {
item.currentTime = e.detail.currentTime
item.percent = (e.detail.currentTime / e.detail.duration) * 750
},
pause(item, index) {
this.videoContext = uni.createVideoContext('Video' + index, this)
if (item.active) {
this.videoContext.pause()
} else {
this.videoContext.play()
}
this.list[index].active = !this.list[index].active
},
videoClick() {
}
}
}
</script>
<style scoped>
修改
2024-07-10 10:28:45 +08:00
.com-line{
width:80%;
margin: 45% auto;
text-align: center;
}
.com-text{
font-size: 26rpx;
color: #999;
}
测试
2024-06-12 15:52:21 +08:00
.list {
background-color: black;
flex: 1;
width:100%;
height: 100%;
}
.video {
flex: 1;
width: 100%;
height: 97%;
}
.back {
background-color: rgba(225, 225, 225, 0.3);
flex: 1;
width: 100%;
justify-content: center;
align-items: center;
}
.pauseIcon {
position: absolute;
left: calc(50% - 25px);
top: calc(50% - 30px);
width: 50px;
height: 60px;
}
.duration {
position: absolute;
left: 0px;
bottom: 0px;
width: 100vw;
height: 3px;
}
.long {
height: 100%;
background-color: white;
}
.formation {
flex-direction: column;
position: absolute;
left: 10px;
bottom: 10px;
width: calc(100% - 80px);
display: flex;
}
.header {
width: 40px;
height: 40px;
border-radius: 50%;
}
.iconListClass {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.context {
white-space: nowrap;
width: 100rpx;
color: white;
margin-left: 5px;
font-size: 13px;
font-weight: bold;
}
.title {
width: 600rpx;
margin-top: 10px;
color: white;
margin-left: 5px;
font-size: 13px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
lines: 1;
}
.iconList {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
position: absolute;
right: 10px;
bottom: 161px;
width: 70px;
}
.icon {
margin-top: 10px;
width: 20px;
height: 20px;
}
/deep/.uni-cover-view{
margin-top: 10px;
}
.context {
text-align: center;
color: white;
font-size: 13px;
}
</style>