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

2023-11-24 18:45

本文主要是介绍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

这篇关于uniapp视频倍速播放插件,uniapp视频试看插件——sunny-video使用文档的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/422392

相关文章

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security?—— 核心思想二、如何在 Java 项目中使用?——

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

C#实现一键批量合并PDF文档

《C#实现一键批量合并PDF文档》这篇文章主要为大家详细介绍了如何使用C#实现一键批量合并PDF文档功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言效果展示功能实现1、添加文件2、文件分组(书签)3、定义页码范围4、自定义显示5、定义页面尺寸6、PDF批量合并7、其他方法

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》:本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法,没有