uniapp视频倍速播放插件,uniapp视频试看插件——sunny-video使用文档
sunny-video视频倍速播放器
组件名:sunny-video
效果图
| img1 | img2 | img3 | img4 |
|---|---|---|---|
![]() | ![]() | ![]() | ![]() |
平台差异说明
- 目前已应用到APP(安卓、iOS)、微信(小程序、H5)
- 其它平台未测试
安装方式
- 本组件符合easycom规范,
HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components。 - uni-app插件市场链接 —— https://ext.dcloud.net.cn/plugin?id=11982
基本用法
- APP端需要配置
manifest.json>App模块配置勾选VideoPlay(视频播放) - App端:3.6.14 以及 手机系统 iOS16 以上video全屏 需要配置应用支持横屏: 在
manifest.json文件内app-plus节点下新增screenOrientation配置,设置值为["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]。如下:
"app-plus" : {"screenOrientation" : ["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]}
代码演示
<template><view><sunny-video ref="sunnyVideo" title="测试视频" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @timeupdate="timeupdate" /></view>
<template><script>export default {data() {return {}},methods: {timeupdate(e){console.log('timeupdate:', e)}}}
</script><style>
</style>
Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| src | String | ‘’ | - | 视频播放地址 |
loop 1.1.3 | Boolean | false | true | 是否循环播放 |
muted 1.1.3 | Boolean | false | true | 是否静音播放 |
| title | String | ‘’ | - | 视频标题 |
| poster | String | ‘’ | - | 视频封面 |
| videoHeight | String, Number | 230px | - | 视频高度 |
videoWidth 1.1.3 | String, Number | 750rpx | - | 视频宽度 |
| playImgHeight | String, Number | 70rpx | - | 播放图标按钮宽高 |
| playImg | String | base64 | - | 播放按钮图标 |
| showMuteBtn | Boolean | false | true | 是否显示静音按钮 |
| isExitFullScreen | Boolean | true | false | 播放完毕是否退出全屏 |
tipText 1.1.0 | String | ‘试看已结束,本片是会员专享内容’ | - | 试看提示的文字 |
btnText 1.1.0 | String | ‘成为会员免费观看’ | - | 试看按钮的文字 |
trialTime 1.1.0 | Number | 0 | - | 视频试看时间(秒), 不需要试看功能则默认为0 |
speedBoxWidth 1.1.3 | String, Number | 160rpx | - | 倍速盒子宽度 |
事件 Events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| play | 监听开始播放 | - |
| pause | 监听视频暂停 | - |
| playError | 视频播放出错时触发 | - |
| videoEnded | 视频播放结束触发 | - |
| timeupdate | 播放进度变化时触发 | event.detail={currentTime, duration}。触发频率 250ms 一次 |
fullscreenchange 1.1.3 | 当视频进入和退出全屏时触发 | Boolean |
handleBtn 1.1.0 | 点击试看按钮时触发 | - |
trialEnd 1.1.0 | 试看结束时触发 | - |
方法 Methods
- 需要通过ref获取组件才能调用
| 名称 | 参数 | 说明 |
|---|---|---|
| changePlay | 开始播放视频 | |
changePause 1.1.3 | 暂停播放视频 | |
showTrialEnd 1.1.0 | 控制试看模块显示 | |
closeTrialEnd 1.1.0 | 控制试看模块隐藏 | |
seek 1.1.1 | position | 跳转到指定位置,单位 s |
注意事项
- APP全屏需要按照文档基本用法进行配置,
- APP端如果需要全屏倍速及试看,需要使用
.nvue文件
相关文章:
uniapp视频倍速播放插件,uniapp视频试看插件——sunny-video使用文档
sunny-video视频倍速播放器 组件名:sunny-video 效果图 img1img2img3img4 平台差异说明 目前已应用到APP(安卓、iOS)、微信(小程序、H5)其它平台未测试 安装方式 本组件符合easycom规范,HBuilderX 2.5…...
【微软技术栈】与其他异步模式和类型互操作
本文内容 任务和异步编程模型 (APM)任务和基于事件的异步模式 (EAP)任务和等待句柄 .NET 中异步模式的简短历史记录: .NET Framework 1.0 引进了 IAsyncResult 模式,也称为异步编程模型 (APM) 或 Begin/End 模式。.NET Framework 2.0 增加了基于事件的…...
计算机毕业设计 基于微信小程序的“共享书角”图书借还管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...
腾讯云CVM标准型SA5云服务器AMD EPYC Bergamo处理器
腾讯云服务器标准型SA5实例是最新一代的标准型实例,CPU采用AMD EPYC™ Bergamo全新处理器,采用最新DDR5内存,默认网络优化,最高内网收发能力达4500万pps。腾讯云百科txybk.com分享腾讯云标准型SA5云服务器CPU、内存、网络、性能、…...
网站要怎么进行维护和防御攻击
随着数字经济的不断发展,互联网各业都在稳步发展,但是很多站长搭建网站程序后也不知道怎么去维护网站的稳定和是否有漏洞后门等,为此德迅云安全专门为各大站长研发了网站监测产品 知道网站表现:网站监测可以帮助您了解您的网站的…...
代码随想录二刷 | 哈希表 |四数相加II
代码随想录二刷 | 哈希表 |四数相加II 题目描述解题思路 & 代码实现 题目描述 454.四数相加II 给你四个整数数组 nums1、nums2、nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足: 0…...
Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决
Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决 问题描述: 长按TextField后,显示剪切、复制等选项为英文,如下图所示,这是因为问未设置语言本地化,我们需要进行设置。 首先在pubspec.yaml加入以下依赖…...
如何找出excel中两列数据中不同的值(IF函数的用法)
第一部分,举例: 例1: 如下图所示,A列和B列是需要比较的数据,C列为对比规则:IF(A2B2,"是","否") 示例图 例2:给B列的成绩评等级 C列的规则: IF(B2>85,&qu…...
C# WPF上位机开发(掌握一点c#基础)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 wpf虽然比较简单,但是最好还是要有一点c#的基础比较好。本身wpf有点类似于web开发,前端和html差不多,后端则和j…...
UIkit-UIAlertContent
简单Demo //注意!!!必须放在viewController的viewDidAppear里面,viewDidLoad里面不行 - (void)viewDidAppear:(BOOL)animated {// 创建 UIAlertControllerUIAlertController *alertController [UIAlertController alertControll…...
C语言-内存函数详解
文章目录 1. memcpy使用和模拟实现2. memmove使用和模拟实现3. memset函数的使用4. memcmp函数的使用 1. memcpy使用和模拟实现 返回类型和参数: void * memcpy ( void * destination, const void * source, size_t num );1.函数memcpy从source的位置开始向后复制…...
超越噪音,让音乐重获新生:iZotope RX 10音频降噪修复软件
在音乐制作或者音频处理的过程中,噪音往往是一个让人头痛的问题。无论是环境噪音,还是设备产生的噪音,都会对音频质量产生重大影响。而现在,我们有了iZotope RX 10,这款专业的音频降噪修复软件,可以将你从噪…...
【兔子王赠书第9期】ChatGPT进阶:提示工程入门
文章目录 写在前面ChatGPT推荐图书关键点编辑推荐内容简介推荐理由 粉丝福利写在后面 写在前面 人类一直在寻找、制造并使用工具,以扩展我们的能力,适应我们的环境,甚至超越我们的生物限制。现在,我们正站在一个历史性的分水岭之…...
机器学习基础Matplotlib绘图
一、运行环境 学习工具:jupyter-notebookpython版本:311系统:Win11 二、什么是matplotlib? matplotlib是基于python生态开发的一个可视化绘图库,它的出现让python在数据分析及机器学习方面占了重要的一部分&#…...
【高效开发工具系列】PlantUML入门使用
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
【第三节:微信小程序 3、app.js配置】微信小程序入门,以思维导图的方式展开3
目录 提供了2个函数: app.js配置 【第三节:微信小程序 3、app.js配置】微信小程序入门,以思维导图的方式展开3 提供了2个函数: app() getApp() --------------------------- app.js配置 App() 功能 Ap…...
Vue 或者 React 中,什么情况下会用 Es6 的 Class 类
// 问个问题,一般在 Vue 或者 React中 // 在框架具备很多组件通讯技术或者js语法支持的情况下,什么情况下会用 Es6 的 Class类?在Vue或React中,通常会在以下情况下使用ES6的Class类: 复杂组件或模块: 当需要构建较为复…...
【Android】Android Framework系列--Launcher3各启动场景源码分析
Android Framework系列–Launcher3各启动场景源码分析 Launcher3启动场景 Launcher3是Android系统提供的默认桌面应用(Launcher),它的源码路径在“packages/apps/Launcher3/”。 Launcher3的启动场景主要包括: 开机后启动:开机时ÿ…...
【Qt开发流程】之拖放操作1:介绍
描述 Drag and drop 提供了一种简单的可视化机制,用户可以使用它在应用程序之间和应用程序内部传输信息。拖放的功能类似于剪贴板的剪切和粘贴机制。 本文描述了基本的拖放机制,并概述了在自定义控件中启用该机制的方法。Qt的许多控件也支持拖放操作&a…...
招募引流模式是实体门店吸引顾客的一种有效策略
在如今激烈的市场竞争和庞大的客户需求中,应该采取什么样的方式来应对,才能找到自己的一席之地。招募引流模式是实体门店吸引顾客的一种有效策略,通常招募体验官或合作伙伴,让他们协助门店进行推广活动,达到增加客流量…...
第三章:面向对象编程
第三章:面向对象编程 【免费下载链接】wereader 一个浏览器扩展:主要用于微信读书做笔记,对常使用 Markdown 做笔记的读者比较有帮助。 项目地址: https://gitcode.com/gh_mirrors/wer/wereader 3.1 类与对象 面向对象编程的核心是类和…...
二叉树层序遍历与高度计算详解
一、先解答上次的思考题Day12 已经给出练习答案,这里不再重复,我们直接进入层序遍历。二、今天学习目标理解层序遍历(按一层一层打印)用队列实现层序遍历(BFS 思想)递归 迭代两种方式求二叉树高度完整可运…...
光伏逆变器测试避坑:派能协议下电流值5倍偏差的修复实录
光伏逆变器测试实战:派能协议电流值异常分析与精准修复指南 光伏系统集成测试中,协议解析环节往往成为数据异常的"重灾区"。去年某分布式光伏项目中,我们遭遇了逆变器显示电流值异常放大5倍的典型案例——BMS实际发送95A电流数据&a…...
Python小白也能学会!3个月蜕变AI开发高手,收藏这份超全路线图!
本文针对程序员学习大模型提供实用路线,强调Python基础即可入门。文章分阶段介绍12步学习计划,从基础理论到应用开发,再到高阶进阶,并给出3个月时间规划与关键提醒。核心观点是:掌握大模型开发并不难,关键在…...
AI开发工具对决:LangChain/LangGraph深度编码 vs. Dify/Coze低代码平台,如何精准选择?
1. 当AI开发遇上选择困难症:从零理解两种技术路线 最近在技术社区看到不少开发者纠结:该用LangChain这类代码框架还是Dify这类低代码平台?这就像装修房子时面临的抉择——是买毛坯房自己设计(LangChain),还…...
Schematics多态模型类型深度解析:处理复杂数据结构的高级技巧
Schematics多态模型类型深度解析:处理复杂数据结构的高级技巧 【免费下载链接】schematics Python Data Structures for Humans™. 项目地址: https://gitcode.com/gh_mirrors/sc/schematics Schematics是Python领域一款强大的数据结构处理库,专为…...
从Doorbell到RoCE包:深度解析RDMA Tx数据流的硬件协同
1. 从门铃到数据包:RDMA发送流程全景图 想象一下你在一家高级餐厅点餐的场景:服务员(CPU)把你的订单(WQE)写在厨房门口的订单板(SQ环形缓冲区)上,然后按一下服务铃&…...
比迪丽LoRA模型参数深度解析:从CFG Scale到Clip Skip的调参实战
比迪丽LoRA模型参数深度解析:从CFG Scale到Clip Skip的调参实战 如果你已经能用比迪丽LoRA模型生成不错的图片,但总觉得效果差点意思——要么风格不够对味,要么细节不够精致,或者就是感觉“不够像”——那么恭喜你,来…...
Zotero PDF Translate:让学术研究跨越语言边界的智能翻译解决方案
Zotero PDF Translate:让学术研究跨越语言边界的智能翻译解决方案 【免费下载链接】zotero-pdf-translate Translate PDF, EPub, webpage, metadata, annotations, notes to the target language. Support 20 translate services. 项目地址: https://gitcode.com/…...
如何用Python+Neo4j构建医疗知识图谱?从数据清洗到因果推断实战
医疗知识图谱实战:用PythonNeo4j实现药品副作用因果推断 在医疗AI领域,知识图谱正成为连接海量医学数据与临床决策的桥梁。当一位患者同时服用多种药物时,如何准确预测潜在的药物相互作用?当流行病学研究发现某种症状与基因突变相…...



