|
|
@@ -1,26 +1,72 @@
|
|
|
<template name="vodShort">
|
|
|
- <view class="swiper">
|
|
|
- <video
|
|
|
- :src="item.video"
|
|
|
- preload
|
|
|
- show-play-btn="true"
|
|
|
- controls="false"
|
|
|
- loop="true"
|
|
|
- :id="`video_${item.id}`"
|
|
|
- objectFit="fill"
|
|
|
- :enable-progress-gesture="false"
|
|
|
- @click="play"
|
|
|
- ref="video_url"
|
|
|
- play-btn-position="center"
|
|
|
- class="video"
|
|
|
- :poster="item.pic"
|
|
|
- @timeupdate="timeupdate">
|
|
|
- </video>
|
|
|
+ <view>
|
|
|
+ <swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVideo">
|
|
|
+ <swiper-item v-for="(v, k) in item.text">
|
|
|
|
|
|
- <cover-image
|
|
|
- class="play"
|
|
|
- @tap="play"
|
|
|
- src="../../../static/video/play.png"></cover-image>
|
|
|
+ <video
|
|
|
+ :src="v.video"
|
|
|
+ preload
|
|
|
+ show-play-btn="true"
|
|
|
+ controls="false"
|
|
|
+ v
|
|
|
+ loop="true"
|
|
|
+ :id="`video_${v.order}`"
|
|
|
+ objectFit="fill"
|
|
|
+ :enable-progress-gesture="false"
|
|
|
+ @click="clickVideo"
|
|
|
+ ref="video_url"
|
|
|
+ play-btn-position="center"
|
|
|
+ class="video"
|
|
|
+ :poster="v.pic"
|
|
|
+ @timeupdate="timeupdate">
|
|
|
+ </video>
|
|
|
+
|
|
|
+ <cover-image
|
|
|
+ class="play" v-if="show_play"
|
|
|
+ @tap="videoPlay"
|
|
|
+ src="../../../static/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"
|
|
|
+ class="avater img"
|
|
|
+ @click.stop="tapAvater"></cover-image>
|
|
|
+
|
|
|
+ <text class="right-follow">+</text>
|
|
|
+ <cover-image
|
|
|
+ style="position:relative;top:-20upx;"
|
|
|
+ :src="up ? '../../../static/video/axc.png' : '../../../static/video/bed.png'"
|
|
|
+ class="img-left" @click.stop="tapLove"></cover-image>
|
|
|
+
|
|
|
+ <text class="right-text">1</text>
|
|
|
+ <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"
|
|
|
+ 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>
|
|
|
+
|
|
|
+ <cover-view class="progressBar" :animation="animationData" ></cover-view>
|
|
|
+
|
|
|
+
|
|
|
+ </cover-view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -34,9 +80,39 @@ export default {
|
|
|
value : null
|
|
|
},
|
|
|
},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ up: false,
|
|
|
+ time: 0,
|
|
|
+ barWidth:0,
|
|
|
+ animationData: {},
|
|
|
+ times:null,
|
|
|
+ play: false,
|
|
|
+ show_play:false,
|
|
|
+ current_index: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ setTimeout(()=>{
|
|
|
+ play = true;
|
|
|
+ this.videoPlay();
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
methods:{
|
|
|
- play() {
|
|
|
- let video_id = this.video_list[this.current_index].video_id;
|
|
|
+ timeupdate(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();
|
|
|
+ },
|
|
|
+ videoPlay() {
|
|
|
+ console.info(this.item.text);
|
|
|
+ let video_id = this.item.text[this.current_index].order;
|
|
|
|
|
|
if (play) {
|
|
|
console.log('播放视频',`video_${video_id}`);
|
|
|
@@ -52,14 +128,52 @@ export default {
|
|
|
play = true;
|
|
|
}
|
|
|
},
|
|
|
- pause() {
|
|
|
- let video_id = this.video_list[this.current_index].video_id;
|
|
|
+ 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){
|
|
|
+
|
|
|
+ // 暂停之前的视频
|
|
|
+ this.videoPause();
|
|
|
+ this.current_index = e.detail.current;
|
|
|
+ console.log(e.detail.current);
|
|
|
+ // 播放现在的视频
|
|
|
+ this.videoPlay();
|
|
|
+
|
|
|
+ // 判断是否第一条
|
|
|
+ if( e.detail.current == 0 ){
|
|
|
+ console.log('到顶了');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 判断是否最后一条
|
|
|
+ if( e.detail.current == this.item.text.length-1 ){
|
|
|
+ console.log('到底了');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ tapMsg(e) {
|
|
|
+ console.log(5, e);
|
|
|
+ },
|
|
|
+ tapShare(e) {
|
|
|
+ console.log(6, e);
|
|
|
+ },
|
|
|
+ tapLove(e) {
|
|
|
+ // item.is_dianzan
|
|
|
+ this.item.text[this.current_index].is_dianzan = !this.item.text[this.current_index].is_dianzan;
|
|
|
+ console.log(7, e);
|
|
|
+ }
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ play(newVal, oldVal) {
|
|
|
+ this.videoPlay();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -83,5 +197,102 @@ export default {
|
|
|
left: 40vw;
|
|
|
top: 40vh;
|
|
|
opacity: 0.5;
|
|
|
+}
|
|
|
+.progressBar {
|
|
|
+ border-radius: 2upx;
|
|
|
+ height: 4upx;
|
|
|
+ background-color: #FF4500;
|
|
|
+ z-index: 999999;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 68rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-view-left {
|
|
|
+ position: absolute;
|
|
|
+ margin-left: 20upx;
|
|
|
+ width: 580upx;
|
|
|
+ bottom: 110upx;
|
|
|
+ z-index: 9999;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.left-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-view-right {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ right: 30upx;
|
|
|
+ z-index: 9999;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.avater {
|
|
|
+ border-radius: 50%;
|
|
|
+ border-width: 2px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.img {
|
|
|
+ height: 90upx;
|
|
|
+ width: 90upx;
|
|
|
+ margin-bottom: 110upx;
|
|
|
+}
|
|
|
+
|
|
|
+.img-left {
|
|
|
+ width: 80upx;
|
|
|
+ height: 66upx;
|
|
|
+ padding-left: 4px;
|
|
|
+}
|
|
|
+.right-follow {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ top: 75upx;
|
|
|
+ left: 28upx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 34upx;
|
|
|
+ height: 34upx;
|
|
|
+ background-color: #f12f5b;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34upx;
|
|
|
+ border-radius: 17upx;
|
|
|
+}
|
|
|
+
|
|
|
+.right-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 11px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 40upx;
|
|
|
+}
|
|
|
+.musicIcon {
|
|
|
+ margin-top: 40upx;
|
|
|
+}
|
|
|
+@keyframes rotating {
|
|
|
+ from {
|
|
|
+ transform: rotate(0);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+.view-left-text-content {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.view-left-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.text-content-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 50upx;
|
|
|
+ height: 100upx;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
</style>
|
dever