uniapp视频倍速播放插件,uniapp视频试看插件——sunny-video使用文档

sunny-video视频倍速播放器

组件名:sunny-video

效果图

img1img2img3img4

平台差异说明

  • 目前已应用到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

属性名类型默认值可选值说明
srcString‘’-视频播放地址
loop 1.1.3Booleanfalsetrue是否循环播放
muted 1.1.3Booleanfalsetrue是否静音播放
titleString‘’-视频标题
posterString‘’-视频封面
videoHeightString, Number230px-视频高度
videoWidth 1.1.3String, Number750rpx-视频宽度
playImgHeightString, Number70rpx-播放图标按钮宽高
playImgStringbase64-播放按钮图标
showMuteBtnBooleanfalsetrue是否显示静音按钮
isExitFullScreenBooleantruefalse播放完毕是否退出全屏
tipText 1.1.0String‘试看已结束,本片是会员专享内容’-试看提示的文字
btnText 1.1.0String‘成为会员免费观看’-试看按钮的文字
trialTime 1.1.0Number0-视频试看时间(秒), 不需要试看功能则默认为0
speedBoxWidth 1.1.3String, Number160rpx-倍速盒子宽度

事件 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.1position跳转到指定位置,单位 s

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

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

相关文章

emoji

图标的网址&#xff1a; webfx emojipedia 1.可以直接复制粘贴 2.按照其格式文本表示&#xff08;Shortcodes&#xff09; &#x1f680; &#x1f604; &#x1f92b; ✍️ &#x1f480; 还有关于通过链接引用shield.io中的图标&#xff0c;没有深究&#xff0c;不…

第六十三周周报

学习目标&#xff1a; 项目 实验和论文 学习时间&#xff1a; 2023.11.18-2023.11.24 学习产出&#xff1a; 论文 对论文进行了润色和修改 实验 1、上周DiffusionRelative的结果无法再次复现&#xff0c;新跑的FID与以前实验跑的结果相差不大&#xff0c;上周的结果应…

点大商城V2.5.3分包小程序端+小程序上传提示限制分包制作教程

这几天很多播播资源会员反馈点大商城V2.5.3小程序端上传时提示大小超限&#xff0c;官方默认单个包都不能超过2M&#xff0c;总分包不能超20M。如下图提示超了93KB&#xff0c;如果出现超的不多情况下可采用手动删除一些images目录下不使用的图片&#xff0c;只要删除超过100KB…

鸿蒙4.0开发笔记之DevEco Studio如何使用低代码开发模板进行开发的详细流程(六)

鸿蒙低代码开发 一、什么是低代码二、如何进行鸿蒙低代码开发1、 创建低代码开发工程&#xff08;方式壹&#xff09;2、已有工程则创建Visual文件&#xff08;方拾贰&#xff09; 三、低代码开发界面介绍四、低代码实现页面跳转五、低代码开发建议 一、什么是低代码 所谓低代码…

Qt+xml解析

文章目录 一、xml文件介绍1.1 XML 文件结构和基本概念1.2 XML 文件示例二、Qt读取xml文件2.1 Qt读取xml 步骤2.2 基本操作和函数 QXmlStreamReader2.3 错误处理errorString和hasError2.4 Qt读取xml实例三、实际项目一、xml文件介绍 1.1 XML 文件结构和基本概念 XML(可扩展标…

三、ts高级笔记,

文章目录 18、d.ts声明文件19、Mixin混入20、Decorator装饰器的使用21、-高级proxy拦截_Reflect元储存22、-高级写法Partial-Pick23、Readonly只读_Record套对象24、高阶写法Infer占位符25、Inter实现提取类型和倒叙递归26、object、Object、{}的区别27、localStorage封装28、协…

基于 STM32F7 和神经网络的实时人脸特征提取与匹配算法实现

本文讨论了如何使用 STM32F7 和神经网络模型来实现实时人脸特征提取与匹配算法。首先介绍了 STM32F7 的硬件和软件特点&#xff0c;然后讨论了人脸特征提取和匹配算法的基本原理。接下来&#xff0c;我们将重点讨论如何在 STM32F7 上实现基于神经网络的人脸特征提取与匹配算法&…

微机原理_3

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案,请将选定的答案填涂在答题纸的相应位置上。) 在 8086 微机系统中&#xff0c;完成对指令译码操作功能的部件是&#xff08;)。 A. EU B. BIU C. SRAM D. DRAM 使计算机执行某…

【机器学习】聚类(一):原型聚类:K-means聚类

文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. Kmeans类a. 构造函数b. 闵可夫斯基距离c. 初始化簇心d. K-means聚类e. 聚类结果可视化 2. 辅助函数3. 主函数a. 命令…

ElasticSearch之虚拟内存

查看当前Linux系统中vm.max_map_count变量的值&#xff0c;命令如下&#xff1a; sysctl vm.max_map_count执行结果的样例&#xff0c;如下&#xff1a; vm.max_map_count 65530修改参数vm.max_map_count的值&#xff0c;命令如下&#xff1a; sysctl -w vm.max_map_count2…

数组题目: 665. 非递减数列、453. 最小移动次数使数组元素相等、283. 移动零、189. 旋转数组、396. 旋转函数

665. 非递减数列 题解&#xff1a; 题目要求一个非递减数列&#xff0c;我们可以考虑需要更改的情况&#xff1a; nums {4, 2, 5} 对于这个nums&#xff0c;由于2的出现导致非递减&#xff0c;更改的情况就是要么4调到<2&#xff0c;要么2调到4,5. nums {1, 4, 2, 5} …

人工智能-注意力机制之注意力汇聚:Nadaraya-Watson 核回归

查询&#xff08;自主提示&#xff09;和键&#xff08;非自主提示&#xff09;之间的交互形成了注意力汇聚&#xff1b; 注意力汇聚有选择地聚合了值&#xff08;感官输入&#xff09;以生成最终的输出。 本节将介绍注意力汇聚的更多细节&#xff0c; 以便从宏观上了解注意力机…

Lubuntu 23.10用户可使用LXQt 1.4桌面

导读在众多 Lubuntu 用户的要求下&#xff0c;Lubuntu 开发人员决定将 LXQt 1.4 桌面环境向后移植到最新的 Lubuntu 23.10 &#xff08;Mantic Minotaur&#xff09; 版本。 是的&#xff0c;您没看错&#xff0c;您现在可以使用官方的 Lubuntu Backports PPA&#xff08;个人软…

黑马点评笔记 分布式锁

文章目录 分布式锁基本原理和实现方式对比Redis分布式锁的实现核心思路实现分布式锁版本一Redis分布式锁误删情况说明解决Redis分布式锁误删问题分布式锁的原子性问题分布式锁-Redission分布式锁-redission可重入锁原理分布式锁-redission锁重试和WatchDog机制分布式锁-redissi…

01、Tensorflow实现二元手写数字识别

01、Tensorflow实现二元手写数字识别&#xff08;二分类问题&#xff09; 开始学习机器学习啦&#xff0c;已经把吴恩达的课全部刷完了&#xff0c;现在开始熟悉一下复现代码。对这个手写数字实部比较感兴趣&#xff0c;作为入门的素材非常合适。 基于Tensorflow 2.10.0 1、…

pandas获取年月第一天、最后一天,加一秒、加一天、午夜时间

Timestamp对象 # ts = pandas.Timestamp(year=2023, month=10, day=15, # hour=15, minute=5, second=50, tz="Asia/Shanghai") ts = pandas.Timestamp("2023-10-15 15:05:50", tz="Asia/Shanghai") # 2023-10-15 15:05…

数据丢失预防措施包括什么

数据丢失预防措施是保护企业或个人重要数据的重要手段。以下是一些有效的预防措施&#xff1a; 可以通过域之盾软件来实现数据防丢失&#xff0c;具体的功能包括&#xff1a; https://www.yuzhidun.cn/https://www.yuzhidun.cn/ 1、备份数据 定期备份所有重要数据&#xff0…

unittest指南——不拼花哨,只拼实用

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

centos7 docker开启认证的远程端口2376配置

docker开启2375会存在安全漏洞 暴露了2375端口的Docker主机。因为没有任何加密和认证过程&#xff0c;知道了主机IP以后&#xff0c;&#xff0c;任何人都可以管理这台主机上的容器和镜像&#xff0c;以前贪图方便&#xff0c;只开启了没有认证的docker2375端口&#xff0c;后…

代码随想录算法训练营第五十三天|1143.最长公共子序列 1035.不相交的线 53. 最大子序和

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 1143.最长公共子序列 class Solution:def longestCommonSubsequence(self, text1: str, text2: str) -> int:dp [[0] * (len(text2) 1) for _ i…