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…...

招募引流模式是实体门店吸引顾客的一种有效策略
在如今激烈的市场竞争和庞大的客户需求中,应该采取什么样的方式来应对,才能找到自己的一席之地。招募引流模式是实体门店吸引顾客的一种有效策略,通常招募体验官或合作伙伴,让他们协助门店进行推广活动,达到增加客流量…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...

微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...