uniapp 对video视频组件嵌套倍速按钮

已于 2024-03-13 09:42:02 修改
阅读量705 收藏 7
点赞数 17
文章标签： uni-app
于 2024-03-13 09:31:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ym_010530/article/details/136670209
版权

这次接了需求是要求有倍速功能，去看了文档发现并没有倍速按钮的属性，想着手写一个吧

可最后发现原生层级太高，无论怎么样都迭不上去，就只能去找插件看看咯

找了好多插件发现都不可用，因为我这是app端，有些视频插件确实不错，但是只能对小程序和h5有用，还有的在app中显示的太突兀 

 正文来了，插件名字叫做 好用视频播放器 下面附带链接，里面文档介绍很详细

好用视频播放器 - DCloud 插件市场

给大家看一下兼容的平台

下面看一下实际效果，里面内置很多功能并且一直在更新很不错

 

独爱那杯cc
关注
  • 17
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序Video组件实现视频倍速播放
程序人生
03-12 3万+
要在小程序中实现视频倍速播放功能，在微信小程序api开发文档中有描述： https://developers.weixin.qq.com/miniprogram/dev/api/VideoContext.playbackRate.html?search-key=rate， 支持05/0.8/1.0/1.25/1.5倍率 下面整个demo: https://developers.weixin.q...
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
uni-app的video组件中实现倍速播放功能
dzry_lr的博客
12-06 3869
uni-app的video组件中实现倍速播放功能
Uni-app Video倍速播放功能
m0_58788799的博客
03-14 2402
今天接到一个给播放器新增倍速播放的功能；因为用的是uniapp自带的viedo，这里面没有倍速播放这个选项。然后在官方文档找了一会儿，找到一个API，就是这个=================>
用uniapp写一个可以调整视频0.7倍速,1.0倍速，1.25倍速1.5倍速1.75倍速2.0倍速,3.0倍速,和类似B站那样的双手指触摸控制视频大小的功能,一开始进入app的时候要横向全屏
。
11-10 249
【代码】用uniapp写一个可以调整视频0.7倍速,1.0倍速，1.25倍速1.5倍速1.75倍速2.0倍速,3.0倍速,和类似B站那样的双手指触摸控制视频大小的功能,一开始进入app的时候要横向全屏。
【视频】横屏播放，uniapp，微信小程序，可选择播放速度，暂停和继续播放
AAAXiaoApple的博客
08-24 1183
横屏播放视频
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
主要介绍了微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
uniapp多视频选择(ios)
06-15
1.uniapp写视频上传时，小程序端有多视频上传，但是Android和ios没有，当前插件就是解决iOS端多视频上传的问题。 2.如果需要Android端的相关插件可以搜索我的资源库里面有相关插件。 3.使用方法： let video=uni....
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
10-18
主要介绍了vue-video-player,通过自定义按钮组件实现全屏切换效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
uniapp 多视频上传原生插件（android）
04-06
1.uniapp写视频上传时，小程序端有多视频上传，但是Android和ios没有，当前插件就是解决Android端多视频上传的问题。 2.如果需要iOS端可以进行留言，我再传一下ios多视频的插件。 3.使用方法： let video=uni....
有关于uni-app中关于的视频播放倍数问题（安卓，ios)
Huang58_com的博客
04-24 2899
在开发ios的app的过程中，我发现uni-app中有关于视频播放倍数的问题，uni-app没有关于ios是否支持1.25，1.5倍数的相关问题，我当时在开发的过程中，发现1倍之内的倍数调试有相关的改变，而且超过1倍后的1.5，1.25都设置无效，而且uni-app只说了 微信基础库才支持2.0倍数的调试，我才没有去设置ios的2.0倍数，哇，后面在论坛上看了好多的评论，才发现uni 在ios上虽然不支持1.25，1.5倍数的调试，但是支持2.0的，真的是被官方文档带着走了，uni的问题还是挺大的 uni-
uniapp视频倍速播放插件，uniapp视频试看插件——sunny-video使用文档
最新发布
qq_38188228的博客
11-24 2402
uniapp视频倍速播放插件，uniapp视频试看插件——sunny-video使用文档。
UniApp video 使用（自定义进度条，及微信无法暂停播放设置进度问题）
卡尔特斯
08-11 6033
在小程序开发的时候，其他小程序能够正常播放，但是在微信小程序发现没有生效，原因是平台差异 案例效果
uniapp-微信小程序-短视频-video-自定义播放控件-无上下滚动-非H5
qq_41901130的博客
09-25 1715
UNIAPP微信小程序端video短视频自定义播放控件
uni-app的video禁止快进及seek()上的小坑
Anchor
04-04 9245
最近项目做的uniapp，一个需求，要求播放的视频不可以快进。 首先想到可以隐藏video进度条以及禁止手势控制 查看uniapp官方文档https://uniapp.dcloud.io/component/video，可知show-progress可以控制进度条的隐藏（但是要注意后面的注释，若是不设置宽度大于240的时候才会显示，我一开始一直都是小屏播放发现即使设置了属性为false还是一...
微信小程序-设置倍数播放按钮
wumin_12345的博客
05-06 9079
微信小程序设置视频播放倍数按钮1.0
uniapp实现视频上下滑动功能（小程序）以及video组件的暂停和播放
热门推荐
摸鱼小队
11-25 1万+
uni推荐使用swiper组件实现，在video组件的下面介绍有写。 **这里实现方式是：**父组件先用swiper组件实现纵向滑动，然后在每个swiper-item中插入视屏组件video-item-vx，在video-item-vx组件中实现视屏播放，具体别的细节根据需要自己实现。 一、视屏屏纵向上下滑动 1、父组件html <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :in
uniapp 使用video组件查看摄像头视频
05-27
要在uniapp中使用video组件查看摄像头视频，你需要使用uni-app提供的uni-mpvue插件来调用微信小程序的API。具体步骤如下： 1. 在你的uniapp项目中安装uni-mpvue插件： ``` npm install uni-mpvue --save ``` 2. 在需要使用video组件的页面中引入uni-mpvue插件： ```javascript import Mpvue from 'uni-mpvue'; ``` 3. 在data中定义一个变量来保存camera组件的Context对象： ```javascript data() { return { cameraContext: null } } ``` 4. 在组件加载时，调用uni.createCameraContext方法获取camera组件的Context对象并将其保存到data中： ```javascript onLoad() { this.cameraContext = Mpvue.createCameraContext(); } ``` 5. 在template中使用video组件，并将src属性设置为camera组件的实时视频流： ```html <video src="{{cameraContext.camera}}" autoplay></video> ``` 6. 在需要开始摄像头预览时，调用camera组件的startPreview方法： ```javascript this.cameraContext.startPreview(); ``` 7. 在需要停止摄像头预览时，调用camera组件的stopPreview方法： ```javascript this.cameraContext.stopPreview(); ``` 以上是使用uniapp中使用video组件查看摄像头视频的基本步骤。需要注意的是，具体实现方式可能会根据不同的需求而有所不同。如果您遇到了问题，可以查看uni-app官方文档或uni-mpvue插件文档，或者在官方论坛中提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值