|
|
@@ -1,80 +1,25 @@
|
|
|
<template name="vodShort">
|
|
|
<view>
|
|
|
<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVod">
|
|
|
- <swiper-item v-for="(v, k) in item">
|
|
|
-
|
|
|
- <video
|
|
|
- :src="v.video"
|
|
|
- preload
|
|
|
- :show-play-btn="true"
|
|
|
- :show-center-play-btn="false"
|
|
|
- :controls="false"
|
|
|
- :loop="true"
|
|
|
- :id="id(k)"
|
|
|
- objectFit="fill"
|
|
|
- :enable-progress-gesture="false"
|
|
|
- @click="start"
|
|
|
- ref="video_url"
|
|
|
- play-btn-position="center"
|
|
|
- class="video"
|
|
|
- :x5-playsinline="true"
|
|
|
- :playsinline="true"
|
|
|
- :webkit-playsinline="true"
|
|
|
- :x5-video-can-play-with-audio="true"
|
|
|
- x5-video-orientation="portraint"
|
|
|
- x-webkit-airplay="allow"
|
|
|
-
|
|
|
- >
|
|
|
- </video>
|
|
|
-
|
|
|
- <cover-image v-if="show_play_poster" class="poster" :src="v.pic">
|
|
|
- </cover-image>
|
|
|
-
|
|
|
- <cover-image
|
|
|
- class="ico-video-play" v-if="show_play"
|
|
|
- @tap="start"></cover-image>
|
|
|
+ <swiper-item v-for="(v, k) in item">
|
|
|
|
|
|
- <pos :item="v" :down="v.video"></pos>
|
|
|
+ <dever-video
|
|
|
+ :item="v"
|
|
|
+ :src="v.video"
|
|
|
+ :pic="v.pic"
|
|
|
+ :index="k"
|
|
|
+ :vid="v.id"
|
|
|
+ ref="video"
|
|
|
+ >
|
|
|
+ </dever-video>
|
|
|
|
|
|
- <cover-view class="cover-view-right" v-if="showInfo">
|
|
|
- <cover-image :src="item[0].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>
|
|
|
|
|
|
-<script>
|
|
|
-import pos from "@/pages/dream/view/pos.vue";
|
|
|
+<script>
|
|
|
+import deverVideo from '@/lib/dever/components/video.nvue';
|
|
|
var play = true;
|
|
|
export default {
|
|
|
name: "vodShort",
|
|
|
@@ -90,86 +35,30 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- page : 0,
|
|
|
- up: false,
|
|
|
- time: 0,
|
|
|
- barWidth:0,
|
|
|
- animationData: {},
|
|
|
- times:null,
|
|
|
- show_play:true,
|
|
|
- show_play_poster:true,
|
|
|
- muted: true,
|
|
|
current_index: 0,
|
|
|
- showInfo: false,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- /*
|
|
|
- 进入页面自动播放，已取消
|
|
|
- setTimeout(()=>{
|
|
|
- play = true;
|
|
|
- this.start();
|
|
|
- },1000)
|
|
|
- */
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.config.stop[this.config.page] = this;
|
|
|
},
|
|
|
- methods:{
|
|
|
- //获取video_id
|
|
|
- id : function(index) {
|
|
|
- var video_id = this.item[index].id;
|
|
|
- return 'video_short_' + video_id;
|
|
|
- },
|
|
|
- update : function(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;
|
|
|
- },
|
|
|
- start : function() {
|
|
|
- this.config.stop[this.config.page] = this;
|
|
|
- this.handle(play);
|
|
|
- },
|
|
|
- stop : function() {
|
|
|
- this.handle(false);
|
|
|
- },
|
|
|
- handle : function(state) {
|
|
|
- this.show_play_poster = false;
|
|
|
- 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;
|
|
|
- //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);
|
|
|
- }
|
|
|
+ methods:{
|
|
|
+ start : function() {
|
|
|
+ this.$refs.video[this.current_index].start();
|
|
|
+ },
|
|
|
+ stop : function() {
|
|
|
+ this.$refs.video[this.current_index].stop();
|
|
|
},
|
|
|
- changeVod : function(e) {
|
|
|
- // 暂停之前的视频
|
|
|
- this.stop();
|
|
|
- this.current_index = e.detail.current;
|
|
|
- // 播放现在的视频
|
|
|
- this.start();
|
|
|
-
|
|
|
- // 判断是否第一条
|
|
|
- if (e.detail.current == 0) {
|
|
|
- //console.log('到顶了');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- // 判断是否最后一条
|
|
|
- if (e.detail.current == this.item.length-1) {
|
|
|
- //console.log('到底了');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
+ changeVod : function(e) {
|
|
|
+ var self = this;
|
|
|
+ self.$nextTick(()=>{
|
|
|
+ self.stop();
|
|
|
+ self.current_index = e.detail.current;
|
|
|
+ self.start();
|
|
|
+ });
|
|
|
+
|
|
|
},
|
|
|
tapMsg : function(e) {
|
|
|
console.log(5, e);
|
|
|
@@ -183,13 +72,9 @@ export default {
|
|
|
console.log(7, e);
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- play : function(newVal, oldVal) {
|
|
|
- this.start();
|
|
|
- }
|
|
|
- },
|
|
|
+
|
|
|
components:{
|
|
|
- pos
|
|
|
+ deverVideo
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -202,132 +87,6 @@ export default {
|
|
|
position: relative;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
-}
|
|
|
-.video {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.play{
|
|
|
- position: absolute;
|
|
|
- width: 20vw;
|
|
|
- height: 20vw;
|
|
|
- left: 40vw;
|
|
|
- top: 40vh;
|
|
|
- opacity: 0.5;
|
|
|
-}
|
|
|
-.poster{
|
|
|
- background-size: cover;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.progressBar {
|
|
|
- border-radius: 2upx;
|
|
|
- height: 4upx;
|
|
|
- background-color: #FF4500;
|
|
|
- z-index: 999999;
|
|
|
- position: absolute;
|
|
|
- bottom: 68rpx;
|
|
|
-}
|
|
|
-.ico-video-play{
|
|
|
- background: url(@/static/icon/ico-video-play.png) no-repeat;
|
|
|
- background-size: cover;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate3d(-50%,-50%,0);
|
|
|
-}
|
|
|
-.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