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,一经查实,立即删除!

相关文章

点大商城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; 三、低代码开发界面介绍四、低代码实现页面跳转五、低代码开发建议 一、什么是低代码 所谓低代码…

基于 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. 命令…

数组题目: 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、…

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

数据丢失预防措施是保护企业或个人重要数据的重要手段。以下是一些有效的预防措施&#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小时精选的「软件测试」资…

代码随想录算法训练营第五十三天|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…

基于法医调查算法优化概率神经网络PNN的分类预测 - 附代码

基于法医调查算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于法医调查算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于法医调查优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

windows11上安装WSL

Windows电脑上要配置linux&#xff08;这里指ubuntu&#xff09;开发环境&#xff0c;主要有三种方式&#xff1a; 1&#xff09;在windows上装个虚拟机&#xff08;比如vmware&#xff09;。缺点是vmware加载ubuntu后系统会变慢很多&#xff0c;而且需要通过samba来实现window…

计算机组成原理。3-408

1.动态存储和静态存储 2.双端口RAM 注意&#xff1a;cpu通过地址线和数据线读写数据时&#xff0c;不能同时写&#xff0c;但可以同时读&#xff0c;也不能一边读一边写。 3.多体并行存储器 分为高位存储和低位存储 小结 4.磁盘存储器的组成 5.磁盘的性能指标 磁盘读写寻道…

Vue中Slot的使用指南

目录 前言 什么是slot&#xff1f; 单个slot的使用 具名slot的使用 作用域插槽 总结 前言 在Vue中&#xff0c;slot是一种非常强大和灵活的功能&#xff0c;它允许你在组件模板中预留出一个或多个"插槽"&#xff0c;然后在使用这个组件的时候动态地填充内容。这…

TSINGSEE青犀智能分析网关道路积水识别AI算法方案

在各处的街道、路口等区域&#xff0c;及时发现道路积水问题&#xff0c;可以大大减少城市管理部门压力&#xff0c;及时处理&#xff0c;减少交通事故与人员摔倒事故。通过道路积水AI算法&#xff0c;能有效提高城市管理部门效率&#xff0c;优化城市管理方式。 那么&#xff…

【Web】PhpBypassTrick相关例题wp

目录 ①[NSSCTF 2022 Spring Recruit]babyphp ②[鹤城杯 2021]Middle magic ③[WUSTCTF 2020]朴实无华 ④[SWPUCTF 2022 新生赛]funny_php 明天中期考&#xff0c;先整理些小知识点冷静一下 ①[NSSCTF 2022 Spring Recruit]babyphp payload: a[]1&b1[]1&b2[]2&…

NLP的使用

参考&#xff1a; Apache openNLP 简介 - 链滴 (ld246.com) opennlp 模型下载地址&#xff1a;Index of /apache/opennlp/models/ud-models-1.0/ (tencent.com) OpenNLP是一个流行的开源自然语言处理工具包&#xff0c;它提供了一系列的NLP模型和算法。然而&#xff0c;Open…