基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
一、项目简介
uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5、小程序、App端) 且兼容效果一致。
二、效果预览
在H5、小程序、App端测试效果如下:(后续大图均为APP端)
<swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;"> <block v-for="(item,index) in vlist" :key="index"> <swiper-item> <view class="uni_vdplayer"> <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill"> </video> <!-- 中间播放按钮 --> <view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view> <!-- 底部信息 --> <view class="vd-footToolbar flexbox flex_alignb"> <view class="vd-info flex1"> <view class="item at"> <view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">#</text> {{kwItem}}</view> </view> <view class="item subtext">{{item.subtitle}}</view> <view class="item uinfo flexbox flex_alignc"> <image class="avator" :src="item.avator" mode="aspectFill" /><text class="name">{{item.author}}</text> <text class="btn-attention bg_linear1" :class="item.attention ? 'on' : ''" @tap="handleAttention(index)">{{item.attention ? '已关注' : '关注'}}</text> </view> <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view> </view> <view class="vd-sidebar"> <view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view> <view class="ls" @tap="handleIsLike(index)"><text class="iconfont icon-like" :class="item.islike ? 'like' : ''"></text><text class="num">{{ item.likeNum+(item.islike ? 1: 0) }}</text></view> <view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view> <view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view> </view> </view> </view> </swiper-item> </block> </swiper>
视频滑动切换 播放、暂停 及单击/双击判断,商品及评论展示
<script> // 引入商品广告、评论 import videoCart from '@/components/cp-video/cart.vue' import videoComment from '@/components/cp-video/comment' let timer = null export default { data() { return { videoIndex: 0, vlist: videoJson, isPlay: true, //当前视频是否播放中 clickNum: 0, //记录点击次数 } }, components: { videoCart, videoComment }, onLoad(option) { this.videoIndex = parseInt(option.index) }, onReady() { this.init() }, methods: { init() { this.videoContextList = [] for(var i = 0; i < this.vlist.length; i++) { // this.videoContextList.push(this.$refs['myVideo' + i][0]) this.videoContextList.push(uni.createVideoContext('myVideo' + i, this)); } setTimeout(() => { this.play(this.videoIndex) }, 200) }, // 滑动切换 handleSlider(e) { let curIndex = e.detail.current if(this.videoIndex >= 0){ this.videoContextList[this.videoIndex].pause() this.videoContextList[this.videoIndex].seek(0) this.isPlay = false } if(curIndex === this.videoIndex + 1) { this.videoContextList[this.videoIndex + 1].play() this.isPlay = true }else if(curIndex === this.videoIndex - 1) { this.videoContextList[this.videoIndex - 1].play() this.isPlay = true } this.videoIndex = curIndex }, // 播放 play(index) { this.videoContextList[index].play() this.isPlay = true }, // 暂停 pause(index) { this.videoContextList[index].pause() this.isPlay = false }, // 点击视频事件 handleClicked(index) { if(timer){ clearTimeout(timer) } this.clickNum++ timer = setTimeout(() => { if(this.clickNum >= 2){ console.log('双击视频') }else{ console.log('单击视频') if(this.isPlay){ this.pause(index) }else{ this.play(index) } } this.clickNum = 0 }, 300) }, // 喜欢 handleIsLike(index){ let vlist = this.vlist vlist[index].islike =! vlist[index].islike this.vlist = vlist }, // 显示评论 handleVideoComment() { this.$refs.videoComment.show() }, // 显示购物车 handleVideoCart(index) { this.$refs.videoCart.show(index) }, } } </script>
在项目开发过程中,遇到了视频video层级高不能覆盖的问题,使用nvue页面就可以解决view覆盖在video之上。.nvue(native vue的缩写)
更多关于nvue页面开发,可以参看:uniapp开发nvue页面
◆ uniapp聊天页面实现
项目中的聊天页面,功能效果这里就不详细介绍了,可参看这篇:uni-app聊天室|vue+uniapp仿微信聊天实例
◆ 直播页面live.nvue
为避免video不能覆盖问题,直播页面采用的是nvue编写,开发过程也遇到了一些坑,尤其是css,全部是flex布局,而且不能多级嵌套,有些css属性不支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!