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…...
招募引流模式是实体门店吸引顾客的一种有效策略
在如今激烈的市场竞争和庞大的客户需求中,应该采取什么样的方式来应对,才能找到自己的一席之地。招募引流模式是实体门店吸引顾客的一种有效策略,通常招募体验官或合作伙伴,让他们协助门店进行推广活动,达到增加客流量…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...



