uniapp小程序中使用video视频播放卡顿

这篇具有很好参考价值的文章主要介绍了uniapp小程序中使用video视频播放卡顿。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题:在使用uniapp小程序的video视频播放,视频已经在播放了,但是进度条没走,还是卡顿的状态(测试ios能正常使用,安卓手机会出现此问题)

在网上找了很多方法,最多的说是用:custom-cache="false",试了并没有效果,看来和我问题不一样,后来用了个简单粗暴的方法,发现是有效果的,以下是关键代码:

uniapp小程序中使用video视频播放卡顿,uni-app,音视频

 

// 视频元数据加载完成时触发。
videoLoadedmetadata(e) {
	const that = this
	that.videoContext.play()
	that.VodLoadText = ''
	let seekCurrentTime = 0
	//解决安卓从0开始播放卡顿的问题
	if (this.videoCurrentTime == 0) {
		seekCurrentTime = 0.5
	} else {
		seekCurrentTime = this.videoCurrentTime
	}
		//记忆播放
		that.videoContext.seek(seekCurrentTime)
		//把当前时间播放时间和记忆播放时间相等
		that.currentTimeVod = seekCurrentTime
	},

原理就是发现从0播放就会发生大概率卡顿,然后我在每次视频播放的时候判断如果是从0开始播放就强制变成0.5,从0.5秒开始就不会出现这种异常卡顿。

方法很粗暴,如果有更好的方式可以留言指正,感恩!文章来源地址https://www.toymoban.com/news/detail-847411.html

到了这里,关于uniapp小程序中使用video视频播放卡顿的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp实现视频上下滑动功能(小程序)以及video组件的暂停和播放

    uni推荐使用swiper组件实现,在video组件的下面介绍有写。 这里实现方式是: 父组件先用swiper组件实现纵向滑动,然后在每个swiper-item中插入视屏组件video-item-vx(自己定义的组件),在video-item-vx组件中实现视屏播放,具体别的细节根据需要自己实现。 注意:不能无限添加swi

    2023年04月22日
    浏览(37)
  • uniapp使用video标签无法播放视频出现黑屏问题处理

    问题出现情况 并且点击播放后出现报错 解决办法 问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使用computed计算属性来解决这个问题 js html 按照上面的做法 这样问题就解决了 希望能解决大家的问题 一键三连

    2024年02月11日
    浏览(46)
  • uni-app 和H5页面视频播放flv格式视频监控

    本文章向大家介绍uniApp 实现微信小程序和app视频播放flv格式视频监控,主要包括uniApp 实现微信小程序和app视频播放flv格式视频监控使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 video 支持 App平台: 支持本地视频(

    2023年04月08日
    浏览(37)
  • uni-app小程序video不能自动全屏问题

    在这里记录下这个大坑: 废话不多说直接上干货 重点:导致安卓全屏不了的问题就在于css样式问题

    2024年02月11日
    浏览(49)
  • 微信小程序安卓视频播放卡顿问题

    在微信小程序开发中遇到在video组件的两个问题 刚开始以为是网络问题,或者是视频文件问题。排查了一下发现都没问题 最后加了个属性就OK了 uniapp和原生小程序方法 video组件兼容iOS手机 custom-cache加了这个属性会让 因此我加了当前手机型号的判断 获取当前设备api 当为iPho

    2023年04月16日
    浏览(32)
  • uniapp - 使用 <video> 播放视频黑屏,浏览器控制台报错: DOMException: The element has on supported sources.(详细完美解决方案)

    我是uniapp全平台开发(H5 / App / 小程序),突然遇到了使用 video 标签无法播放视频的问题,直接黑屏! 并且浏览器报错:Uncaught (in promise) DOMException: The element has on supported sources.

    2024年02月16日
    浏览(41)
  • uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的播放

    实现效果展示功能带你包括: 章节,倒计时,上一章,下一章,播放,暂停,倍速: uniapp官方uni.createInnerAudioContext()的文档地址:官网文档参考地址 首先分步骤介绍功能: 章节(这个调取接口遍历数据就可以,弹出层的形式展示) 倒计时 上一章 下一章 播放 暂停 倍速 我这

    2024年02月11日
    浏览(30)
  • uniapp 一次性上传多条视频 u-upload accept=“video“ uni.chooseMedia uni.uploadFile

    文档地址 uview 2.0 Upload 上传组件 html script 文档地址 video uni.chooseMedia uni.uploadFile html script css

    2024年02月19日
    浏览(34)
  • miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)

    小程序分类:uni-app qq小程序 支付宝小程序 百度小程序 钉钉小程序 微信小程序 小程序转成uni_app 小程序转为uni_app 小程序转uni_app 小程序转换 工具现在支持npm全局库、HBuilderX插件两种方式使用,任君选择,HBuilderX插件地址:https://ext.dcloud.net.cn/plugin?id=2656 【miniprogram-to-uniapp】

    2024年02月08日
    浏览(35)
  • uni-app引入海康威视h5player实现视频监控的播放

    知识储备 uni-app web-view组件相关知识:点击学习。 海康威视相关工具下载:点击跳转下载。 web-view组件不全屏显示:uni-app web-view 如果设置不全屏 不自动铺满。 工具下载 首先下载海康威视h5player的demo 在uni-app项目中static文件夹下创建文件目录,我命名为h5player 将demo中bin文件

    2024年02月02日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包