提交 46130f6c 编写于 作者: DCloud_JSON's avatar DCloud_JSON

修复 部分情况下竖划视频,会存在多个视频一起播放的情况

上级 40efdf7f
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i"> <swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
<video ref="video" class="video-box" objectFit="cover" :id="item._id" @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video> <video ref="video" class="video-box" objectFit="cover" :id="item._id" @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
<view class="video-cover" @click="changeState(i)"> <view class="video-cover" @click="changeState(i)">
<image v-if="state[i] === 'onPause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image> <image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
</view> </view>
<view class="video-info" v-if="0"> <view class="video-info" v-if="0">
<text class="video-info-text">容器:第 {{i}} 个</text> <text class="video-info-text">容器:第 {{i}} 个</text>
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
<script> <script>
import { VideoNode } from "uts.sdk.modules.DCloudUniVideo"; import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
type ListItem = { _id : string, content : string, src : string, poster_src : string } type ListItem = { _id : string, content : string, src : string, poster_src : string }
let page : number = 0; let page : number = 0,
currentPageIsShow : boolean = true;
export default { export default {
components: {}, components: {},
...@@ -72,7 +73,7 @@ ...@@ -72,7 +73,7 @@
this.state.forEach((val : string, index : number) => { this.state.forEach((val : string, index : number) => {
if (index === current) { if (index === current) {
this.doPlay(current) this.doPlay(current)
} else if (val === 'onPlay') { } else {
// 除了选中的其他已经播放的都需要停止 // 除了选中的其他已经播放的都需要停止
this.doStop(index) this.doStop(index)
console.log('index:' + index + '已被执行停止'); console.log('index:' + index + '已被执行停止');
...@@ -84,9 +85,20 @@ ...@@ -84,9 +85,20 @@
// 一启动完成,就播放第一个 // 一启动完成,就播放第一个
this.doPlay(0) this.doPlay(0)
}, },
onShow(){
currentPageIsShow = true
},
onHide() {
currentPageIsShow = false
console.log('pages-onHide');
this.doPause(this.current)
},
onUnload() {
this.doPause(this.current)
},
methods: { methods: {
changeState(index : number) { changeState(index : number) {
if (this.state[index] === 'onPlay') { if (this.state[index] === 'play') {
this.doPause(index) this.doPause(index)
} else { } else {
this.doPlay(current) this.doPlay(current)
...@@ -113,12 +125,16 @@ ...@@ -113,12 +125,16 @@
console.log("doPause video-" + index); console.log("doPause video-" + index);
}, },
onPause(index : number) { onPause(index : number) {
this.state[index] = 'onPause' this.state[index] = 'pause'
console.log('onPause', index); console.log('onPause', index);
}, },
onPlay(index : number) { onPlay(index : number) {
this.state[index] = 'onPlay' if(this.current != index || !currentPageIsShow){
this.onPause(index)
}else{
this.state[index] = 'play'
console.log('onPlay', index); console.log('onPlay', index);
}
}, },
getData() : ListItem[] { getData() : ListItem[] {
let videoUrlList = [ let videoUrlList = [
...@@ -163,7 +179,7 @@ ...@@ -163,7 +179,7 @@
}, },
complete(result) { complete(result) {
console.log('navigateBack complete', result.errMsg) console.log('navigateBack complete', result.errMsg)
}, }
}) })
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册