vue3 vant4实现抖音短视频功能
文章目录
- 1. 实现效果
- 2. 精简版核心代码
- 3. 完整功能点(本文章不写,只写核心代码)
1. 实现效果

2. 精简版核心代码
- 使用的
vue3+vant4组件 - 使用
van-swipe进行轮播图切换实现
<template><div :style="{width: width + 'px',overflow: 'hidden',}" class="container"><van-swipe :loop="true" vertical :height="height" :width="width" :show-indicators="false" @change="onChange":style="{ height: height + 'px' }"><van-swipe-item v-for="(item, index) in videoList" :key="index" class="swiper-slide-item"><div @click="onVideoClick(item, index)" z-index="1" class="swiperItemVideo"><video class="videoPlayer" :id="'videoPlayer_' + index" ref="player" :key="index" :poster="item.poster":src="item.src" :width="width" autoplay :muted="muteding" loop x5-video-player-type="h5"webkit-playsinline="true" x-webkit-airplay="true" x5-video-orientation="portraint"playsInline="true" x5-video-player-fullscreen="portraint" x5-video-ignore-metadata='true'></video><van-image v-if="!playing" class="play w-[40px] h-[40px]" :src="getAssetsFile('icon/play.png')" /></div><ShortsBottom ref="bottomRef" :item="item" /></van-swipe-item></van-swipe></div>
</template>
<script setup lang="ts" name="Setting">
import {getAssetsFile
} from '@/utils/tool'
const player = ref(null);
const currentIndex = ref(0);
const playing = ref(true);
const muteding = ref(true)
const width = ref(window.innerWidth);
const height = ref(window.innerHeight);
let bottomRef = ref(null)
let bottomHeight = ref(0);
const currentVideoInfo = ref({videoId: "",
});/*** 切换视频*/
const onChange = (index) => {console.log(index, "index")currentVideoInfo.value = {videoId: ""};const preVideoId = "videoPlayer_" + currentIndex.value;const preVideo: any = document.getElementById(preVideoId);if (preVideo) preVideo.pause();const nextVideoId = "videoPlayer_" + index;const nextVideo: any = document.getElementById(nextVideoId);if (nextVideo) nextVideo.play();currentIndex.value = index;player.value = nextVideo;playing.value = trueif (index == videoList.length - 1) {console.log("没有更多了")}
};
/*** 播放|暂停*/
const onVideoClick = (item, index) => {const video: any = document.getElementById("videoPlayer_" + index);if (video && playing.value) {video.pause();playing.value = false;} else {video.play();playing.value = true;}
};onMounted(() => {if (bottomRef.value) {console.log(bottomRef.value[0].bottomHeight, 1)bottomHeight.value = bottomRef.value[0].bottomHeight}const index = currentIndex.value;const videos: any = document.querySelectorAll("video");for (const video of videos) {let videoId = "videoPlayer_" + index;if (video && video.id && video.id != videoId) {video.pause();} else {player.value = video;}}
});onBeforeUnmount(() => {const videos: any = document.querySelectorAll("video");for (const video of videos) {if (video && video.id) {video.pause();}}
});/*** 短视频列表*/
const videoList = [{videoId: Date.now() + 1,title: "抖音美女主播,JK超短裙学生妆美女跳舞展示,爱了爱了。",poster: "http://img01.sogoucdn.com/app/a/201023/27e5400e26fbef1ea32f9aff60c0b015",src: "https://txmov2.a.yximgs.com/upic/2020/11/08/19/BMjAyMDExMDgxOTQxNTlfNTIzNDczMzQ0XzM4OTQ1MDk5MTI4XzFfMw==_b_Bc770a92f0cf153407d60a2eddffeae2a.mp4",uploadTime: "2023-11-08 19:41",ipLocation: "上海",author: {authorId: 101,avatar: "https://i02piccdn.sogoucdn.com/4f85fc70df81d04a",nickName: "陌路",genderName: "男"}
},
{videoId: Date.now() + 2,title: "御姐美女抖音作品,来个自拍视频把,好美啊。",poster: "http://img02.sogoucdn.com/app/a/201023/0866f6a339e58d647eb476f72045e980",src: "https://txmov2.a.yximgs.com/upic/2020/10/02/09/BMjAyMDEwMDIwOTAwMDlfMTIyMjc0NTk0Ml8zNjk3Mjg0NjcxOF8xXzM=_b_B28a4518e86e2cf6155a6c1fc9cf79c6d.mp4",uploadTime: "2023-10-02 09:41",ipLocation: "贵州",author: {authorId: 102,avatar: "http://img02.sogoucdn.com/app/a/201023/0866f6a339e58d647eb476f72045e980",nickName: "御姐呀",genderName: "女"}
},
{videoId: Date.now() + 3,title: "抖音主播可爱妹子新学的舞蹈,超可爱的美女主播。",poster: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",src: "https://txmov6.a.yximgs.com/upic/2020/08/23/00/BMjAyMDA4MjMwMDMyNDRfMTYzMzY5MDA0XzM0ODI4MDcyMzQ5XzFfMw==_b_B9a1c9d4e3a090bb2815994d7f33a906a.mp4",uploadTime: "2023-08-23 00:41",ipLocation: "广州",author: {authorId: 103,avatar: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",nickName: "野花猫",genderName: "女"}
},
{videoId: Date.now() + 4,title: "多个美女带着遮阳帽出去散步自拍视频,好好看。",poster: "https://i02piccdn.sogoucdn.com/45c34c84c106bbb7",src: "https://alimov2.a.yximgs.com/upic/2020/07/02/14/BMjAyMDA3MDIxNDUyMDlfOTExMjIyMjRfMzE1OTEwNjAxNTRfMV8z_b_Bf3005d42ce9c01c0687147428c28d7e6.mp4",uploadTime: "2023-07-02 14:41",ipLocation: "山西",author: {authorId: 104,avatar: "https://i02piccdn.sogoucdn.com/45c34c84c106bbb7",nickName: "蓝姬",genderName: "女"}
},
];
</script>
<style lang="less" scoped>
.container {display: flex;flex-direction: column;overflow: hidden;.swiper-wrapper {flex: 1;}.swiper-slide-item {display: flex;flex-direction: column;width: 100%;.swiperItemVideo {z-index: 1;flex: 1;overflow-y: auto;width: 100%;position: relative;.play {position: absolute;z-index: 2;content: "";top: 50%;left: 50%;transform: translate(-50%, -50%);animation: move 0.3s linear alternate;}}.videoPlayer {background: #000;height: 100%;z-index: 2;}}
}@keyframes move {0% {transform: translate(-50%, -50%) scale(2);opacity: 0;}100% {transform: translate(-50%, -50%) scale(1);opacity: 1;}
}
</style>
- ShortsBottom 组件代码
<template><div class="videoInfo" ref="bottomRef"><div class="top mb-[8px]"><van-image class="logo w-[40px] h-[40px] mr-[8px]" round :src="getAssetsFile('logo.png')" /><span class="nickName mr-[12px]">{{ item.author.nickName }}</span><div class="btn-content" @click="Follow"><van-button type="primary" size="small" class="btn">Follow</van-button></div><div class="closeSound"><van-image class="logo w-[16px] h-[16px]" :src="getAssetsFile('icon/closeSound.png')" /></div></div><van-text-ellipsis class="title" :content="item.title" /></div>
</template>
<script setup lang="ts">import { ref, onMounted } from "vue";import { getAssetsFile } from '@/utils/tool'interface Props {item : any;}const props = withDefaults(defineProps<Props>(), {item: {},});let bottomRef = ref(null)let bottomHeight = ref(0)const Follow = ()=>{console.log("关注")}onMounted(() => {if (bottomRef.value) {bottomHeight.value = bottomRef.value.offsetHeight}});defineExpose({ bottomHeight })//暴露子组件的方法或者数据
</script><style lang="less" scoped>.videoInfo {background: #161616;color: #f5f5f5;padding: 16px 20px 34px 16px;text-align: left;position: relative;&::after {position: absolute;display: block;content: "";bottom: 0px;left: 0;width: 100%;height: 0px;background: red;z-index: 1;}.top {display: flex;justify-content: flex-start;align-items: center;.nickName {font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;font-weight: 700;font-size: 14px;color: #FFFFFF;line-height: 14px;}.closeSound {margin-left: auto;width: 32px;height: 32px;padding: 8px;border-radius: 50%;background: rgba(255, 255, 255, 0.1);}}.title {font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;font-weight: 400;font-size: 14px;color: #FFFFFF;line-height: 14px;}}
</style>
3. 完整功能点(本文章不写,只写核心代码)
- 视频点赞
- 视频分享
- 视频用户基础信息
- 视频暂停/播放
- 视频声音控制
- 上下切换视频
- 视频封面图设置

相关文章:
vue3 vant4实现抖音短视频功能
文章目录 1. 实现效果2. 精简版核心代码3. 完整功能点(本文章不写,只写核心代码) 1. 实现效果 2. 精简版核心代码 使用的 vue3 vant4组件使用van-swipe进行轮播图切换实现 <template><div :style"{width: width px,overflo…...
C#结合JS实现HtmlTable动态添加行并保存到数据库
目录 需求 效果视频演示 范例运行环境 准备数据源 数据表设计 UI及表结构Json配置 Json数据包提交配置 设计实现 前端UI Javascript 脚本 Jquery引用 C# 服务端操作 小结 需求 在 Web 应用项目中,实现一对多录入的数据管理功能是一项常见的应用。因此…...
Unity Render Streaming 云渲染 外网访问
初版: 日期:2024.5.20 前言:临时思路整理,后期会详细补充 环境: 1. 阿里云服务器 需要安装好nodejs 、npm 2. windows电脑,需安装好 nodejs 、npm 3.Unity 2021.3.15f1 4.Unity Render Streaming …...
美易官方:Copilot全面升级!
Copilot的全面升级,无疑在科技界掀起了一场革命性的浪潮!微软在一夜之间推出的这50余项AI更新,不仅彰显了其在人工智能领域的深厚底蕴,更是让全球用户见证了计算机理解人类能力的一次飞跃。 在微软2024年Build开发者大会的主题演…...
深入了解FreeRTOS:实时操作系统的核心概念和应用
前言: 在当今数字化世界中,嵌入式系统扮演着至关重要的角色,从工业自动化到智能设备,无所不在。而实时操作系统(RTOS)则是这些系统的核心引擎,它们负责管理任务、资源和时间,确保系统…...
Spring框架学习笔记(五):JdbcTemplate 和 声明式事务
基本介绍:通过 Spring 框架可以配置数据源,从而完成对数据表的操作。JdbcTemplate 是 Spring 提供的访问数据库的技术。将 JDBC 的常用操作封装为模板方法 1 JdbcTemplate 使用前需进行如下配置 1.1 在maven项目的pom文件加入以下依赖 <dependencies…...
考研计组chap1计算机系统概述
目录 一、计算机发展历程(不考了) 二、计算机硬件的基本组成 3 1.五个部分 (1)输入设备 (2)控制器 (3)运算器 (4)(主)存储器 (5࿰…...
如何使用Python中的生成器
如何使用Python中的生成器 在Python中,生成器是一种特殊的迭代器,它允许你逐个地生成值,而不是一次性地计算并存储所有的值。这对于处理大量数据或者无限序列特别有用,因为它能够节省内存并提高效率。 生成器通常是通过以下两种…...
C语言 读取 MIDI文件头部
在C语言中直接读取MIDI文件并不简单,因为MIDI文件是一种包含音乐事件(如音符的开始和结束、控制信号等)的二进制格式,而不是像文本文件那样容易解析。不过,你可以通过以下步骤来实现: 了解MIDI文件格式&am…...
C# Winform实现五子棋游戏(代完善)
实现了基本的玩法。 BoardController.cs using System;namespace GomokuGame {public class BoardController{private static BoardController instance;private readonly int[,] board;private const int boardSize 15;private BoardController(){board new int[boardSize…...
文档档案管理系统整体建设方案书(实际项目原件word2024)
1.系统概述 1.1.需求描述 1.2.需求分析 1.3.重难点分析 1.4.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 数据备份技术 3.系统功能设计 3.1.功能清单列表 3.2.基础数据管理 3.3.位置管理 3.4.文档使用 3.5.文档管理 软件全套资料包获取方式①:软件项…...
React与Vue的区别?
一、区别: 1. 语法 Vue采用自己特有的模板语法; React是单向的,采用jsx语法创建react元素。 2.监听数据变化的实现原理不同 Vue2.0 通过Object.defineproperty()方法的getter/setter属性, 实现数据劫持, 每次修改完数据会触发diff算法(双端对比) …...
leetcode 2115.从给定原材料中找到所有可以做出的菜
思路:拓补排序,哈希表 在思路上其实很好发现,我们需要有一个明确的做菜顺序,也就是说需要定下来我们根据原材料先做哪些菜,然后做完该做的菜之后,后来又能做哪些菜。 你也发现了,这个顺序其实…...
Opencompass模型评测教程
模型评测 模型评测非常关键,目前主流的方法主要可以概括为主观评测和客观评测,主观评测又可以分为两种形式:人工判断或者和模型竞技场。客观评测一般采用评测数据集的形式进行模型评测。本教程使用Opencompass工具进行对Internlm2-7b模型进行…...
什么是安全测试,如何进行安全测试?
什么是安全测试? 概述 安全测试是一种旨在识别系统、网络或应用程序中的安全漏洞的测试方法。其目标是确保系统能够抵御恶意攻击,保护数据的机密性、完整性和可用性。安全测试通常包括漏洞扫描、渗透测试、代码审计和安全评估等多个方面。 安全测试的…...
ros的pcl库中对于自己定义的消息,调用pcl库时总是报错 c++
首先定义自己的消息类型 struct CustomPoint { // 定义点类型结构PCL_ADD_POINT4D; // 该点类型有4个元素float intensity 0.0;uint32_t zone;uint32_t ring;uint32_t sector;EIGEN_MAKE_ALIGNED_OPERATOR_NEW // 确保new操作符对齐操作 } EIGEN_ALIGN16; // 强制SSE对齐POIN…...
DataFrame—数据汇总6
文章最前: 我是Octopus,这个名字来源于我的中文名--章鱼;我热爱编程、热爱算法、热爱开源。所有源码在我的个人github ;这博客是记录我学习的点点滴滴,如果您对 Python、Java、AI、算法有兴趣,可以关注我的…...
Java入门基础学习笔记41——实体类
实体JavaBean/实体类: 就是一种特殊形式的类。 1)这个类中的成员变量都要私有,并且要对外提供相应的getXXX,setXXX的方法。 2)类中必须要有一个公共的无参的构造器。其他的构造器可写可不写。 右键菜单中࿰…...
【Linux】信号之信号的保存和处理详解
🤖个人主页:晚风相伴-CSDN博客 💖如果觉得内容对你有帮助的话,还请给博主一键三连(点赞💜、收藏🧡、关注💚)吧 🙏如果内容有误或者有写的不好的地方的话&…...
基于Django的图书管理系统
文章目录 前言一、页面展示1.登录2.前端页面3.后端页面 二、项目上传(1)导入数据库(2)导入项目(3)数据库密码修改(4)进入网站 总结 前言 本网站调用Django编写了图书管理网站&#…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
计算机系统结构复习-名词解释2
1.定向:在某条指令产生计算结果之前,其他指令并不真正立即需要该计算结果,如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方,那么就可以避免停顿。 2.多级存储层次:由若干个采用不同实现技术的存储…...
[QMT量化交易小白入门]-六十二、ETF轮动中简单的评分算法如何获取历史年化收益32.7%
本专栏主要是介绍QMT的基础用法,常见函数,写策略的方法,也会分享一些量化交易的思路,大概会写100篇左右。 QMT的相关资料较少,在使用过程中不断的摸索,遇到了一些问题,记录下来和大家一起沟通,共同进步。 文章目录 相关阅读1. 策略概述2. 趋势评分模块3 代码解析4 木头…...
mcts蒙特卡洛模拟树思想
您这个观察非常敏锐,而且在很大程度上是正确的!您已经洞察到了MCTS算法在不同阶段的两种不同行为模式。我们来把这个关系理得更清楚一些,您的理解其实离真相只有一步之遥。 您说的“select是在二次选择的时候起作用”,这个观察非…...
