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

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

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

 

// 视频元数据加载完成时触发。
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秒开始就不会出现这种异常卡顿。

方法很粗暴,如果有更好的方式可以留言指正,感恩!

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用uni-app提供的video组件来实现上滑播放视频的功能,具体代码如下: <template> <view class="container"> <video :src="videoUrl" @play="onPlay" @pause="onPause" @ended="onEnded"></video> </view> </template> <script> export default { data() { return { videoUrl: 'http://example.com/video.mp4', isPlaying: false } }, methods: { onPlay() { this.isPlaying = true }, onPause() { this.isPlaying = false }, onEnded() { this.isPlaying = false } } } </script> <style> .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } video { width: 100%; height: 100%; } </style> 在这个代码,我们使用uni-app提供的video组件来播放视频,通过监听play、pause和ended事件来控制视频播放状态。同时,我们使用了isPlaying变量来记录视频是否正在播放。在模板,我们将video组件放在一个容器,并设置容器的宽高为100%,使得视频可以占满整个屏幕。在样式,我们设置了video组件的宽高为100%,使得视频可以自适应屏幕大小。 ### 回答2: 实现在uniapp小程序上滑播放视频可以通过以下步骤: 1. 在uniapp的页面上,引入uni-media组件,用于播放视频uni-media是uniapp封装的视频播放组件,可以将视频播放器放置在页面上。 2. 在页面上声明一个变量,用于控制视频是否播放。例如,可以定义一个变量叫做`isPlaying`,初始值为false。 3. 监听页面的滑动事件,可以使用`@scroll`或者`@touchmove`等事件,以在滑动时触发相关操作。 4. 在滑动事件,判断用户的滑动方向和滑动距离,可以通过事件的`direction`和`deltaY`属性获取。如果向上滑动且滑动距离足够长,就将`isPlaying`变量置为true,表示开始播放视频。 5. 在uni-media组件添加条件判断,根据`isPlaying`变量的值来控制视频播放。如果`isPlaying`为true,则播放视频;如果`isPlaying`为false,则暂停视频。 6. 最后,需要在页面顶部或者其他位置添加一个视频播放器的占位元素,例如一个图片或者视频封面图,作为触发播放视频的入口。当用户滑动触发播放后,可以隐藏占位元素,显示实际的视频播放器。 简单示例代码如下: ```html <!-- 在页面上添加 uni-media 组件 --> <template> <view> <image class="video-placeholder" src="video_cover.jpg" v-if="!isPlaying" @click="startPlaying"></image> <uni-media class="video-player" :src="videoSrc" :autoplay="isPlaying"></uni-media> </view> </template> <script> export default { data() { return { isPlaying: false, // 控制视频播放状态 videoSrc: 'video.mp4' // 视频链接 } }, methods: { startPlaying() { this.isPlaying = true; // 开始播放视频 } }, // 监听滑动事件 onScroll(event) { // 判断滚动方向 if (event.direction === 'up' && event.deltaY > 100) { this.isPlaying = true; // 向上滑动播放视频 } } } </script> <style> .video-player { width: 100%; height: 300px; } .video-placeholder { width: 100%; height: 300px; } </style> ``` 以上代码实现了在uniapp小程序上滑播放视频的功能。通过监听滑动事件,判断滑动距离和方向,控制视频播放的逻辑。在页面上添加`uni-media`组件作为视频播放器,并根据`isPlaying`的值来控制视频播放和暂停。同时,通过添加一个视频播放器的占位元素,在用户滑动触发播放后,隐藏占位元素,显示实际的视频播放器。 ### 回答3: 要使用代码实现uniapp小程序上滑播放视频的功能,可以按照以下步骤操作: 1. 创建一个页面用于展示视频,可以在该页面的 template 添加一个 video 组件用于播放视频。 2. 在页面的 script 部分,定义一个 data 属性,用于保存视频播放状态和相关参数。可以包括视频是否可播放、当前播放视频索引、视频的列表等。 3. 在页面的 created 生命周期钩子函数,可以通过请求接口获取视频列表数据,并将数据保存在 data 。 4. 在页面的 onReachBottom 函数,监听上滑事件。当触发上滑事件时,可以在 data 更新当前播放视频索引,实现上滑播放下一个视频的效果。 5. 在页面的 onReady 函数,监听视频播放事件。当视频开始播放时,可以通过 data 更新视频播放状态,用于控制页面其他部分的交互。 6. 在页面的 template ,利用 v-if 或 v-show 来控制视频的显示与隐藏,根据数据播放状态来判断是否显示视频。 7. 可以添加一些交互操作,比如点击视频切换播放/暂停状态,或者点击列表项切换播放视频等。 这是一个大致的思路,具体的细节实现可以根据具体需求来进行调整和完善。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值