video.vue
<template><view class="index"><index-header bgColor="bg-index-header" @headerSwitch="headerSwitch"/><!-- 视频组件 --><cu-video class="video" :video_list="videoList"/></view>
</template><script>
import indexHeader from './index-header.vue';
import cuVideo from './cu-video.vue';
export default {components: {indexHeader,cuVideo},data() {return {title: 'Hello',videoList:[],}},onLoad() {this.getVideoList();},onShow() {console.log('界面显示')uni.$emit('onShow', 1);},methods: {getVideoList(refresh) {let list = [{video_id: 1,nickname: '小明',video_describe: '这是视频描述',cover_url: '/static/video/1-1.mp4',video_url: '/static/video/1-1.mp4',dianzan: 0,pinglun: 0,zhuanfa: 0,is_dianzan: false},{video_id: 2,nickname: '小明',video_describe: '这是视频描述',cover_url: '/static/video/1-2.mp4',video_url: '/static/video/1-2.mp4',dianzan: 0,pinglun: 0,zhuanfa: 0,is_dianzan: false},{video_id: 3,nickname: '小明',video_describe: '这是视频描述',cover_url: '/static/video/1-3.mp4',video_url: '/static/video/1-3.mp4',dianzan: 0,pinglun: 0,zhuanfa: 0,is_dianzan: false},{video_id: 4,nickname: '小明',video_describe: '这是视频描述',cover_url: '/static/video/1-4.mp4',video_url: '/static/video/1-4.mp4',dianzan: 0,pinglun: 0,zhuanfa: 0,is_dianzan: false},{video_id: 5,nickname: '小明',video_describe: '这是视频描述',cover_url: '/static/video/1-5.mp4',video_url: '/static/video/1-5.mp4',dianzan: 0,pinglun: 0,zhuanfa: 0,is_dianzan: false},]for (let item of list) {this.videoList.push({video_id: item.video_id,nickname: item.nickname,video_describe: item.video_describe,cover_url: item.cover_url,video_url: item.video_url,dianzan: item.dianzan,pinglun: item.pinglun,zhuanfa: item.zhuanfa,is_dianzan: item.is_dianzan,flag: false});}},// 顶部切换headerSwitch(val){// console.log(val);this.getVideoList();}}}
</script><style lang="scss" scoped>
.index {display: flex;flex-direction: column;/* align-items: center; */justify-content: center;background-color: #333333;height: 100vh;
}
.tabbar{.action{.plus{image{width: 100upx;height: 60upx;}}}
}
</style>
cu-video.vue
<template><view><swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVideo"><swiper-item v-for="(item,index) in video_list"><videowebkit-playsinline:src="item.video_url"preloadshow-play-btn="true"show-mute-btn="true"controls="true":autoplay="false"loop="true":id="`video_${item.video_id}`"objectFit="fill":enable-progress-gesture="false"@click="clickVideo"ref="video_url"play-btn-position="center"@loadedmetadata="handleVideoReady"class="video":poster="item.cover_url"@timeupdate="timeupdate"></video><cover-imageclass="play" v-if="show_play"@tap="videoPlay"src="/static/video/play_1.png"></cover-image><cover-view class="cover-view-left"><text class="view-left-text">@{{ item.nickname }}</text><view class="view-left-text-content"><text class="text-content-text">{{ item.video_describe }}</text></view></cover-view><cover-view class="cover-view-right"><cover-image :src="item.cover_url"class="avater img"@click.stop="tapAvater"></cover-image><text class="right-follow">+</text><cover-imagestyle="position:relative;top:-20upx;":src="item.is_dianzan ? '/static/video/axc.png' : '/static/video/bed.png'"class="img-left" @click.stop="tapLove"></cover-image><text class="right-text">{{ item.dianzan }}</text><cover-image src="/static/video/ay2.png"style="height: 80upx;" class="img-left" @click.stop="tapMsg"></cover-image><text class="right-text">{{ item.pinglun }}</text><cover-image src="/static/video/b6p.png"style="height: 76upx;" class="img-left" @click.stop="tapShare"></cover-image><text class="right-text">{{ item.zhuanfa }}</text><cover-image src="/static/video/changpian.png" class="musicIcon img"></cover-image><cover-view class="progressBar" :animation="animationData" :style="`width:${barWidth}px`"></cover-view></cover-view></swiper-item></swiper></view><view><!-- 提示窗示例 --><uni-popup ref="alertDialog" type="dialog"><uni-popup-dialog type="success" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"@close="dialogClose"></uni-popup-dialog></uni-popup></view>
</template>
<script >
import wx from 'weixin-js-sdk';let play = true;
export default {props: {video_list: {type: Array,default: {},},app_show_play: {type: Boolean,default: false}},data() {return {time: 0,barWidth:0,animationData: {},times:null,play: false,show_play:this.app_show_play,current_index: 0};},created() {setTimeout(()=>{this.videoPause()play = true;this.$nextTick(()=>{this.videoPlay();})},1000)},onHide() {},mounted(){// this.$refs.alertDialog.open()const that = this;uni.$on('onShow', function(data) {//解决再次打开时，播放视频if(data == 1){that.videoPause()play = true;that.$nextTick(()=>{that.videoPlay();})}});},onReady(){},onUnload(){// this.videoPause();},onShow(){alert("12133")},methods: {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() {let video_id = this.video_list[this.current_index].video_id;if (play) {console.log('播放视频',`video_${video_id}`);this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);this.videoCtx.play();this.show_play = false;play = false;} else {console.log('暂停视频',`video_${video_id}`);this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);this.videoCtx.pause();this.show_play = true;play = true;}},videoPause() {let video_id = this.video_list[this.current_index].video_id;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.video_list.length-1 ){console.log('到底了');return false;}},tapMsg(e) {console.log(5, e);},tapShare(e) {console.log(6, e);},tapLove(e) {// item.is_dianzanthis.video_list[this.current_index].is_dianzan = !this.video_list[this.current_index].is_dianzan;console.log(7, e);},handleVideoReady(){console.log('视频加载完成');},dialogConfirm() {console.log('点击确认')this.play = true;this.videoPlay();},dialogClose(){this.play = true;this.videoPlay();}},watch: {play(newVal, oldVal) {this.videoPlay();}}
};
</script><style lang="scss" scoped>
.swiper{width: 100vw;height: 100vh;position: fixed;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;
}
.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>