基于android的防抖音直播,uniapp 仿火山 / 抖音短视频|uni-App+vue 直播实例

项目简介

U直播是一个基于uniapp+vue+nvue+vuex等技术实现的小视频/直播界面/聊天等功能的跨端项目，分别仿制了抖音小视频、陌陌直播界面功能，可实现上下滑动切换播放、暂停，评论、商品等功能。

技术框架

编辑器+技术：HBuilderX + vue/NVue/uniapp/vuex

iconfont图标：阿里字体图标库

自定义导航栏 + 底部Tabbar

弹窗组件：uniPop(uni-app封装自定义Modal弹窗)

测试环境：H5端/小程序/App端/真机

App.vue页面获取顶部状态栏高度

import Vue from 'vue'

export default {

onLaunch: function() {

// console.log('App Launch')

uni.getSystemInfo({

success:function(e){

Vue.prototype.statusBar = e.statusBarHeight

// #ifndef MP

if(e.platform == 'android') {

Vue.prototype.customBar = e.statusBarHeight + 50

}else {

Vue.prototype.customBar = e.statusBarHeight + 45

}

// #endif

// #ifdef MP-WEIXIN

let custom = wx.getMenuButtonBoundingClientRect()

Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight

// #endif

// #ifdef MP-ALIPAY

Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight

// #endif

}

})

}

顶部透明导航栏实现

由于原生导航栏功能限制，有些效果不好实现，于是就自定义顶部导航栏模式，可设置透明背景(如：个人主页/朋友圈动态)效果，具体可参看这篇文章：uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

仿抖音小视频切换实现

uniapp+swiper实现类似抖音/火山小视频上下滑动切换视频效果，点击可播放、暂停，点赞、评论等功能

:controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill">

＃ {{kwItem}}

写评论...

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)

}

基于Nvue小视频开发

由于原生video、map等原生组件层级较高，虽说cover-view组件可以覆盖其上，但其不能嵌套子组件，且限制较大，故只能采用编写.nvue(native vue)页面了。nvue页面语法结构和vue无太大差别，只是需要注意css编写方式，且只能使用flex布局模式，另外一些css属性无效。引入iconfont也有差异。

nvue引入iconfont方式：

beforeCreate() {

// 引入iconfont字体

// #ifdef APP-PLUS

const domModule = weex.requireModule('dom')

domModule.addRule('fontFace', {

fontFamily: "nvueIcon",

'src': "url('../../../static/fonts/iconfont.ttf')"

});

// #endif

好了，以上就是uniapp开发小视频/直播项目的介绍，希望对大家有些许帮助吧 ✍

基于android的防抖音直播,uniapp 仿火山 / 抖音短视频|uni-App+vue 直播实例相关推荐

用uni-app仿写抖音短视频APP推荐页（微信小程序版本）
一.可能写文章会让我更有动力去学习吧,那就先把已经实现的推荐页写出来吧. 先看看效果:(界面不太美观) 可以点击链接看一下动图https://gitee.com/wangjinchan/resume/ ...
老罗直播带货，抖音依然没有准备好和快手、淘宝直播的PK
文 |iihahe 来源 | 螳螂财经(ID:TanglangFin) 老罗离"带货一哥"越来越远. 老罗直播带货已经进行了三场.在线人数.销售额均在下降.尤其是第三场中,要不是一 ...
obs多推流地址_抖音obs推流直播怎么操作，抖音直播推流地址如何获取？
玩过抖音直播的朋友应该都知道,想要在抖音直播间中直播游戏,那就必须要具备两个条件,分别是抖音直播推流地址以及obs直播软件. 那抖音obs直播怎么操作,抖音直播推流地址如何获取呢? 由于很多刚入门的主 ...
长虹美菱：公司主要通过抖音短视频等平台进行直播带货
[TechWeb]5月17日,直播带货已经成为了一种风潮,尤其是在疫情期间,各大品牌的CEO纷纷亲自带货,董明珠更是在抖音.快手和京东等平台现身,为格力呐喊造势.日前,针对股友的关于直播带货的提问,长 ...
抖音账号如何打造，抖音直播带货怎么做：国仁楠哥
用户在哪里,哪里就是红利.随着抖音短视频的兴起,直播带货也成为各大企业网红创收的重要途径了. 抖音带货,已经成为众多用户玩抖音的重要原因之一. 那么,怎样才能抓住时代的机遇,创造出爆款抖音号呢? 1. ...
2022-5月如何使用疯狂URL获取抖音推流码地址（抖音无人直播教程）
什么是推流地址? 平时我们如果是下载直播,叫拉流.但如果是你自己要直播,属于上传直播流数据,叫推流,即:把直播流数据推送到视频服务器,然后别人才能看到直播画面推流地址有什么用? 有了推流地址,我们就 ...
obs多推流地址_一文搞懂：抖音obs直播怎么操作，抖音直播推流地址如何获取！...
玩过抖音直播的朋友应该都知道,想要在抖音直播间中直播游戏,那就必须要具备两个条件,分别是抖音直播推流地址以及obs直播软件. 那抖音obs直播怎么操作,抖音直播推流地址如何获取呢? 由于很多刚入门的主 ...
android怎么玩大头特效,安卓系统上抖音大头特效怎么弄？
安卓系统上抖音大头特效怎么弄?相信很多小伙伴都下载过抖音或者玩过抖音,小编之前刚下抖音的时候,一天刷短视频2个小时,感觉时间好快啊.不过,光看,自己不动手制作,好像缺了点什么?那本期小编就根据自己用安 ...
解决不了“不可能三角”，火山抖音化只是个昏招
(图片来源于网络) 文 | 易不二来源 | 螳螂财经(ID:TanglangFin) 快手"傍上"春晚,字节头条坐不住了. 近日,抖音CEO张楠在今日头条发文宣布,对火山进行品牌 ...

基于android的防抖音直播,uniapp 仿火山 / 抖音短视频|uni-App+vue 直播实例

基于android的防抖音直播,uniapp 仿火山 / 抖音短视频|uni-App+vue 直播实例相关推荐

最新文章

热门文章