|
|
|
@ -7,8 +7,29 @@ |
|
|
|
v-show="item.material_type == 0 && itemIndex == index" |
|
|
|
:src="linkUrl" |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<video v-if="item.material_type == 1 && itemIndex == index" :src="linkUrl" :autoplay="autoplay" :controls="false" :enable-progress-gesture="false" object-fit="contain" @ended="videoPlayEnd"> |
|
|
|
></image> |
|
|
|
<!-- :autoplay="autoplay" --> |
|
|
|
<video |
|
|
|
:id="'video' + index" |
|
|
|
v-if="item.material_type == 1 && itemIndex == index" |
|
|
|
:src="linkUrl" |
|
|
|
:controls="false" |
|
|
|
:autoplay="autoplay" |
|
|
|
:enable-progress-gesture="false" |
|
|
|
:enable-play-gesture="false" |
|
|
|
object-fit="contain" |
|
|
|
show-center-play-btn="false" |
|
|
|
@play="playEvent" |
|
|
|
@ended="videoPlayEnd" |
|
|
|
@waiting="waitingVideo" |
|
|
|
@loadeddata="loading" |
|
|
|
@timeupdate="timeUpdate" |
|
|
|
initial-time="initial_time" |
|
|
|
> |
|
|
|
<!-- <cover-view |
|
|
|
style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;"> |
|
|
|
<image style="width: 40px;height: 40px;"></image> |
|
|
|
</cover-view> --> |
|
|
|
</video> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -64,6 +85,8 @@ export default { |
|
|
|
itemLength: [], |
|
|
|
flagIndex: 0, |
|
|
|
infoTxt: '', |
|
|
|
video_real_time: 0, |
|
|
|
nitial_time: '', |
|
|
|
// 刚触碰的时间 |
|
|
|
startTime: 0, |
|
|
|
// 刚触碰的位置 |
|
|
|
@ -76,7 +99,7 @@ export default { |
|
|
|
isAutoSwitch: true, |
|
|
|
moveX: 0, //滑动的x轴距离 |
|
|
|
moveY: 0, //滑动的y轴距离 |
|
|
|
like_state: 0, //-1：左滑，0：没滑动，1：右滑 |
|
|
|
like_state: 0 //-1：左滑，0：没滑动，1：右滑 |
|
|
|
}; |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
@ -90,80 +113,83 @@ export default { |
|
|
|
// 初始化 |
|
|
|
this.changIndex(); |
|
|
|
}, |
|
|
|
onReady: function(res) { |
|
|
|
const videoId = 'video'+this.itemIndex |
|
|
|
this.videoCtx = uni.createVideoContext(videoId) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.atuo(); |
|
|
|
this.auto(); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// this.countdown(); |
|
|
|
this.changeMaterial(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 素材切换 |
|
|
|
touchStart(event) { |
|
|
|
this.startX = event.touches[0].pageX; |
|
|
|
this.startY = event.touches[0].pageY; |
|
|
|
console.log('开始触摸：', this.startX, this.startY); |
|
|
|
}, |
|
|
|
touchMove(event) { |
|
|
|
|
|
|
|
var currentX = event.touches[0].pageX; |
|
|
|
var currentY = event.touches[0].pageY; |
|
|
|
var moveX = currentX - this.startX; |
|
|
|
var moveY = currentY - this.startY; |
|
|
|
var text = ''; |
|
|
|
var state = 0; //-1：左滑，0：没滑动，1：右滑 |
|
|
|
// //左右方向滑动 |
|
|
|
if (Math.abs(moveX) > Math.abs(moveY)) { |
|
|
|
if (moveX < -10) { |
|
|
|
text = '左滑'; |
|
|
|
state = 1; |
|
|
|
} else if (moveX > 10) { |
|
|
|
text = '右滑'; |
|
|
|
state = -1; |
|
|
|
} |
|
|
|
} else { //上下方向滑动 |
|
|
|
if (moveY < 0) { |
|
|
|
text = '上滑'; |
|
|
|
state = -2; |
|
|
|
} else if (moveY > 0){ |
|
|
|
text = '下滑'; |
|
|
|
state = 2; |
|
|
|
} |
|
|
|
this.startX = event.touches[0].pageX; |
|
|
|
this.startY = event.touches[0].pageY; |
|
|
|
console.log('开始触摸：', this.startX, this.startY); |
|
|
|
}, |
|
|
|
touchMove(event) { |
|
|
|
let currentX = event.touches[0].pageX; |
|
|
|
let currentY = event.touches[0].pageY; |
|
|
|
let moveX = currentX - this.startX; |
|
|
|
let moveY = currentY - this.startY; |
|
|
|
let text = ''; |
|
|
|
let state = 0; //-1：左滑，0：没滑动，1：右滑 |
|
|
|
// //左右方向滑动 |
|
|
|
if (Math.abs(moveX) > Math.abs(moveY)) { |
|
|
|
if (moveX < -10) { |
|
|
|
text = '左滑'; |
|
|
|
state = 1; |
|
|
|
} else if (moveX > 10) { |
|
|
|
text = '右滑'; |
|
|
|
state = -1; |
|
|
|
} |
|
|
|
this.like_state = state; |
|
|
|
this.moveX = moveX; |
|
|
|
this.moveY = moveY; |
|
|
|
console.log('开始滑动：', this.moveX, this.moveY, this.like_state); |
|
|
|
}, |
|
|
|
touchEnd(event) { |
|
|
|
console.log(`移动距离:${Math.abs(this.moveX)}`) |
|
|
|
// if (Math.abs(this.moveX) > 60 ) { |
|
|
|
// console.log(this.like_state) |
|
|
|
// if(this.like_state == -1){ |
|
|
|
// this.isAutoSwitch = false; |
|
|
|
// this.itemIndex--; |
|
|
|
// this.flagIndex--; |
|
|
|
// this.changIndex() |
|
|
|
// }else if(this.like_state == 1){ |
|
|
|
// this.itemIndex++; |
|
|
|
// this.flagIndex++; |
|
|
|
// this.isAutoSwitch = true; |
|
|
|
// this.changIndex() |
|
|
|
// } |
|
|
|
// } |
|
|
|
if(Math.abs(this.moveY) > 60){ |
|
|
|
innerAudioContext.stop(); |
|
|
|
if(this.like_state == -2){ |
|
|
|
this.itemIndex++; |
|
|
|
this.flagIndex++; |
|
|
|
this.isAutoSwitch = true; |
|
|
|
}else if(this.like_state == 2){ |
|
|
|
this.itemIndex--; |
|
|
|
this.flagIndex--; |
|
|
|
this.isAutoSwitch = false; |
|
|
|
} |
|
|
|
this.changIndex() |
|
|
|
} else { |
|
|
|
//上下方向滑动 |
|
|
|
if (moveY < 0) { |
|
|
|
text = '上滑'; |
|
|
|
state = -2; |
|
|
|
} else if (moveY > 0) { |
|
|
|
text = '下滑'; |
|
|
|
state = 2; |
|
|
|
} |
|
|
|
} |
|
|
|
this.like_state = state; |
|
|
|
this.moveX = moveX; |
|
|
|
this.moveY = moveY; |
|
|
|
console.log('开始滑动：', this.moveX, this.moveY, this.like_state); |
|
|
|
}, |
|
|
|
touchEnd(event) { |
|
|
|
console.log(`移动距离:${Math.abs(this.moveX)}`); |
|
|
|
// if (Math.abs(this.moveX) > 60 ) { |
|
|
|
// if (this.like_state == 1) { |
|
|
|
// this.itemIndex++; |
|
|
|
// this.flagIndex++; |
|
|
|
// this.isAutoSwitch = true; |
|
|
|
// } else if (this.like_state == -1) { |
|
|
|
// this.itemIndex--; |
|
|
|
// this.flagIndex--; |
|
|
|
// this.isAutoSwitch = false; |
|
|
|
// } |
|
|
|
// this.changIndex(); |
|
|
|
// } |
|
|
|
if (Math.abs(this.moveY) > 60) { |
|
|
|
if (this.like_state == -2) { |
|
|
|
this.itemIndex++; |
|
|
|
this.flagIndex++; |
|
|
|
this.isAutoSwitch = true; |
|
|
|
} else if (this.like_state == 2) { |
|
|
|
this.itemIndex--; |
|
|
|
this.flagIndex--; |
|
|
|
this.isAutoSwitch = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
this.changIndex(); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 自动切换 |
|
|
|
changeMaterial() { |
|
|
|
const _this = this; |
|
|
|
clearInterval(_this.timer); |
|
|
|
@ -178,18 +204,18 @@ export default { |
|
|
|
}, |
|
|
|
changIndex() { |
|
|
|
const _this = this; |
|
|
|
_this.linkUrl = '' |
|
|
|
if (_this.itemIndex == this.show_materials.length) { |
|
|
|
// clearInterval(_this.timer); |
|
|
|
this.itemIndex = 0; |
|
|
|
this.flagIndex = 0; |
|
|
|
this.contentIndex = 0; |
|
|
|
innerAudioContext.stop(); |
|
|
|
} |
|
|
|
if(this.itemIndex == -1){ |
|
|
|
this.itemIndex = this.show_materials.length-1 |
|
|
|
this.contentIndex = this.itemLength.length-1 |
|
|
|
this.flagIndex = this.itemLength[this.contentIndex] |
|
|
|
} |
|
|
|
if (this.itemIndex == -1) { |
|
|
|
this.itemIndex = this.show_materials.length - 1; |
|
|
|
this.contentIndex = this.itemLength.length - 1; |
|
|
|
this.flagIndex = this.itemLength[this.contentIndex]; |
|
|
|
} |
|
|
|
if (this.flagIndex == 0) { |
|
|
|
this.contentIndex--; |
|
|
|
this.flagIndex = this.itemLength[this.contentIndex]; |
|
|
|
@ -204,7 +230,7 @@ export default { |
|
|
|
this.flagIndex = 0; |
|
|
|
this.contentIndex = 0; |
|
|
|
} else { |
|
|
|
if(this.isAutoSwitch){ |
|
|
|
if (this.isAutoSwitch) { |
|
|
|
if (this.flagIndex == this.itemLength[this.contentIndex]) { |
|
|
|
this.flagIndex = 0; |
|
|
|
this.contentIndex++; |
|
|
|
@ -214,51 +240,129 @@ export default { |
|
|
|
if (this.materialsCont[this.contentIndex].bgm_main) { |
|
|
|
this.audioSrc = this.materialsCont[this.contentIndex].bgm_main; |
|
|
|
this.audioName = this.materialsCont[this.contentIndex].bgm_name; |
|
|
|
console.log('audioSrc', this.audioSrc); |
|
|
|
console.log('audioName', this.audioName); |
|
|
|
} |
|
|
|
} |
|
|
|
innerAudioContext = uni.getBackgroundAudioManager(); |
|
|
|
this.playVoice(this.audioSrc); |
|
|
|
if (this.show_materials[this.itemIndex].material_type == 1) { |
|
|
|
innerAudioContext.stop(); |
|
|
|
innerAudioContext.destroy() |
|
|
|
} |
|
|
|
}, |
|
|
|
// 视频 |
|
|
|
videoPlayEnd() { |
|
|
|
console.log('end-video') |
|
|
|
this.itemIndex++; |
|
|
|
this.flagIndex++; |
|
|
|
this.changIndex(); |
|
|
|
}, |
|
|
|
auto() { |
|
|
|
setTimeout(()=>{ |
|
|
|
this.autoplay = true; |
|
|
|
},500) |
|
|
|
}, |
|
|
|
playEvent(e) { |
|
|
|
console.log("play_video") |
|
|
|
console.log(e); |
|
|
|
let currentId = e.target.id; // 获取当前视频id |
|
|
|
console.log('currentId', currentId); |
|
|
|
this.videoCtx = uni.createVideoContext(currentId); |
|
|
|
// innerAudioContext.destroy() |
|
|
|
// innerAudioContext.stop(); |
|
|
|
// innerAudioContext.src = '' |
|
|
|
}, |
|
|
|
loading(){ |
|
|
|
console.log('play_loading') |
|
|
|
}, |
|
|
|
waitingVideo(){ |
|
|
|
console.log('waiting-video') |
|
|
|
this.videoCtx.pause() |
|
|
|
}, |
|
|
|
timeupdateEvent(event) { |
|
|
|
// this.currentTime = event.detail.currentTime; |
|
|
|
console.log('timeupdateEvent') |
|
|
|
}, |
|
|
|
// 禁止拖动进度条快进 |
|
|
|
timeUpdate(e) { |
|
|
|
console.log(e) |
|
|
|
var isReady = 1; // 是否开启可以视频快进 1 禁止开启 |
|
|
|
//跳转到指定播放位置 initial-time 时间为秒 |
|
|
|
let that = this; |
|
|
|
//播放的总时长 |
|
|
|
var duration = e.detail.duration; |
|
|
|
//实时播放进度 秒数 |
|
|
|
var currentTime = parseInt(e.detail.currentTime); |
|
|
|
//当前视频进度 |
|
|
|
// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位 |
|
|
|
if (that.video_real_time == 0) { |
|
|
|
var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time); |
|
|
|
} else { |
|
|
|
var jump_time = parseInt(that.video_real_time); |
|
|
|
} |
|
|
|
if (isReady == 1) { |
|
|
|
if (currentTime > jump_time && currentTime - jump_time > 3) { |
|
|
|
// let videoContext = uni.createVideoContext(e.target.id); |
|
|
|
this.videoCtx.pause() |
|
|
|
this.videoCtx.seek(0); |
|
|
|
uni.showToast({ |
|
|
|
title: '未完整看完该视频，不能快进', |
|
|
|
icon: 'none', |
|
|
|
duration: 2000 |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
that.video_real_time = currentTime; //实时播放进度 |
|
|
|
}, |
|
|
|
// 音频 |
|
|
|
playVoice(src) { |
|
|
|
if (innerAudioContext != undefined) { |
|
|
|
innerAudioContext.stop(); |
|
|
|
} |
|
|
|
innerAudioContext = uni.createInnerAudioContext(); |
|
|
|
innerAudioContext = uni.getBackgroundAudioManager(); |
|
|
|
// #ifdef APP-PLUS |
|
|
|
innerAudioContext.stop(); |
|
|
|
innerAudioContext.src = src; |
|
|
|
console.log('src',src) |
|
|
|
innerAudioContext.autoplay = true; |
|
|
|
innerAudioContext.loop = true; |
|
|
|
innerAudioContext.onPlay(() => { |
|
|
|
this.infoTxt = ''; |
|
|
|
this.infoTxt = '开始播放'; |
|
|
|
console.log('开始播放'); |
|
|
|
innerAudioContext.src = this.audioSrc |
|
|
|
innerAudioContext.seek(0) |
|
|
|
console.log(plus.device.getVolume()) |
|
|
|
}); |
|
|
|
innerAudioContext.onError(res => { |
|
|
|
console.log(res.errMsg); |
|
|
|
console.log(res.errCode); |
|
|
|
innerAudioContext.stop(); |
|
|
|
innerAudioContext.src = '' |
|
|
|
// innerAudioContext.stop(); |
|
|
|
}); |
|
|
|
innerAudioContext.onPause(function() { |
|
|
|
console.log('onPause'); |
|
|
|
}); |
|
|
|
innerAudioContext.onPause(() => { |
|
|
|
innerAudioContext.onStop(() => { |
|
|
|
//暂停监听 |
|
|
|
this.infoTxt = '暂停'; |
|
|
|
console.log('暂停'); |
|
|
|
this.infoTxt = '停止'; |
|
|
|
console.log('停止'); |
|
|
|
innerAudioContext.src = '' |
|
|
|
// innerAudioContext.stop(); |
|
|
|
}); |
|
|
|
innerAudioContext.onEnded(() => { |
|
|
|
// 自然播放结束监听也需要更改isPause 开关状态 |
|
|
|
this.infoTxt = '音频自然播放结束事件'; |
|
|
|
console.log('音频自然播放结束事件'); |
|
|
|
innerAudioContext.stop(); |
|
|
|
// innerAudioContext.src = '' |
|
|
|
// innerAudioContext.destroy() |
|
|
|
console.log(this.itemIndex) |
|
|
|
console.log(this.audioSrc) |
|
|
|
innerAudioContext.src = this.audioSrc |
|
|
|
innerAudioContext.seek(0) |
|
|
|
innerAudioContext.play() |
|
|
|
}); |
|
|
|
}, |
|
|
|
atuo() { |
|
|
|
this.autoplay = true; |
|
|
|
// #endif |
|
|
|
}, |
|
|
|
countdown() { |
|
|
|
this.count = 6; |
|
|
|
@ -282,8 +386,6 @@ export default { |
|
|
|
background: #000; |
|
|
|
} |
|
|
|
.show-item { |
|
|
|
/* width: 100%; |
|
|
|
height: 100vh; */ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
@ -351,14 +453,14 @@ export default { |
|
|
|
border: 1px solid #333; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
.swiper{ |
|
|
|
.swiper { |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
.item{ |
|
|
|
.item { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.mask{ |
|
|
|
.mask { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
@ -366,7 +468,7 @@ export default { |
|
|
|
right: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(0,0,0,.3); |
|
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
.controls-title { |
|
|
|
@ -375,12 +477,12 @@ export default { |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
right: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(0,0,0,.3); |
|
|
|
text-align: center; |
|
|
|
color: #FFFFFF; |
|
|
|
border: 10px solid #fff; |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
border: 10px solid #fff; |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
</style> |
