当前位置: 首页 > news >正文

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

注意事项

  • APP全屏需要按照文档基本用法进行配置,
  • APP端如果需要全屏倍速及试看,需要使用.nvue文件

相关文章:

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

sunny-video视频倍速播放器 组件名&#xff1a;sunny-video 效果图 img1img2img3img4 平台差异说明 目前已应用到APP&#xff08;安卓、iOS&#xff09;、微信&#xff08;小程序、H5&#xff09;其它平台未测试 安装方式 本组件符合easycom规范&#xff0c;HBuilderX 2.5…...

【微软技术栈】与其他异步模式和类型互操作

本文内容 任务和异步编程模型 (APM)任务和基于事件的异步模式 (EAP)任务和等待句柄 .NET 中异步模式的简短历史记录&#xff1a; .NET Framework 1.0 引进了 IAsyncResult 模式&#xff0c;也称为异步编程模型 (APM) 或 Begin/End 模式。.NET Framework 2.0 增加了基于事件的…...

计算机毕业设计 基于微信小程序的“共享书角”图书借还管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…...

腾讯云CVM标准型SA5云服务器AMD EPYC Bergamo处理器

腾讯云服务器标准型SA5实例是最新一代的标准型实例&#xff0c;CPU采用AMD EPYC™ Bergamo全新处理器&#xff0c;采用最新DDR5内存&#xff0c;默认网络优化&#xff0c;最高内网收发能力达4500万pps。腾讯云百科txybk.com分享腾讯云标准型SA5云服务器CPU、内存、网络、性能、…...

网站要怎么进行维护和防御攻击

随着数字经济的不断发展&#xff0c;互联网各业都在稳步发展&#xff0c;但是很多站长搭建网站程序后也不知道怎么去维护网站的稳定和是否有漏洞后门等&#xff0c;为此德迅云安全专门为各大站长研发了网站监测产品 知道网站表现&#xff1a;网站监测可以帮助您了解您的网站的…...

代码随想录二刷 | 哈希表 |四数相加II

代码随想录二刷 &#xff5c; 哈希表 &#xff5c;四数相加II 题目描述解题思路 & 代码实现 题目描述 454.四数相加II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0…...

Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决

Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决 问题描述&#xff1a; 长按TextField后&#xff0c;显示剪切、复制等选项为英文&#xff0c;如下图所示&#xff0c;这是因为问未设置语言本地化&#xff0c;我们需要进行设置。 首先在pubspec.yaml加入以下依赖…...

如何找出excel中两列数据中不同的值(IF函数的用法)

第一部分&#xff0c;举例&#xff1a; 例1&#xff1a; 如下图所示&#xff0c;A列和B列是需要比较的数据&#xff0c;C列为对比规则&#xff1a;IF(A2B2,"是","否") 示例图 例2&#xff1a;给B列的成绩评等级 C列的规则&#xff1a; IF(B2>85,&qu…...

C# WPF上位机开发(掌握一点c#基础)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 wpf虽然比较简单&#xff0c;但是最好还是要有一点c#的基础比较好。本身wpf有点类似于web开发&#xff0c;前端和html差不多&#xff0c;后端则和j…...

UIkit-UIAlertContent

简单Demo //注意&#xff01;&#xff01;&#xff01;必须放在viewController的viewDidAppear里面&#xff0c;viewDidLoad里面不行 - (void)viewDidAppear:(BOOL)animated {// 创建 UIAlertControllerUIAlertController *alertController [UIAlertController alertControll…...

C语言-内存函数详解

文章目录 1. memcpy使用和模拟实现2. memmove使用和模拟实现3. memset函数的使用4. memcmp函数的使用 1. memcpy使用和模拟实现 返回类型和参数&#xff1a; void * memcpy ( void * destination, const void * source, size_t num );1.函数memcpy从source的位置开始向后复制…...

超越噪音,让音乐重获新生:iZotope RX 10音频降噪修复软件

在音乐制作或者音频处理的过程中&#xff0c;噪音往往是一个让人头痛的问题。无论是环境噪音&#xff0c;还是设备产生的噪音&#xff0c;都会对音频质量产生重大影响。而现在&#xff0c;我们有了iZotope RX 10&#xff0c;这款专业的音频降噪修复软件&#xff0c;可以将你从噪…...

【兔子王赠书第9期】ChatGPT进阶:提示工程入门

文章目录 写在前面ChatGPT推荐图书关键点编辑推荐内容简介推荐理由 粉丝福利写在后面 写在前面 人类一直在寻找、制造并使用工具&#xff0c;以扩展我们的能力&#xff0c;适应我们的环境&#xff0c;甚至超越我们的生物限制。现在&#xff0c;我们正站在一个历史性的分水岭之…...

机器学习基础Matplotlib绘图

一、运行环境 学习工具&#xff1a;jupyter-notebookpython版本&#xff1a;311系统&#xff1a;Win11 二、什么是matplotlib&#xff1f; matplotlib是基于python生态开发的一个可视化绘图库&#xff0c;它的出现让python在数据分析及机器学习方面占了重要的一部分&#…...

【高效开发工具系列】PlantUML入门使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

【第三节:微信小程序 3、app.js配置】微信小程序入门,以思维导图的方式展开3

目录 提供了2个函数&#xff1a; app.js配置 【第三节&#xff1a;微信小程序 3、app.js配置】微信小程序入门&#xff0c;以思维导图的方式展开3 提供了2个函数&#xff1a; app() getApp() --------------------------- app.js配置 App() 功能 Ap…...

Vue 或者 React 中,什么情况下会用 Es6 的 Class 类

// 问个问题&#xff0c;一般在 Vue 或者 React中 // 在框架具备很多组件通讯技术或者js语法支持的情况下&#xff0c;什么情况下会用 Es6 的 Class类&#xff1f;在Vue或React中&#xff0c;通常会在以下情况下使用ES6的Class类&#xff1a; 复杂组件或模块: 当需要构建较为复…...

【Android】Android Framework系列--Launcher3各启动场景源码分析

Android Framework系列–Launcher3各启动场景源码分析 Launcher3启动场景 Launcher3是Android系统提供的默认桌面应用(Launcher)&#xff0c;它的源码路径在“packages/apps/Launcher3/”。 Launcher3的启动场景主要包括&#xff1a; 开机后启动&#xff1a;开机时&#xff…...

【Qt开发流程】之拖放操作1:介绍

描述 Drag and drop 提供了一种简单的可视化机制&#xff0c;用户可以使用它在应用程序之间和应用程序内部传输信息。拖放的功能类似于剪贴板的剪切和粘贴机制。 本文描述了基本的拖放机制&#xff0c;并概述了在自定义控件中启用该机制的方法。Qt的许多控件也支持拖放操作&a…...

招募引流模式是实体门店吸引顾客的一种有效策略

在如今激烈的市场竞争和庞大的客户需求中&#xff0c;应该采取什么样的方式来应对&#xff0c;才能找到自己的一席之地。招募引流模式是实体门店吸引顾客的一种有效策略&#xff0c;通常招募体验官或合作伙伴&#xff0c;让他们协助门店进行推广活动&#xff0c;达到增加客流量…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

STM32标准库-ADC数模转换器

文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”&#xff1a;输入模块&#xff08;GPIO、温度、V_REFINT&#xff09;1.4.2 信号 “调度站”&#xff1a;多路开关1.4.3 信号 “加工厂”&#xff1a;ADC 转换器&#xff08;规则组 注入…...