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

news2024/10/6 22:30:44

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.coloradmin.cn/o/1862409.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于Spring Boot+VUE职称评审管理系统

基于Spring Boot+VUE职称评审管理系统

1管理员功能模块 管理员登录&#xff0c;通过填写注册时输入的用户名、密码、角色进行登录&#xff0c;如图1所示。 图1管理员登录界面图 管理员登录进入职称评审管理系统可以查看首页、个人中心、用户管理、评审员管理、省份管理、评审条件管理、职称申请管理、结果公布管理、…
阅读更多...
昇思25天学习打卡营第2天|onereal》

昇思25天学习打卡营第2天|onereal》

今天学习内容是了解华为昇思平台。虽然打了卡&#xff0c;但是我的jupyter里面并没有播放按钮&#xff0c;所以还是无法运行代码。反映给昇思吴彦祖小哥了&#xff0c;他说需要专家帮我解决。 我还是要自我表扬一下&#xff0c;不懂就问&#xff0c;切莫不懂装懂&#xff0c;那…
阅读更多...
【Linux】常用基本命令

【Linux】常用基本命令

wget网址用于直接从网上下载某个文件到服务器&#xff0c;当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候&#xff0c;可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…
阅读更多...
Opencv学习项目6——pyzbar

Opencv学习项目6——pyzbar

在之前我们学习了解码图片中的二维码&#xff0c;这次我们开启摄像头来解码视频中二维码 开启摄像头 # 打开摄像头 cap cv2.VideoCapture(0) cap.set(3, 640) # 设置摄像头画面宽度 cap.set(4, 480) # 设置摄像头画面高度 我使用的是笔记本上的摄像头来进行的&#xff0c;…
阅读更多...
数据结构（Java）：顺序表集合类ArrayList

数据结构（Java）：顺序表集合类ArrayList

1、线性表 线性表&#xff0c;在逻辑结构上是连续的&#xff08;可理解为连续的一条直线&#xff0c;一对一的关系&#xff09;&#xff0c;而在物理结构上不一定连续&#xff0c;通常以数组和链式结构进行存储。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线…
阅读更多...
【最佳实践】 使用react写一个sliderbar 侧滑导航组件

【最佳实践】 使用react写一个sliderbar 侧滑导航组件

大家好&#xff0c;我是DX3906 我们现在使用React 来实现一个侧边导航组件&#xff08;sidebar&#xff09;&#xff0c;你可以使用 CSS 和 React 的状态管理来实现。下面是一个简单的示例&#xff0c;展示如何创建一个基本的侧边导航组件&#xff1a; 1. 安装依赖&#xff1a;…
阅读更多...
浅谈逻辑控制器之Include控制器

浅谈逻辑控制器之Include控制器

浅谈逻辑控制器之Include控制器 “Include控制器”是一个特别实用的功能&#xff0c;它允许用户将一个或多个测试片段&#xff08;通常是请求&#xff09;包含到不同的测试计划或模块中&#xff0c;从而实现代码的复用和测试结构的优化。本文档将详细介绍JMeter中的Include控制…
阅读更多...
并发编程-02深入理解Java线程

并发编程-02深入理解Java线程

一 线程基础知识 1.1 理解线程和进程 进程和线程的概念: 进程: 程序由指令和数据组成&#xff0c;但这些指令要运行&#xff0c;数据要读写&#xff0c;就必须将指令加载至CPU&#xff0c;数据加载至内存。在指令运行过程中还需要用到磁盘、网络等设备。进程就是用来加载指…
阅读更多...
Gobject tutorial 十

Gobject tutorial 十

参考&#xff1a;GLib – 2.0: The Main Event Loop The Main Event Loop 主事件循环管理所有可用的事件源&#xff0c;事件可以是各种类型、各种数量的。比如说文件描述符(普通文件、管道以及套接字)和超时。 新类型的事件源可以通过函数g_source_attach来添加。为了使多个…
阅读更多...
输入/输出文字

输入/输出文字

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在海龟绘图中&#xff0c;也可以输入或者输出文字&#xff0c;下面分别进行介绍。 1 输出文字 输出文字可以使用write()方法来实现&#xff0c;语…
阅读更多...
【QCustomPlot实战系列】QCPGraph区域高亮

【QCustomPlot实战系列】QCPGraph区域高亮

使用QCPDataSelection来设置选中的区域&#xff0c;并将QCPGraph的可选择区域设置成QCP::stMultipleDataRanges void AreaPieces::initCustomPlot(QCustomPlot *parentPlot) {QVector<double> x {0, 1, 2, 3, 4, 5, 6, 7, 8};QVector<double> y {200, 560, 750…
阅读更多...
解决Vue+Vite打包后Leaflet的marker图标不显示的问题

解决Vue+Vite打包后Leaflet的marker图标不显示的问题

前言 用Leaflet写关于WebGIS的开发&#xff0c;用Vite或者webpack打包&#xff0c;打包后会找不到图标&#xff0c;如下所示。 直言的说&#xff0c;笔者去网上搜了搜&#xff0c;其实收到一个比较好是答案。网址如下。 &#xff08;完美解决~&#xff09;关于VueLeaflet添加…
阅读更多...
P2实验室装修标准都有哪些

P2实验室装修标准都有哪些

P2实验室&#xff08;也称为生物安全二级实验室&#xff0c;BSL-2实验室&#xff09;的装修标准需要满足一系列的设计和施工要求&#xff0c;以确保实验室的安全性和功能性。因此&#xff0c;P2实验室装修标准不仅要满足一般实验室的要求&#xff0c;还需符合生物安全的特殊规定…
阅读更多...
企业运维六边形战士 质量稳定 效率为王

企业运维六边形战士 质量稳定 效率为王

随着信息化的不断深入和扩展&#xff0c;企业IT系统的复杂性和设备多样性日益增加。为了保障业务的高可用性和连续性&#xff0c;企业需要一个全面、高效、智能的一体化运维管理平台。在用户市场的推动下&#xff0c;LinkSLA智能运维管家展现出【六边形战士】的优质属性&#x…
阅读更多...
数据结构-----【链表:刷题】

数据结构-----【链表:刷题】

-------------------------------------------基础题参照leetcode---------------------------------------------------------------------------------------------------------- 【2】两数相加 /*** Definition for singly-linked list.* struct ListNode {* int val;…
阅读更多...
ChatBI开源实现: 基于SuperSonic的AI+BI的产品设计

ChatBI开源实现: 基于SuperSonic的AI+BI的产品设计

产品起源 为什么要做这样的产品&#xff1f;文章《ChatBI开源实现: AIBI的产品设计》中有介绍 为什么要自己做这样的产品&#xff1f;1、低成本试错&#xff1b;2、未来数据生态入口&#xff1b; 为什么要基于Supersonic做&#xff1f; 开源协议友好&#xff1a;可魔改商用 社区…
阅读更多...
仿真分析 + AI：创建基础设施的新未来

仿真分析 + AI：创建基础设施的新未来

吴付标 大漠风电&#xff0c;深远海平台&#xff0c;一带一路上的高铁、电站…… 在新一轮的基础设施建设浪潮中&#xff0c;项目与结构变得越来越复杂&#xff0c;碳中和与可持续发展的要求越来越高&#xff0c;仿真分析技术应运而兴。 在最近召开的Bentley软件2024创新智旅 …
阅读更多...
【Python/Pytorch - 网络模型】-- 高阶SVD算法

【Python/Pytorch - 网络模型】-- 高阶SVD算法

文章目录 文章目录 00 写在前面01 基于Python版本的高阶SVD算代码02 HOSVD 的步骤 00 写在前面 高阶奇异值分解&#xff08;Higher-Order SVD&#xff0c;HOSVD&#xff09;是一种将传统的奇异值分解&#xff08;SVD&#xff09;扩展到高阶张量的方法。它能够将一个高阶张量分…
阅读更多...
【数据科学】12小时学完数据科学(入门)---二

【数据科学】12小时学完数据科学(入门)---二

阅读更多...
FileNotFoundError: Cannot find DGL C++ graphbolt library at ...

FileNotFoundError: Cannot find DGL C++ graphbolt library at ...

FileNotFoundError: Cannot find DGL C graphbolt library at ...-CSDN博客https://blog.csdn.net/weixin_44017989/article/details/137658749
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023