H5、Vue3、UniApp实现抖音短视频功能

H5、Vue3、UniApp实现抖音短视频功能

ml-swiper

https://ext.dcloud.net.cn/plugin?id=18973

可 0 配置，高性能、低代码、全端兼容

APP端效果图

在这里插入图片描述

微信小程序端效果图

在这里插入图片描述

Vue网页端效果图

ml-swiper

可 0 配置，高性能、低代码、全端兼容

APP端效果图

APP开发时，请仔细阅读本文档的 APP开发说明

在这里插入图片描述

微信小程序端效果图

微信小程序开发时 直接在 vue页面中 引入该插件，不需要配置 复制下方 示例代码 即可运行

在这里插入图片描述

Vue网页端效果图

网页端开发时 直接在 vue页面中 引入该插件，不需要配置 复制下方 示例代码 即可运行

在这里插入图片描述

ml-swiper介绍

  1. 仿抖音短视频（超高性能）H5、APP、小程序全端支持。
  2. 可简单 0 配置，仿抖音短视频，丝滑切换视频效果 ，无限数据加载不卡顿。
  3. 插件下载即用，下方 示例 代码可直接复制运行。
  4. 使用组件需要关闭下拉刷新事件，page.json -> “enablePullDownRefresh”: false

使用说明

  1. APP端需要配置manifest.json -> App模块配置 -> 勾选VideoPlay(视频播放)。
  2. 运行到微信小程序videoSrc要为http/https开头。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

APP端特别说明

APP 端特别说明

APP 端特别说明

APP 端特别说明

在这里插入图片描述

代码演示

以下代码 可自行参考改动，APP、H5、小程序 均可直接复制 粘贴运行，APP端请使用 ·nvue· 以下代码无需特殊改动便可运行

**注意：该组件 依赖于 ml-player播放器组件，请自行下载 ** ml-player 播放器

<template><ml-swiper :videoList="realList" :width="width":height="height"@loadMore="loadMore" @change="onchange" @play="play" @pause="pause" @ended="ended"@error="error" @waiting="waiting" @videoClick="videoClick" @doubleClick="doubleClick" @maskClick="maskClick"><!-- 使用 right 插槽，定义右侧 用户头像、喜欢、收藏、设置等 --><template v-slot:right="{ video, index }"><view class="uniui-right"><!-- 用户头像 --><image v-if="video" class="userAvatar" :src="video?.poster"></image><!-- 喜欢数量 --><uni-icons type="heart-filled" :color="index % 2 == 0 ? '#ff0000' : '#fff'" size="25"></uni-icons><text class="iconTitle">{{ Math.ceil(Math.random() * 9999) }}</text><!-- 收藏数量 --><uni-icons type="star-filled" :color="index % 2 != 0 ?'#ffaa00':'#fff'" size="25"></uni-icons><text class="iconTitle">{{ Math.ceil(Math.random() * 9999) }}</text><!-- 视频设置 --><uni-icons type="gear-filled" size="25" color="#fff"></uni-icons><text class="iconTitle">设置</text></view></template><!-- 使用 bottom 插槽，定义底部 视频标题等 --><template v-slot:bottom="{ video, index }"><!-- 视频标题 --><text class="videoTitle" v-if="video">{{ video?.title }}</text></template></ml-swiper>
</template><script setup >import { ref } from 'vue';import { onLoad } from '@dcloudio/uni-app';const win = uni.getSystemInfoSync();const width = win.windowWidth; // 视频组件宽度，可传可不传const height = win.windowHeight;  // 视频组件高度，可传可不传const realList = ref([]); // 【必须传入，{url:"必填",title:"非必填，建议传入",poster:"预览图，非必填，建议传入",...:"可传入其他自定义参数，插槽中可以拿到"}】const current = ref(0); // 当前播放的视频的索引let context = null; // 视频上下文对象，用于操作视频组件（暂停、播放、倍速、静音、弹幕等）const counter = ref(0);// 视频滑动事件，根据需要，可写可不写，非必须const onchange = (index) => {console.log("onchange-当前索引:", index);current.value = index;};// 是否加载更多，根据需要，可写可不写，非必须const loadMore = (index, size) => {console.log("加载更所视频：", index + " / " + size);// 请求 5 次 后不在请求 if (counter.value > 5) return;// 模拟从后台请求数据，并将请求到的数据追加到列表中getList().forEach((item) => {item.title = realList.value.length + "，" + item.title + item.title + item.title;realList.value.push(item);});counter.value = counter.value + 1;};// 视频开始播放，根据需要，可写可不写，非必须const play = (context) => {context = context;console.log("视频开始播放");uni.showToast({ title: "视频开始播放", icon: "none", mask: false });};// 视频暂停播放，根据需要，可写可不写，非必须const pause = (context) => {context = context;console.log("视频暂停播放");uni.showToast({ title: "视频暂停播放", icon: "none", mask: false });};// 视频播放结束，根据需要，可写可不写，非必须const ended = (context) => {context = context;console.log("视频播放结束");uni.showToast({ title: "视频播放结束", icon: "none", mask: false });};// 视频播放出错，根据需要，可写可不写，非必须const error = (context, event) => {context = context;console.error("视频播放出错：", event);uni.showToast({ title: "视频播放出错", icon: "none", mask: false });};// 视频出现缓冲，根据需要，可写可不写，非必须const waiting = (context) => {context = context;console.error("视频出现缓冲");uni.showToast({ title: "视频出现缓冲", icon: "none", mask: false });};// 视频点击事件，根据需要，可写可不写，非必须const videoClick = (context, video) => {context = context;console.log("点击了视频：", video);uni.showToast({ title: "点击了视频", icon: "none", mask: false });};// 视频双击事件，根据需要，可写可不写，非必须const doubleClick = (context, video) => {context = context;console.log("双击了视频：", video);uni.showToast({ title: "双击了视频", icon: "none", mask: false });};// 蒙层点击事件，根据需要，可写可不写，非必须const maskClick = (index, video) => {context = context;console.log("点击了蒙层：", index, video);uni.showToast({ title: "点击了蒙层", icon: "none", mask: false });};/*** 短视频列表*/const getList = () => {return [{videoId: realList.value.length + 1,title: "抖音美女主播，JK超短裙学生妆美女跳舞展示，爱了爱了。",poster: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",url: "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/2acf176d90718d73",nickName: "陌路",genderName: "男"}},{videoId: realList.value.length + 2,title: "御姐美女抖音作品，来个自拍视频把，好美啊。",poster: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",url: "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: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",nickName: "御姐呀",genderName: "女"}},{videoId: realList.value.length + 3,title: "抖音主播可爱妹子新学的舞蹈，超可爱的美女主播。",poster: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",url: "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: realList.value.length + 4,title: "多个美女带着遮阳帽出去散步自拍视频，好好看。",poster: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",url: "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/2acf176d90718d73",nickName: "蓝姬",genderName: "女"}}];}onLoad(() => {// 组件加载时，模拟请求后台获取到数据，并向列表中追加数据getList().forEach((item) => {item.title = realList.value.length + "，" + item.title + item.title + item.title;realList.value.push(item);});});
</script><style scoped lang="scss">.uniui-right {/* #ifndef APP-NVUE */display: grid;text-align: center;margin: 0 auto;/* #endif */justify-content: center;}.videoTitle {padding: 5px;color: #fff;font-size: 13px;lines: 3;white-space: normal;}.userAvatar {width: 35px;height: 35px;border-radius: 100px;margin-bottom: 10px;border: 1rpx solid #fff;background-color: #fafafa;}.iconTitle {font-size: 12px;color: #fff;text-align: center;padding-bottom: 5px;}
</style>

props

属性名类型默认值可选值说明必填
widthNumber--播放器宽度，默认设备同宽否
heightNumber--播放器高度，默认设备同高否
rightStyleObject, String--自定义右侧样式（用户头像、点赞、收藏…）否
bottomStyleObject, String--自定义底部样式（视频标题、用户昵称…）否
videoListArray--视频资源列表，option 详情见下文是
countNumber2-临界值，当视频剩余 多少时 触发加载更多函数（loadMore）否
showPlayBooleantruefalse应用从后台显示时 是否播放视频，同 uniapp onShow否
hidePauseBooleantruefalse应用从前台隐藏时 是否暂停视频，同 uniapp onHide否

videoList详情配置

属性名类型默认值可选值说明必填
urlString--视频资源的url链接地址是
titleString--视频资源的标题否
posterString--视频资源的预览图否
------
– 其他可根据需要自行定义 –-----
likes喜欢数、star收藏数…Any--可自行添加其他属性，插槽中可使用-
userinfoObject{}-自定义userinfo属性，插槽中可使用-
commentArray[]-自定义comment评论列表数据，插槽中可使用-

事件 Events

事件名返回参数说明
@changeindex：当前索引视频滑动事件，返回当前视频的索引
@playcontext：视频上下文对象，可以操作 video 组件视频开始播放，返回 context 视频上下文对象
@pausecontext：视频上下文对象，可以操作 video 组件视频暂停播放，返回 context 视频上下文对象
@endedcontext：视频上下文对象，可以操作 video 组件视频播放结束，返回 context 视频上下文对象
@errorcontext：视频上下文对象，event：错误信息视频播放出错，返回 context ，event：错误信息
@waitingcontext：视频上下文对象，可以操作 video 组件视频出现缓冲，返回 context 视频上下文对象
@videoClickcontext：视频上下文对象，video：视频数据视频点击事件，返回 context，video：视频数据
@doubleClickcontext：视频上下文对象，video：视频数据视频双击事件，返回 context，video：视频数据
@maskClickindex：当前视频的索引，video：视频数据蒙层点击事件，返回 index，video：视频数据
@loadMoreindex，当前视频的索引，size：视频列表的长度加载更多数据，返回 index，size：视频列表的长度

注意事项

  • APP需要按照文档进行配置。
  • APP端，需要使用.nvue文件。
  • APP端需要配置manifest.json -> App模块配置 -> 勾选VideoPlay(视频播放)。
  • 使用组件需要关闭下拉刷新事件，page.json -> "enablePullDownRefresh": false

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/360631.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Elasticsearch 数据提取 - 最适合这项工作的工具是什么？

Elasticsearch 数据提取 - 最适合这项工作的工具是什么？

作者&#xff1a;来自 Elastic Josh Asres 了解在 Elasticsearch 中为你的搜索用例提取数据的所有不同方式。 对于搜索用例&#xff0c;高效采集和处理来自各种来源的数据的能力至关重要。无论你处理的是 SQL 数据库、CRM 还是任何自定义数据源&#xff0c;选择正确的数据采集…
阅读更多...
Chrome Tracing flow event demo

Chrome Tracing flow event demo

Chrome Tracing flow event demo 1.效果2.解释3.代码 Chrome Tracing flow event demo 1.效果 2.解释 cpu_op 为host上的opkernel 为device上的kernel标记一条线 {"ph": "s", "id": 13, "pid": 1, "tid": 100, "ts&qu…
阅读更多...
09-axios在Vue中的导入与配置

09-axios在Vue中的导入与配置

09-axios 前言首先简单了解什么是Axios&#xff1f;以上完成后就可以使用了 前言 我们接着上一篇文章 08-路由地址的数据获取 来讲。 下一篇文章 10-vuex在Vue中的导入与配置 首先简单了解什么是Axios&#xff1f; Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端…
阅读更多...
AI早班车2024.6.25

AI早班车2024.6.25

全球AI新闻速递 1.高通&#xff1a;开放 AI 模型&#xff0c;帮助开发者打造骁龙 X Elite 平台智能应用。 2.OpenAI&#xff1a;收购数据库分析公司Rockset。 3.大众海外版车型支持 ChatGPT。 4.乐聚夸父人形机器人&#xff0c;搭载华为云盘古具身智能大模型。 5.微软正努力…
阅读更多...
STM32——定时器

STM32——定时器

一、定时器简介&#xff1a; 1.最大59.65s定时&#xff1a; 因为预分频器和自动重装寄存器的最大存储值都是65536&#xff0c;当预分频器设置为65536时&#xff0c;就是当有65536个波形输入到预分频器时&#xff0c;预分频器才会输出一个波形到计数器&#xff0c;然后跟自动重装…
阅读更多...
照片放大工具Topaz Gigapixel AI for Mac v7.1.2

照片放大工具Topaz Gigapixel AI for Mac v7.1.2

Topaz Gigapixel AI软件是一款相当高效的PC端图像大小调整工具&#xff0c;更是一款能够为摄影师、设计师以及图像处理爱好者带来革命性体验的强大软件。它凭借先进的深度学习技术&#xff0c;打破了传统图像大小调整的限制&#xff0c;实现了真正意义上的无损放大和图像恢复。…
阅读更多...
云计算考试题

云计算考试题

Cloud ❀ 云计算-虚拟化常见的两种架构_裸金属架构和宿主型架构的区别-CSDN博客 为啥要成2 11 bcd 16 acd abcd BCD NAS为啥支持文件存储的协议 选BCD 什么是网络文件系统 选bcd 错题 选abc 选bcd 选 abd
阅读更多...
搭建Vue的环境

搭建Vue的环境

目录 # 开篇 步骤一&#xff0c;准备Vue 的环境 步骤二&#xff0c;下载Vue.js的包 步骤三&#xff0c;创建并打开写前端代码的文件夹 步骤四&#xff0c;在VSCode中引入Vue.js的包 步骤五&#xff0c;创建第一个vue.html Vue其他知识 Vue.config命令 # 开篇 介绍&…
阅读更多...
【LLM之KG】KoPA论文阅读笔记

【LLM之KG】KoPA论文阅读笔记

研究背景 知识图谱补全&#xff08;KGC&#xff09;是通过预测知识图谱中缺失的三元组来完善知识图谱的信息。传统方法主要基于嵌入和预训练语言模型&#xff0c;但这些方法往往忽视了知识图谱的结构信息&#xff0c;导致预测效果不佳。 研究目标 本文的研究目标是探索如何将…
阅读更多...
HttpServletRequest・getContentLeng・getContentType区别

HttpServletRequest・getContentLeng・getContentType区别

getContentLength()&#xff1a; 获取客户端发送到服务器的HTTP请求主体内容的字节数&#xff08;长度&#xff09; 如果请求没有正文内容&#xff08;如GET&#xff09;&#xff0c;或者请求头中没有包含Content-Length字段&#xff0c;则该方法返回 -1 getContentType()&am…
阅读更多...
【安卓13 源码】RescueParty救援机制

【安卓13 源码】RescueParty救援机制

RescueParty机制正是在这个背景下诞生的&#xff0c;当它注意到系统或系统核心组件陷入循环崩溃状态时&#xff0c;就会根据崩溃的程度执行不同的救援行动&#xff0c;以期望让设备恢复到正常使用的状态。 开机后会自动重启&#xff0c;进入Recovery界面。经查找&#xff0c;是…
阅读更多...
TSLANet：时间序列模型的新构思

TSLANet：时间序列模型的新构思

实时了解业内动态&#xff0c;论文是最好的桥梁&#xff0c;专栏精选论文重点解读热点论文&#xff0c;围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;…
阅读更多...
树莓派4B学习笔记11：PC端网线SSH连接树莓派_网线连接请求超时问题解决

树莓派4B学习笔记11：PC端网线SSH连接树莓派_网线连接请求超时问题解决

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 今日学习使用网线连接树莓派&#xff0c;网线可以提供更…
阅读更多...
【昇思初学入门】第七天打卡-模型训练

【昇思初学入门】第七天打卡-模型训练

训练模型 学习心得 构建数据集。这通常包括训练集、验证集&#xff08;可选&#xff09;和测试集。训练集用于训练模型&#xff0c;验证集用于调整超参数和监控过拟合&#xff0c;测试集用于评估模型的泛化能力。 &#xff08;mindspore提供数据集https://www.mindspore.cn/d…
阅读更多...
深度学习：从理论到应用的全面解析

深度学习：从理论到应用的全面解析

引言 深度学习作为人工智能&#xff08;AI&#xff09;的核心技术之一&#xff0c;在过去的十年中取得了显著的进展&#xff0c;并在许多领域中展示了其强大的应用潜力。本文将从理论基础出发&#xff0c;探讨深度学习的最新进展及其在各领域的应用&#xff0c;旨在为读者提供全…
阅读更多...
web自动化（一）selenium安装环境搭建、DrissionPage安装

web自动化（一）selenium安装环境搭建、DrissionPage安装

selenium 简介 selenium是企业广泛应用的web自动化框架 selenium 三大组件 selenium IDE 浏览器插件 实现脚本录制 webDriver 实现对浏览器进行各种操作 Grid 分布式执行 用例同时在多个浏览器执行&#xff0c;提高测试效率 问题&#xff1a;环境搭建复杂&#xff0c;浏览器版…
阅读更多...
PPT的精细化优化与提升策略

PPT的精细化优化与提升策略

&#x1f44f;&#x1f44f;&#x1f44f;欢迎来到我的博客 ! 亲爱的朋友们&#xff0c;欢迎您们莅临我的博客&#xff01;这是一个分享知识、交流想法、记录生活的温馨角落。在这里&#xff0c;您可以找到我对世界独特视角的诠释&#xff0c;也可以与我一起探讨各种话题&#…
阅读更多...
STL——常用算法（二）

STL——常用算法（二）

一、常用拷贝和替换算法 1.copy #include <iostream> #include <vector> #include <algorithm> using namespace std; void printVector(int val) {cout << val << " "; } void test01() {vector<int>v1;for (int i 0; i <…
阅读更多...
【大数据】—谁是世界上最富的人？

【大数据】—谁是世界上最富的人？

引言 在2024年&#xff0c;全球财富的分布再次成为公众和经济学家关注的焦点。随着经济的波动和新兴市场的崛起&#xff0c;亿万富翁的名单也在不断变化。本文将深入探讨这一现象&#xff0c;通过最新的数据可视化分析&#xff0c;揭示世界上最富有的人在2024年的财富状况和趋…
阅读更多...
【Linux】进程信号_1

【Linux】进程信号_1

文章目录 八、进程信号1.信号 未完待续 八、进程信号 1.信号 信号和信号量之间没有任何关系。信号是Linux系统提供的让用户/进程给其他进程发送异步信息的一种方式。 常见信号&#xff1a; 当信号产生时&#xff0c;可选的处理方式有三种&#xff1a;①忽略此信号。②执行该…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023