|
|
@@ -1,41 +1,37 @@
|
|
|
<template name="vodShort">
|
|
|
<view>
|
|
|
- <swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVideo">
|
|
|
- <swiper-item v-for="(v, k) in item.text">
|
|
|
+ <swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="change">
|
|
|
+ <swiper-item v-for="(v, k) in item">
|
|
|
|
|
|
<video
|
|
|
:src="v.video"
|
|
|
- preload
|
|
|
- :muted="muted"
|
|
|
- show-play-btn="true"
|
|
|
- controls="false"
|
|
|
- v
|
|
|
- loop="true"
|
|
|
- :id="`video_${v.order}`"
|
|
|
+ preload
|
|
|
+ :show-play-btn="true"
|
|
|
+ :show-center-play-btn="false"
|
|
|
+ :controls="false"
|
|
|
+ :loop="true"
|
|
|
+ :id="id(k)"
|
|
|
objectFit="fill"
|
|
|
:enable-progress-gesture="false"
|
|
|
- @click="clickVideo"
|
|
|
+ @click="start"
|
|
|
ref="video_url"
|
|
|
play-btn-position="center"
|
|
|
class="video"
|
|
|
:poster="v.pic"
|
|
|
- @timeupdate="timeupdate">
|
|
|
+ @timeupdate="update">
|
|
|
</video>
|
|
|
|
|
|
<cover-image
|
|
|
class="play" v-if="show_play"
|
|
|
- @tap="videoPlay"
|
|
|
- src="../../static/video/play.png"></cover-image>
|
|
|
+ @tap="start"
|
|
|
+ src="@/static/icon/ico-video-play.png"></cover-image>
|
|
|
|
|
|
<cover-view class="cover-view-left">
|
|
|
- <text class="view-left-text">@{{ v.name }}</text>
|
|
|
- <view class="view-left-text-content">
|
|
|
- <text class="text-content-text">{{ v.name }}</text>
|
|
|
- </view>
|
|
|
+
|
|
|
</cover-view>
|
|
|
|
|
|
- <cover-view class="cover-view-right">
|
|
|
- <cover-image :src="item.pic"
|
|
|
+ <cover-view class="cover-view-right" v-if="showInfo">
|
|
|
+ <cover-image :src="item[0].pic"
|
|
|
class="avater img"
|
|
|
@click.stop="tapAvater"></cover-image>
|
|
|
|
|
|
@@ -46,15 +42,15 @@
|
|
|
class="img-left" @click.stop="tapLove"></cover-image>
|
|
|
|
|
|
<text class="right-text">1</text>
|
|
|
- <cover-image src="../../static/video/ay2.png"
|
|
|
+ <cover-image src="@/static/video/ay2.png"
|
|
|
style="height: 80upx;" class="img-left" @click.stop="tapMsg"></cover-image>
|
|
|
|
|
|
<text class="right-text">10</text>
|
|
|
- <cover-image src="../../static/video/b6p.png"
|
|
|
+ <cover-image src="@/static/video/b6p.png"
|
|
|
style="height: 76upx;" class="img-left" @click.stop="tapShare"></cover-image>
|
|
|
|
|
|
<text class="right-text">10</text>
|
|
|
- <cover-image src="../../static/video/changpian.png" class="musicIcon img">
|
|
|
+ <cover-image src="@/static/video/changpian.png" class="musicIcon img">
|
|
|
</cover-image>
|
|
|
|
|
|
<cover-view class="progressBar" :animation="animationData" ></cover-view>
|
|
|
@@ -72,12 +68,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-var play = false;
|
|
|
+var play = true;
|
|
|
export default {
|
|
|
name: "vodShort",
|
|
|
props: {
|
|
|
+ config : {
|
|
|
+ type : Object,
|
|
|
+ value : null
|
|
|
+ },
|
|
|
item : {
|
|
|
- type : Object,
|
|
|
+ type : Array,
|
|
|
value : null
|
|
|
},
|
|
|
},
|
|
|
@@ -88,65 +88,65 @@ export default {
|
|
|
barWidth:0,
|
|
|
animationData: {},
|
|
|
times:null,
|
|
|
- play: false,
|
|
|
- show_play:false,
|
|
|
+ show_play:true,
|
|
|
muted: true,
|
|
|
- current_index: 0
|
|
|
+ current_index: 0,
|
|
|
+ showInfo: false,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
+ /*
|
|
|
+ 进入页面自动播放，已取消
|
|
|
setTimeout(()=>{
|
|
|
play = true;
|
|
|
- this.videoPlay();
|
|
|
+ this.start();
|
|
|
},1000)
|
|
|
+ */
|
|
|
},
|
|
|
methods:{
|
|
|
- timeupdate(event) {
|
|
|
+ //获取video_id
|
|
|
+ id(index) {
|
|
|
+ var video_id = this.item[index].id;
|
|
|
+ return 'video_' + video_id;
|
|
|
+ },
|
|
|
+ update(event) {
|
|
|
let t_w = parseInt(this.width);
|
|
|
this.duration = event.detail.duration;
|
|
|
this.time = event.detail.currentTime;
|
|
|
let width = (this.time / this.duration) * t_w;
|
|
|
let w = 0;
|
|
|
},
|
|
|
- clickVideo() {
|
|
|
- // console.log('单视频点击事件');
|
|
|
- this.videoPlay();
|
|
|
+ start() {
|
|
|
+ this.config.stop[this.config.page] = this;
|
|
|
+ this.handle(play);
|
|
|
},
|
|
|
- videoPlay() {
|
|
|
- console.info(this.item.text);
|
|
|
- let video_id = this.item.text[this.current_index].order;
|
|
|
-
|
|
|
- if (play) {
|
|
|
- console.log('播放视频',`video_${video_id}`);
|
|
|
- this.muted = false;
|
|
|
- this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
|
|
|
+ stop() {
|
|
|
+ this.handle(false);
|
|
|
+ },
|
|
|
+ handle(state) {
|
|
|
+ var id = this.id(this.current_index);
|
|
|
+ if (state) {
|
|
|
+ this.videoCtx = uni.createVideoContext(id, this);
|
|
|
this.videoCtx.play();
|
|
|
+ this.muted = false;
|
|
|
this.show_play = false;
|
|
|
play = false;
|
|
|
- } else {
|
|
|
- console.log('暂停视频',`video_${video_id}`);
|
|
|
- this.muted = true;
|
|
|
- this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
|
|
|
+ //console.info('播放', id, this.current_index);
|
|
|
+ } else if(!play) {
|
|
|
+ this.videoCtx = uni.createVideoContext(id, this);
|
|
|
this.videoCtx.pause();
|
|
|
+ this.muted = true;
|
|
|
this.show_play = true;
|
|
|
play = true;
|
|
|
+ //console.info('暂停', id, this.current_index);
|
|
|
}
|
|
|
},
|
|
|
- videoPause() {
|
|
|
- let video_id = this.item.text[this.current_index].order;
|
|
|
- this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
|
|
|
- this.videoCtx.pause();
|
|
|
- this.show_play = true;
|
|
|
- play = true;
|
|
|
- },
|
|
|
- changeVideo(e){
|
|
|
-
|
|
|
+ change(e){
|
|
|
// 暂停之前的视频
|
|
|
- this.videoPause();
|
|
|
+ this.stop();
|
|
|
this.current_index = e.detail.current;
|
|
|
- console.log(e.detail.current);
|
|
|
// 播放现在的视频
|
|
|
- this.videoPlay();
|
|
|
+ this.start();
|
|
|
|
|
|
// 判断是否第一条
|
|
|
if( e.detail.current == 0 ){
|
|
|
@@ -155,7 +155,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
// 判断是否最后一条
|
|
|
- if( e.detail.current == this.item.text.length-1 ){
|
|
|
+ if( e.detail.current == this.item.length-1 ){
|
|
|
console.log('到底了');
|
|
|
return false;
|
|
|
}
|
|
|
@@ -169,13 +169,13 @@ export default {
|
|
|
},
|
|
|
tapLove(e) {
|
|
|
// item.is_dianzan
|
|
|
- this.item.text[this.current_index].is_dianzan = !this.item.text[this.current_index].is_dianzan;
|
|
|
+ this.item[this.current_index].is_dianzan = !this.item[this.current_index].is_dianzan;
|
|
|
console.log(7, e);
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
play(newVal, oldVal) {
|
|
|
- this.videoPlay();
|
|
|
+ this.start();
|
|
|
}
|
|
|
}
|
|
|
}
|
dever