基于vue3直播/小视频实例

您所在的位置：网站首页 › 抖音叶小喵视频在线观看 › 基于vue3直播/小视频实例

基于vue3直播/小视频实例

2023-04-11 19:38| 来源: 网络整理| 查看: 265

2020年快手获得了春晚冠名合作，今年则是抖音成为春晚独家红包互动合作伙伴。

春晚的赞助商已逐步由传统行业转向互联网企业。社交短视频、直播已经成为很多新一代人的互动交流方式，随着5G技术的日趋成熟，不久的将来视频直播更加的受欢迎！

vue3.0-douyin 基于vite2+vue3.0+vuex4+vant3+v3popup技术开发的一款仿抖音/快手短视频直播聊天项目。实现了短视频滑动效果、聊天评论/弹幕/送礼物等功能。

框架技术技术框架：vue3.0+vue-router+vuex4 组件库：vant3.x (有赞移动端vue3组件库) 弹层组件：v3popup (移动端vue3弹框组件) 字体图标：阿里iconfont图标导航条+Tab栏：自定义顶部导航/底部标签栏组件

目录结构

vue3.0自定义mobile弹框组件

V3Popup 一款多功能的vue3.x移动端弹框组件。支持组件式+函数式调用方式，超过6+弹框类型、5+动画效果及20+自定义配置参数。

如果对其实现方式感兴趣，可以去看看之前的这篇分享文章。

vue3.x系列之自定义mobile版全局弹框组件

vite.config.js项目配置

基于vite脚手架构建工具创建的项目，会有一个vite.config.js配置文件。可进行一些简单的环境及路径别名配置。

import vue from '@vitejs/plugin-vue'import path from 'path'/** * @type {import('vite').UserConfig} */export default { plugins: [vue()], build: { // 基本目录 // base: '/', /** * 输出文件目录 * @default dist（默认） */ // outDir: 'target', }, // 环境配置 server: { // 自定义接口 port: 3000, // 是否自动浏览器打开 open: false, // 是否开启https https: false, // 服务端渲染 ssr: false, // 代理配置 proxy: { // ... } }, // 设置路径别名 alias: { '@': path.resolve(__dirname, './src'), '@components': path.resolve(__dirname, './src/components'), '@views': path.resolve(__dirname, './src/views') }} 复制代码引入公共组件

新建一个plugins.js文件，用来引入一些常用的公共组件。

// 引入Vant3.x组件库import Vant from 'vant'import 'vant/lib/index.css'// 引入Vue3.x移动端弹层组件import V3Popup from '@components/v3popup'import NavBar from '@components/navBar.vue'import TabBar from '@components/tabBar.vue'import Utils from './utils'import Storage from './storage'const Plugins = (app) => { app.use(Vant) app.use(V3Popup) // 注册公用组件 app.component('navbar', NavBar) app.component('tabbar', TabBar) app.provide('utils', Utils) app.provide('storage', Storage)} 复制代码首页布局模板

首页分为顶部navbar+视频区+底部tabbar三个部分。其中底部及底部组件开启transparent fixed属性，会镂空固定在视频区之上。

... ... 查看详情合集《小鬼当家》主演花絮 {{item2.author}} {{item2.isFollow ? '已关注' : '关注'}} @{{item2.author}} #{{kw}} {{item2.desc}} ... ... ... ... ... 复制代码 vue3.0表单注册验证 | 倒计时功能

Vue3.0-DouYin {{vcodeText}} 已有账号，去登录 /** * @Desc vue3.0表单验证|60s倒计时 * @Time andy by 2021-02 * @About Q：282310962 wx：xy190310 */ import { reactive, toRefs, inject, getCurrentInstance } from 'vue' export default { components: {}, setup() { const { ctx } = getCurrentInstance() const v3popup = inject('v3popup') const utils = inject('utils') const formObj = reactive({}) const data = reactive({ vcodeText: '获取验证码', disabled: false, time: 0, }) const VTMsg = (content) => { v3popup({ content: ` ${content}`, popupStyle: 'background:#ffefe6;color:#fe2c55;', position: 'top', time: 2 }) } const handleSubmit = () => { if(!formObj.tel){ VTMsg('手机号不能为空!') }else if(!utils.checkTel(formObj.tel)){ VTMsg('手机号格式不正确!') }else if(!formObj.pwd){ VTMsg('密码不能为空!') }else if(!formObj.vcode){ VTMsg('验证码不能为空!') }else{ // ... } } // 倒计时 const handleVcode = () => { if(!formObj.tel) { VTMsg('手机号不能为空!') }else if(!utils.checkTel(formObj.tel)) { VTMsg('手机号格式不正确!') }else { data.time = 60 data.disabled = true countDown() } } const countDown = () => { if(data.time > 0) { data.vcodeText = '获取验证码('+ data.time +')' data.time-- setTimeout(countDown, 1000) }else{ data.vcodeText = '获取验证码' data.time = 0 data.disabled = false } } return { formObj, ...toRefs(data), handleSubmit, handleVcode } } } 复制代码 vue3.0短视频+直播模块

使用vant3中的swipe组件实现小视频_左右上下滑动_切换效果。

上下滑动切换视频，并且停止小视频播放。

// 垂直切换视频事件 const handleSwipeVertical = (index) => { if(data.activeNav == 0) { // 附近页 data.activeOneIdx = index }else if(data.activeNav == 1) { // 关注页 data.activeTwoIdx = index }else if(data.activeNav == 2) { // 推荐页 data.activeThreeIdx = index } vdTimer.value && clearInterval(vdTimer.value) data.vdProgress = 0 data.isPlay = false let video = getVideoContext() if(!video) return video.pause() // 重新开始 video.currentTime = 0 data.activeSwipeIndex = index // 自动播放下一个 handlePlay() } 复制代码

控制点击视频区域播放/暂停功能。

// 视频点击事件（判断单/双击） const handleVideoClicked = () => { console.log('触发视频点击事件...') tapTimer.value && clearTimeout(tapTimer.value) data.clickNum++ tapTimer.value = setTimeout(() => { if(data.clickNum >= 2) { console.log('双击事件') }else { console.log('单击事件') if(data.isPlay) { handlePause() }else { handlePlay() } } data.clickNum = 0 }, 300) } // 播放 const handlePlay = () => { console.log('播放视频...') let video = getVideoContext() if(!video) return video.play() data.isPlay = true // 设置进度条 vdTimer.value = setInterval(() => { handleProgress() }, 16) } // 暂停 const handlePause = () => { console.log('暂停视频...') let video = getVideoContext() if(!video) return video.pause() data.isPlay = false vdTimer.value && clearInterval(vdTimer.value) } 复制代码

视频区底部有一条迷你进度条展示。通过小视频时长和当前播放时间转换为百分比，然后通过css3 transition控制动画效果。

// 播放进度条 const handleProgress = () => { let video = getVideoContext() if(!video) return let curTime = video.currentTime.toFixed(1) let duration = video.duration.toFixed(1) data.vdProgress = parseInt((curTime / duration).toFixed(2) * 100) } 复制代码

送礼物/充值模板使用的是v3popup组件来实现。

赠送礼物 0 {{item.giftLabel}} {{item.giftCoins}} 选择充值金额 0 {{item.gtcoins}} 售价{{item.gtmoney}}元确认支付(￥{{rechargeLs[rechargeIdx].gtmoney}}) 复制代码

另外小视频里展示的链接，点击后会有弹框展示。

好了，基于vue3.0开发仿抖音/快手界面短视频就分享到这里。💪

最后贴上一个Vue3 pc端实例项目

vue3.x+element-plus网页版聊天实例|vue3仿微信web端

【本文地址】

公司简介

联系我们