![e9456b9e19bbe18102b982f477851d3d.png](https://i-blog.csdnimg.cn/blog_migrate/7feb9c2269f8b061d85363d2466d0def.jpeg)
1、终端:APP+小程序 (MallOnline直播带货系统)
2、技术储备
- uni-app 开发框架,vue与nvue。
- 后端接口API , 采用 Yii2.0+PHP7+MySQL。
- 了解rtmp协议。
- 了解Nginx+Rtmp+FFmpeg 流媒体服务器的搭建,或者直接用第三方云直播。
- 了解Socket 通讯,运用Workman搭建聊天室。
- 其它: 小程序的开发知识、多用户商城系统的逻辑开发等。
3、准备前端
![7a3a94bcb428e6373fb2961dae18ce1f.png](https://i-blog.csdnimg.cn/blog_migrate/448adb854cafe25b0b9d539ee487947d.jpeg)
![38fc93ab680734b3cb89e7f4baee70d9.png](https://i-blog.csdnimg.cn/blog_migrate/c5f108ae46933c9eeca9258254dc94b7.jpeg)
![5b33cc0cf53f068d8fb37feda444abe9.png](https://i-blog.csdnimg.cn/blog_migrate/036bbde2294cc0e9f8129b7fda2d3dc5.jpeg)
![386575ab550cb6aa84f549fcb0ba89ee.png](https://i-blog.csdnimg.cn/blog_migrate/77cebd41e673be7da851ed40287ea3a4.jpeg)
3、短视频与直播部分代码:
<template>
<view>
<video :src="src" :poster="poster" :play="play" :controls="false" show-play-btn="true" :style="{ height: height,width: width }" loop="true" :enable-progress-gesture="false"
:autoplay="autoplay" @click="clickVideo" :objectFit="short?'':'fill'" :id="`video_${src}`" ref="`video_${src}`" class="video" @timeupdate="timeupdate"></video>
<cover-view class="progressBar" :style="{ width: barWidth }"></cover-view>
</view>
</template>
<script>
export default{
props:{
src:{
type:String,
default:''
},
poster:{
type:String,
default:''
},
autoplay:{
type:String,
default:''
},
play:{
type:Boolean,
default:false
},
short:{
type:Boolean,
default:false
},
height:{
type:String,
default:''
},
width:{
type:String,
default:''
},
duration:{
type:Number,
default:0
}
},
data(){
return{
time:0
}
},
methods:{
timeupdate(event){
if(this.time>=this.duration) this.time=0
this.time = this.time + 0.25
},
clickVideo(){
this.$emit('click')
},
videoPlay(){
if(this.play){
this.videoCtx = uni.createVideoContext(`video_${this.src}`,this);
this.videoCtx.play();
}else{
this.videoCtx = uni.createVideoContext(`video_${this.src}`,this);
this.videoCtx.pause();
}
}
},
watch:{
play(newVal,oldVal){
this.videoPlay()
}
},
computed:{
barWidth(){
let width = this.time/this.duration*parseInt(this.width)
return `${width}px`
}
}
}
</script>
<style>
.video{
width: 100%;
height: 100%;
}
.progressBar{
border-radius: 2upx;
height: 4upx;
background-color: #fff;
z-index: 999999;
position: absolute;
bottom: 0upx;
//#ifndef APP-PLUS-NVUE
animation: flicker 4s linear infinite;
animation-direction:alternate;
//#endif
}
//#ifndef APP-PLUS-NVUE
@keyframes flicker {
0% { box-shadow:0 0 0 #FFFFFF; }
/** 暂停效果 */
10% { box-shadow:0 0 2upx #FFFFFF; }
50% { box-shadow:0 0 10upx #FFFFFF; }
60% { box-shadow:0 0 12upx #FFFFFF; }
90% { box-shadow:0 0 18upx #FFFFFF; }
100% { box-shadow:0 0 20upx #FFFFFF; }
}
//#endif
</style>
4、其它的后续待补充